![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：合格
Collection
Collection
写一个盒子, 要求用到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, 后代, 群组, 以及常用伪类上。