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

}

(0)

相关推荐