一 课程名称
课程名称：仿计算器案例
课程章节：计算机面板实现
二 课程内容
初步实现计算面板，及添加样式
1.配置文件js和css路径
2.开始页面的分析，表单元素需要多少
1 文本框 10个数字button按钮 4个运算符号 1个小数点 1个退位键 1个正负号 1个等号
1个清屏键（20个按钮先空出一个再加一个文本框）20+1 =21 ，最终布局
3.
写入一个大div 里面写入两个div
分别在div里面写入 文本框和 20个按钮 并写上id（用id写css）
效果
4. 开始写样式
先把边距和填充设置为0px
然后给全部div设置宽度
效果
给 大div1 设置 高度 边距 位置等
调整button按钮键外观，我们用这种方式 宽度30px 右边距5px
我们发现文本框和按钮框位置不对齐，我们需要修改一下css。
我们可以修改按钮键变大或者把文本框缩短与按钮键并齐。
这里我们选择把文本款缩小
计算一下按钮键的大小
是 30
边距我们设置的是5px
我们有四个按钮 所以公式是35*4=140
测试过后发现140比较短，我们微调后146px是最适合
效果
三. 本章的重点就是学会计算图片的大小和边距
期待下一课！O(∩_∩)O
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦