div+css对网页进行布局
首先在页面整体上进行div标签划分内容区域，然后再用css进行定位，最后再对相应的区域添加内容。
1、用div将页面划分
拿到网站页面图后，首先将分析页面分为哪几块,然后用DIV划分出各个内容区域，一般页面有页面顶部、
轮播图、主体内容、菜单主导航、页面底部（footer又叫脚注）几个部分构成，每个部分分别由自己的id来标识。
如图：
2.设计各内容块的位置
页面内容确定后，则需要根据内容本身去考虑页面的版型，例如菜单、双栏、左右中，
大型网站和一些门户网站大都使用左中右三栏，一般是建议使用两栏。等内容块确定后就
可以使用css直接定位了。
如图：
3、用css定位
把页面框架确定后就可以css对各个设计的内容块进行定位，然后对各个块
进行整体规划，最后再添加内容。
4、实例
山东大学网页如下图，分了10个大块，用div分块，css修饰定位 ，效果图代码如下
分块：
效果图：
程序代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>山东大学练习</title>
<style type="text/css">
/* 顶部 */
#top{
width: 100%;
height: 40px;
background-color: #444444;
}
/* 导航链接区 */
#nav{
width: 100%;
height: 110px;
background-color: #9b0d14;
}
#nav1{
width: 1300px;
margin:0 auto;
position:relative;
}
ul,li{
list-style:none;
padding:0;
margin:0;
border:0;
}
#logo{
width:264px;
height:82px;
position:absolute;
top:16px;
left:50%;
margin-left:-132px;
}
.navList li{
width:100px;
height:100%;
float: left;
font-size:18px;
text-align: center;
color: white;
line-height: 110px;
}
.navList li:hover{
background-color:#a7181f;
cursor:pointer;
}
.navList5{
margin-right:300px;
}
/* 轮播图 */
#chart{
width: 80%;
height: 300px;
border: 1px solid black;
background-color: beige;
margin:auto;
}
/* 新闻 */
#new{
width:80%;
height: 300px;
border: 1px solid black;
background-color: darkgrey;
margin:auto;
}
#new1{
width:65%;
height: 300px;
background-color: red;
float: left;
}
#new2{
width:35%;
height: 300px;
background-color: blue;
float: left;
}
/* 山大视点 */
#sd{
width:100%;
height: 500px;
background:url(img/qiebg.jpg) ;
}
/* 3快内容 */
#box{
width: 80%;
height: 400px;
border: 1px solid black;
background-color: grey;
margin:auto;
}
.box1{
width: 33.16%;
height: 100%;
border: 1px solid red;
background-color: seagreen;
margin:auto;
float: left;
}
/* 专题 */
#special{
width: 80%;
height: 150px;
border: 1px solid red;
background-color: grey;
margin:auto;
}
/* 链接 */
#link{
width: 100%;
height:100px;
background-color:#9b0d14;
}
.linkBox{
width: 1200px;
height: 96px;
margin: 0px auto;
}
.pic{
float:left;
width:113px;
height:96px;
background: url(img/link.png);
background-position: center;
background-repeat:no-repeat;
margin-right:20px;
}
.linkBox ul li{
height:96px;
float: left;
color: white;
line-height: 96px;
padding:0 14px;
}
.linkBox ul li a{
color:white;
text-decoration:none;
}
/* foot */
#foot{
width:100%;
height:250px;
background:url(img/footbg.jpg);
}
/* 版权 */
#copyright{
width:100%;
height:70px;
background-color:#242424;
}
</style>
</head>
<body>
<!-- 顶部 -->
<div id="top"></div>
<!-- 导航链接区 -->
<div id="nav">
<!-- <div id="nav1">
<div id="logo">
<a href="" title="山东大学">
<img src="img/logo.png" width="263" height="82" />
</a>
</div>
<div class="navList">
<ul>
<li>山大概况</li>
<li>组织机构</li>
<li>教育教学</li>
<li>科学研究</li>
<li class="navList5">招生就业</li>
<li>人才队伍</li>
<li>合作交流</li>
<li>学科建设</li>
<li>校园服务</li>
<li>校园文化</li>
</ul>
</div>
</div>
</div> -->
</div>
<!-- 轮播图 -->
<div id="chart"></div>
<!-- 新闻 -->
<div id="new">
<div id="new1"></div>
<div id="new2"></div>
</div>
<!-- 山大视点 -->
<div id="sd"></div>
<!-- 3快内容 -->
<div id="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
<!--专题 -->
<div id="special"></div>
<!--链接 -->
<div id="link">
<!-- <div class="linkBox">
<span class="pic">
</span>
<ul>
<li><a href="#">教育部</a></li>
<li><a href="#">人民网</a></li>
<li><a href="#">新华网</a></li>
<li><a href="#">光明网</a></li>
<li><a href="#">央视网</a></li>
<li><a href="#">中新网</a></li>
<li><a href="#">中国教育新闻网</a></li>
<li><a href="#">北京大学</a></li>
<li><a href="#">清华大学</a></li>
<li><a href="#">复旦大学</a></li>
<li><a href="#">浙江大学</a></li>
<li><a href="#">更多>></a></li>
</ul>
</div> -->
</div>
<!-- foot -->
<div id="foot"></div>
<!-- 版权 -->
<div id="copyright"></div>
</body>
</html>