摘要：主要学习到了css里面的盒模型的内容，盒模型分为，内容（content）、内边距（padding）、边框(border)、外边距(margin)组成。内边距与内容相连，由于内边距与内容撑起边框与外边距，设置内边距后在内容内设置一些属性，内边距会同样变化，比如背景色。边框可以设置多种不同的类型，实线、虚线等，边框(border)的第一个属性是边框宽度，第二个是边框样式，第三个是边框颜色。外边距一般用
主要学习到了css里面的盒模型的内容，盒模型分为，内容（content）、内边距（padding）、边框(border)、外边距(margin)组成。内边距与内容相连，由于内边距与内容撑起边框与外边距，设置内边距后在内容内设置一些属性，内边距会同样变化，比如背景色。边框可以设置多种不同的类型，实线、虚线等，边框(border)的第一个属性是边框宽度，第二个是边框样式，第三个是边框颜色。外边距一般用来定位和调整元素与元素的距离。与内边距一样4个属性代表盒模型的四个边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS中的边框样式作业</title>
<style>
.c800{
width: 800px;
height: 600px;
margin: 0 auto;
}
.l400{
width: 392px;
height: 200px;
background: #5cc75b;
text-align: center;
display: inline-block;
line-height: 100px;
color: #fff;
border: 2px solid ;
}
.r400{
width: 392px;
height: 200px;
background: #5195f5;
text-align: center;
display: inline-block;
line-height: 100px;
color: #fff;
border: 2px solid ;
}
.l600{
width: 592px;
height: 200px;
background: #ff0000;
text-align: center;
display: inline-block;
line-height: 100px;
color: #fff;
margin: 10px 0;
border: 2px solid ;
}
.r200{
width: 192px;
height: 200px;
background: #5500ff;
text-align: center;
display: inline-block;
line-height: 100px;
color: #fff;
margin: 10px 0;
border: 2px solid ;
}
.l200{
width: 192px;
height: 200px;
background: #5500ff;
text-align: center;
display: inline-block;
line-height: 100px;
color: #fff;
border: 2px solid ;
}
.c400{
width: 392px;
height: 200px;
background: #ff9600;
text-align: center;
display: inline-block;
line-height: 100px;
color: #fff;
border: 2px solid ;
}
.r200_1{
width: 192px;
height: 200px;
background: #000000;
text-align: center;
display: inline-block;
line-height: 100px;
color: #fff;
border: 2px solid ;
}
.l400:hover{
border: 2px solid #000;
}
.r400:hover{
border: 2px solid #000;
}
.l600:hover{
border: 2px solid #000;
}
.r200:hover{
border: 2px solid #000;
}
.l200:hover{
border: 2px solid #000;
}
.c400:hover{
border: 2px solid #000;
}
.r200_1:hover{
border: 2px solid #000;
}
</style>
</head>
<body>
<div class="c800">
<div class="l400">
1
</div>
<div class="r400">
2
</div>
<div class="l600">
3
</div>
<div class="r200">
4
</div>
<div class="l200">
5
</div>
<div class="c400">
6
</div>
<div class="r200_1">
7
</div>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-11-18 15:24:52
老师总结：class的命名不要使用无意义的字母和数字（魔术字符）。养成好的命名习惯，对以后的编程生涯有很大的帮助
