文档介绍：网页设计综合实例解析
知识点
页面的布局与规划
Html结构
CSS实现
首页设计图
页面的布局与规划
#container 最大的容器
#head 顶部容器
#nav 导航条
#pagebody 中间的容器
#footer 底部容器
#mainbody
主体内容
#sidebar
侧边栏
页面的布局与规划
Html结构
<body>
<div id="container">
<div id="head">
<div id="nav"></div>
</div>
<div id="pagebody">
<div id="mainbody"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
</body>
#head 结构对比
<div id="head">
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">Html</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">DW</a></li>
<li><a href="#">综合案例</a></li>
</ul>
</div>
</div>
#head {
height:140px;
width:1130px;
background-image:url(../images/);
}
#nav {
margin-top:30px;
height:55px;
width:582px;
float:right;
}
#nav ul{ ……}
#nav a:link {……}
#pagebody 结构对比
#pagebody {
padding:26px 131px 25px 84px;
background-color:#EEE;
}
<div id="pagebody">
<div id="mainbody"></div>
<div id="sidebar"></div>
</div>
#mainbody {
width:626px;
height:482px;
border:1px #CCC solid;
background-color:#FFF;
padding-top:5px;
float:left;
}
#sidebar {
width:256px;
height:482px;
background:#FFF
url(../images/)
no-repeat;
border:1px #CCC solid;
float:right;
}
# footer 结构对比
<div id="footer">
<ul>
<li ><a href="#">网站声明</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">网站地图</a></li>
<li><a href="#">友情链接</a></li>
</ul>
<br />
2008-2013 . all rights reserved
</div>
#footer {
width:1130px;
height:90px;
text-align:center;
line-height:45px;
color:#FFF; background:url(../images/ti )
no-repeat;
}
# mainbody 结构对比-上
<div id="up1">
<h1 id="red">Html知识</h1>
<ul>
<li>基本标签及属性</li>
……
</ul>
</div>
<div id="up2"> ……</div>
<div id="up3"> ……</div>
<div class="clear"></div>
#up1 {
float:lef