经典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>

<title>CSS汇总学习</title>

</head>

<body>

<div class='top-div'>top-div网页头部</div>

<div class='second-div'>second-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='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>

</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%;

}

经典css布局案例

相关推荐