写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0704作业</title> <!--7月4日作业:写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法--> <style> /*完整语法*/ p{ color:blueviolet; } .margin { magin-top:100px; margin-bottom:100px; margin-left: 50px; margin-right:50px; } .padding { padding-bottom:10px; padding-top:10px; padding-left:20px; padding-right:20px; } /*简写语法*/ .border { border-style:dotted solid double dashed; /*border-style (required)*/ /*上边框是dotted,右边框是solid，底边框是double,左边框是dashed*/ border-width:10px 20px; /*borders属性设置：border-width,border-style(required),border-color*/ } </style> </head> <!--在头部放置盒子边框、填充、边距属性值--> <body> <p class="border">这是一个边框盒子</p> <p class="padding">这是一个填充盒子</p> <p class="margin" color="red">这是一个外边距盒子</p> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
. 模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果。
写出你对常用选择器的使用体会, 重点放在标签, class, id, 后代, 群组, 以及常用伪类上。