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

【学习打卡】第11天 仿计算器案例(计算机面板实现)

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

一 课程名称


    课程名称:仿计算器案例


    课程章节:计算机面板实现


二 课程内容

    初步实现计算面板,及添加样式

    

    1.配置文件js和css路径

    http://img4.mukewang.com/62fb51300001d1cb08840286.jpg

    

    2.开始页面的分析,表单元素需要多少

        1 文本框  10个数字button按钮  4个运算符号 1个小数点 1个退位键 1个正负号 1个等号

        1个清屏键(20个按钮先空出一个再加一个文本框)20+1 =21 ,最终布局

    

    3.

    写入一个大div 里面写入两个div

    分别在div里面写入 文本框和 20个按钮 并写上id(用id写css)

    http://img.mukewang.com/62fb53e400015d1911210796.jpg

    效果

    http://img1.mukewang.com/62fb543b0001f98311250540.jpg

    4. 开始写样式

    先把边距和填充设置为0px

http://img3.mukewang.com/62fb5a940001e46404450474.jpg

http://img1.mukewang.com/62fb5aa10001eead08740534.jpg


然后给全部div设置宽度

http://img2.mukewang.com/62fb5b060001eb9b08670589.jpg

效果

http://img4.mukewang.com/62fb5b1a0001ea9a08610528.jpg

给 大div1 设置 高度 边距 位置等


http://img.mukewang.com/62fb5db50001b21d09700653.jpg

http://img1.mukewang.com/62fb5dc00001427b07660392.jpg

调整button按钮键外观,我们用这种方式  宽度30px 右边距5px

http://img2.mukewang.com/62fb5f8b0001944305110354.jpg

http://img4.mukewang.com/62fb5f970001f82b05540376.jpg

我们发现文本框和按钮框位置不对齐,我们需要修改一下css。

我们可以修改按钮键变大或者把文本框缩短与按钮键并齐。

这里我们选择把文本款缩小


计算一下按钮键的大小

是 30

http://img1.mukewang.com/62fb62ba0001f42108060542.jpg

边距我们设置的是5px

http://img1.mukewang.com/62fb633d0001120903420198.jpg


我们有四个按钮 所以公式是35*4=140

测试过后发现140比较短,我们微调后146px是最适合

http://img2.mukewang.com/62fb641a0001e35a07720470.jpg



效果

http://img3.mukewang.com/62fb640c0001206306710443.jpg

三.  本章的重点就是学会计算图片的大小和边距

        期待下一课!O(∩_∩)O



    

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