版心是网页布局中非常重要的概念,(可视区)指网页中的主体内容区域。
一般在浏览器中居中显示,显示宽度常见960px,980px,1000px,1200px等。
布局流程
- 确定页面版心
- 分析页面中的行模块,以及每一个行模块中的列模块
- 制作HTML结构
- CSS初始化,然后通过盒子模型远离,通过DIV+CSS布局来控制网页每个模块
一列固定宽度且居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一行固定宽度且居中</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.container{
width: 1200px;
margin: 0 auto;
}
div .top{
background-color: rgb(152,252,254);
height: 100px;
margin-bottom: 10px;
}
div .banner{
background-color: rgb(152,252,254);
height: 300px;
margin-bottom: 10px;
}
div .main{
background-color: rgb(152,252,254);
height: 400px;
margin-bottom: 10px;
}
div .footer{
background-color: rgb(152,252,254);
height: 80px;
}
</style>
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="banner"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
</body>
</html>
左右型结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右型结构</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.whole{
width: 1000px;
margin: 0 auto;
}
div .top{
height: 80px;
background-color: rgb(152,252,254);
margin-bottom: 10px;
}
div .banner{
height: 150px;
background-color: rgb(152,252,254);
margin-bottom: 10px;
}
div .main{
/*用来清除浮动*/
overflow: hidden;
margin-bottom: 10px;
}
div .left{
float:left;
width: 400px;
height: 400px;
background-color: rgb(152,252,254);
margin-right: 10px;
}
div .right{
float:left;
width: 590px;
height: 400px;
background-color: red;
}
div .footer{
height: 80px;
background-color: rgb(152,252,254);
}
</style>
</head>
<body>
<div class="whole">
<div class="top"></div>
<div class="banner"></div>
<div class="main">
<div class="left">
</div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
通栏平均分布型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通栏平均分布型</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.whole{
width: 100%;
}
div .top{
background-color: rgb(151,248,254);
margin-bottom: 5px;
}
div .top .topSmall{
width: 960px;
height: 60px;
margin: 0 auto;
background-color: rgb(73,72,58);
}
div .content{
}
div .content .top{
width: 960px;
height: 300px;
margin: 0 auto;
background-color: rgb(151,248,254);
}
div .content .bottom{
width: 960px;
height: 500px;
margin: 0 auto;
background-color: rgb(73,72,58);
}
div .content .bottom ul li{
height: 500px;
width:225px;
float:left;
margin-right: 20px;
list-style: none;
}
div .content .bottom .div1{
background-color: rgb(231,170,81);
}
div .content .bottom .div2{
background-color: rgb(238,197,202);
}
div .content .bottom .div3{
background-color: rgb(193,243,172);
}
div .content .bottom .div4{
margin-right: 0px;
background-color: rgb(107,37,120);
}
div .footer{
width: 100%;
height: 60px;
background-color: rgb(153,248,252);
}
</style>
</head>
<body>
<div class="whole">
<div class="top">
<div class="topSmall"></div>
</div>
<div class="content">
<div class="top">
</div>
<div class="bottom">
<ul>
<li class="div1"></li>
<li class="div2"></li>
<li class="div3"></li>
<li class="div4"></li>
</ul>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
一个重要的概念:
banner:
banner是一种宣传广告图,主要用于网站、活动宣传广告、报纸杂志中。最常用于的就是网站。
banner一般会占据访问页面的一半框架区域,能吸引客户第一时间注意到大图所宣传的内容,所以banner图对网站来说作用是非常大的一部分。一般作为轮播图