一 课程名称

    课程名称：仿计算器案例

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

二 课程内容

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

    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