摘要：本章主要学习了背景的元素以及什么事块元素以及行内块元素，和行内元素等，通过display，inline行内元素，block块元素，inline-block行内块元素，他们之间可以互相转化。position以及什么是相对定位和绝对定位等。absolute脱离文档流，不占用位置。relative不脱离文档流定位。以及浮动的用法和如何清除浮动。<!DOCTYPE html> <
本章主要学习了背景的元素以及什么事块元素以及行内块元素，和行内元素等，通过display，inline行内元素，block块元素，inline-block行内块元素，他们之间可以互相转化。position以及什么是相对定位和绝对定位等。absolute脱离文档流，不占用位置。relative不脱离文档流定位。以及浮动的用法和如何清除浮动。
<!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;
}
.logo{
float: left;
text-align: center;
padding: 0 20px;
width: 100px;
height: 60px;
font-size: 30px;
color: #5195f5;
}
.nva {
width: 800px;
height: 60px;
margin: 0 auto;
}
.nva ul li{
list-style: none;
float: left;
color: #fff;
background: #5195f5;
margin: 0 10px;
padding: 10px 30px;
border: 1px solid #5195f5;
}
.nva ul li:hover{
color: #5195f5;
background: #fff;
border: 1px solid #5195f5;
}
.clear{
clear: both;
}
.kf{
width: 100px;
height: 100px;
background: #5195f5;
color: #fff;
position: fixed;
top: 30%;
right: 1%;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="nva">
<div class="logo">
logo
</div>
<ul>
<li>首页</li>
<li>关于</li>
<li>合作</li>
<li>加盟</li>
<li>联系</li>
</ul>
</div>
<div class="clear"></div>
<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>
<div class="kf">
QQ
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-11-18 15:46:53
老师总结：class中不要使用无意义的字符和数字来命名。
