继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

土星猪
关注TA
已关注
手记 76
粉丝 5
获赞 0

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


    

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



二 课程内容:


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


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

input[type="button"]:hover{

background-color:blueviolet;

}

hover = 浮动(伪类)

http://img1.mukewang.com/6319e9f000017faa12490675.jpg

效果:

http://img.mukewang.com/6319ea750001726f09470472.jpg


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


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

获取 m的id,写入隐函数

http://img3.mukewang.com/6319f9930001130d10010449.jpg

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

http://img2.mukewang.com/6319fa2000015b9411250595.jpg

测试没问题

点击m

http://img2.mukewang.com/6319fa850001f8c209480510.jpg

出现了

http://img3.mukewang.com/6319fa640001d6e117310815.jpg


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


http://img4.mukewang.com/6319fb5d0001578208180470.jpg

http://img2.mukewang.com/6319fb7c0001c55106630481.jpg


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

添加 box-sizing: border-box

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


http://img2.mukewang.com/6319fcbb0001309c09740549.jpg

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


本章完!














打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP