1.用DIV将页面分块
一般页面布局的框架包括:页面容器、页面头部、页面主体和页脚几个部分,每个部分使用ID来表示
页面头部一般包括Logo及导航菜单等一些信息,页面主体主要是网页所要显示的内容、链接及广告等,页脚一般就是网站的信息、版权等内容。
2.设计各块的位置
3.用CSS将分布的DIV定位
<!DOCTYPE html>
<html>
<head>
<title>DIV</title>
<style type="text/css">
body{font-family: Verdana;font-size: 14px;margin: 0;}
#divmax{margin: 0 auto;width: 100%;}
#divheader{height: 100px;background: #6cf;margin-bottom: 5px;}
#divContent{height: 400px;margin-bottom: 5px;}
#divleft{float: left;width: 45%;height: 400px;background: #9ff; }
#divright{float: right;width: 55%;height: 400px;background: #cff;}
#divfoot{height: 50px;background: #6cf;}
</style>
</head>
<body>
<div id="divmax">
<div id="divheader">页面头部</div>
<div id="divContent">
<div id="divleft">左面页面内容</div>
<div id="divright">右面页面内容</div></div>
<div id="divfoot">页脚</div>
</div>
</body>
</html>