经典css布局案例
经典css布局案例
1、CSS浮动
包括：块元素和行内元素、display属性、浮动float。块元素和行内元素的区别是：块元素有大小，而行内元素没有；块元素默认单独占一行，行内元素都在同一行。
既然块元素和行内元素有各自的特点，当我们需要来回切换他们的模式时，该怎么做呢？例如想要块元素都按行排列。这时，就引入了display属性，它是规定元素应该生成的框的类型，即可以让块元素和行内元素之间进行切换。
2、展示效果
3、重难点配置
浮动：三个div，前两个浮动，后面不浮动。（clear:both;）；
左边固定，右侧满铺。
图片居中：div内部图片居中
外边框显示含义：margin:0px 100px 0px 100px;
4、目录结构
huizong.css
div-huizong.html
Image：bottom.jpg、bottom.jpg
源代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS汇总学习</title>
<link rel="stylesheet" type="text/css" href="huizong.css">
</head>
<body>
<div class="top-div">top-div网页头部</div>
<div class="second-div">second-div网页第二部分</div>
<div class="line31-div">line31-div</div>
<div class="line32-div">line32-div</div>
<div class="line41-div">line41-div网页中部</div>
<div class="line42-div">line42-div网页中部1</div>
<div class="line43-div">line43-div网页中部2</div>
<div class="line44-div">line44-div网页中部3</div>
<div class="line5-div">
<div class="line51-div">line51-div</div>
<div class="line52-div">
<div class="line52-1-div">line52-1-div网页</div>
<div class="line52-2-div">line52-2-div网页</div>
<div class="line52-3-div">line52-3-div网页</div>
<div class="line52-4-div">line52-4-div网页</div>
<div class="line52-5-div">line52-5-div网页</div>
</div>
</div>
<div class="line6-div">line6-div</div>
<div class="line7-div">line7-div</div>
<div class="line8-div"><img src="image/bottom1.jpg"></div>
<div class="line9-div">
<div class="line91-div"><img src="image/bottom.jpg"></div>
</div>
</body>
<style>
body{ margin:0;padding:0;}
</style>
</html>
样式格式：
.top-div{
background-color: #333333;
width: 100%;
height: 50px;
color: #B0B0B0;
text-align: center;
line-height: 50px;
}
.second-div{
width: 100%;
height: 127px;
text-align: center;
line-height: 127px;
}
.line31-div{
height: 293px;
text-align: center;
line-height: 293px;
background-color: #000099;
/* margin:0px 100px 0px 100px; //上,右,下,左*/
margin-left: 6%;
width: 10%;
float: left;
margin-bottom:10px;
}
.line32-div{
height: 293px;
width: auto;
text-align: center;
line-height: 350px;
margin-right: 6%;
overflow: hidden; background-color: #0066ff;
margin-bottom:10px;
}
.line41-div{
clear: both;
margin-left: 6%;
height: 150px;
width: 10%;
background-color: #660066;
float: left;
}
.line42-div{
margin-left: 100px;
height: 150px;
margin-left: 0.6%;
width: 25.4%;
float: left;
overflow: hidden; background-color: #ffcc66;
}
.line43-div{
margin-left: 0.6%;
margin-right: 0.6%;
height: 150px;
width: 25.4%;
background-color: #ff3366;
float: left;
}
.line44-div{
margin-right: 6%;
height: 150px;
width: 25.4%;
background-color: #ccffff;
float: left;
}
.line5-div{
clear: both;
height: 350px;
/* margin:0px 100px 0px 100px; //上,右,下,左*/
margin: 170px 6% 10px 6%;
}
.line51-div{
height: 100px;
width: 100%;
text-align: center;
line-height: 100px;
}
.line52-div{
height: 350px;
}
.line52-1-div{
background-color: red;
height: 100%;
float: left;
width: 19.46%;
}
.line52-2-div{
background-color: #bfbfbf;
height: 100%;
float: left;
margin-left: 0.6%;
width: 19.46%;
}
.line52-3-div{
background-color: #f1f1f1;
height: 100%;
float: left;
margin-left: 0.6%;
width: 19.46%;
}
.line52-4-div{
background-color: #f1f1f1;
height: 100%;
float: left;
margin-left: 0.6%;
width: 19.46%;
}
.line52-5-div{
background-color: #bfbfbf;
height: 100%;
float: left;
margin-left: 0.6%;
width: 19.46%;
}
.line6-div{
height: 100px;
text-align: center;
line-height: 100px;
background-color: #333333;
margin: 110px 6% 0px 6%;
}
.line7-div{
margin-top: 10px;
height: 200px;
width: 100%;
background-color: #d7d7d7;
}
.line8-div{
display: flex;
justify-content: center;
align-items: center;
}
.line8-div img{
width: 100%;
}
.line91-div{
display: flex;
justify-content: center;
align-items: center;
}
.line91-div img{
width: 100%;
}
