9-21 div的三个简单练习

练习1
页面如下设计

要求一：style必须采用链入式
要求二（边框）：
边框只有上边 左边 右边显示
边框颜色：灰色
边框宽度：1px
要求三（位置）：
盒子div:页面内水平居中

练习1-盒子边框属性居中.png

练习2

提示：
1、盒子紧紧靠在浏览器左上角
2、大盒子的width为1000px;
height为500px;
之中的两个小盒子的height为300px;
3、盒子的边框与大盒子的边框死死挨着，小盒子的边框为2px
4、小盒子的四边均有边框
补充：关于内嵌
<div>外层盒子
<div>内层盒子</div>
</div>

盒子的嵌套-盒子的宽度.png

练习3

提示：
1、盒子紧紧靠在浏览器左上角
2、大盒子的width为1000px;
height为500px;
第一个小盒子内的字似乎距离这个盒子的上边框有10px，距离左边框有10px
第二个小盒子内的字似乎距离这个盒子的上边框有20px，距离左边框有20px

盒子padding的影响.png