为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第4天 仿计算器案例(计算器细节完善)

一 课程名称: 仿计算器案例


    

课程章节:最后细节完善计算器



二 课程内容:


1.鼠标指针浮动在按钮键上时背景色改变


首先在css里添加样式 背景颜色

input[type="button"]:hover{

background-color:blueviolet;

}

hover = 浮动(伪类)

https://img1.sycdn.imooc.com//6319e9f000017faa12490675.jpg

效果:

https://img1.sycdn.imooc.com//6319ea750001726f09470472.jpg


2.按m按钮键打开慕课网网址


新建一个js,写入一个函数moo_num

获取 m的id,写入隐函数

https://img1.sycdn.imooc.com//6319f9930001130d10010449.jpg

把文件引用进去,写进onload里

https://img1.sycdn.imooc.com//6319fa2000015b9411250595.jpg

测试没问题

点击m

https://img1.sycdn.imooc.com//6319fa850001f8c209480510.jpg

出现了

https://img1.sycdn.imooc.com//6319fa640001d6e117310815.jpg


3.让0在文本框有距离,向左偏移


https://img1.sycdn.imooc.com//6319fb5d0001578208180470.jpg

https://img1.sycdn.imooc.com//6319fb7c0001c55106630481.jpg


对齐方式改变了,是因为我们添加内边距所导致的,需要修改一下

添加 box-sizing: border-box

代码意义:不额外延伸,用已存在的增加边距


https://img1.sycdn.imooc.com//6319fcbb0001309c09740549.jpg

三,本节难点,都是修改小问题,没有难度 O(∩_∩)O


本章完!














点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
数据库工程师
手记
粉丝
5
获赞与收藏
0

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消