关于网页结构的自我体会：
<!doctype html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>网页结构</title>
<style type="text/css">
*{margin:0px;padding:0px;text-align:center;}
/*头部区域*/
#header{width:1000px;height:100px;border:1px solid #f6f;margin:0 auto 10px;}
#header .header_logo{width:200px;height:100px;background:#cccc00;float:left;}
#header .header_img{width:500px;height:100px;background:#ccff33;float:left;margin:0 50px;}
#header .header_search{width:200px;height:100px;background:#33ff99;float:right;}
/*头部区域结束*/
/*导航栏*/
#nav{width:1000px;height:50px;border:1px solid #30c;margin:0 auto 10px;}
#nav ul li{list-style-type:none;width:94px;height:50px;float:left;margin:0px 3px;line-height:50px;}
#nav ul li:nth-child(1){background:#ffcc99;}
#nav ul li:nth-child(2){background:#ff66cc;}
#nav ul li:nth-child(3){background:#cccc99;}
#nav ul li:nth-child(4){background:#cc6600;}
#nav ul li:nth-child(5){background:#cc9933;}
#nav ul li:nth-child(6){background:#ccff00;}
#nav ul li:nth-child(7){background:#66cccc;}
#nav ul li:nth-child(8){background:#3399ff;}
#nav ul li:nth-child(9){background:#339900;}
#nav ul li:nth-child(10){background:#cc3300;}
/*导航栏结束*/
/*内容部分*/
#content{width:1000px;height:600px;border:1px solid #ff0033;margin:0 auto;}
#content .content_left{width:200px;height:600px;background:#33ffcc;float:left;}
#content .content_right{width:750px;height:600px;background:#ccffff;float:right;}
#content .content_right .content_right_top{width:750px;height:300px;background:#cccc99;margin-bottom:20px;}
#content .content_right .content_right_bottom{width:750px;height:280px;background:#cc66cc;}
/*内容部分结束*/
/*尾部*/
#footer{width:1000px;height:40px;background:#ff9900;margin:10px auto;border:1px solid #660000;}
/*尾部结束*/
</style>
</head>
<body>
<!--头部区域-->
<div id="header">
<div class="header_logo">LOGO图</div>
<div class="header_img">图片栏</div>
<div class="header_search">搜索栏</div>
</div>
<!--头部区域结束-->
<!--导航栏-->
<div id="nav">
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
<li>选项7</li>
<li>选项8</li>
<li>选项9</li>
<li>选项10</li>
</ul>
</div>
<!--导航栏-->
<!--内容部分-->
<div id="content">
<div class="content_left"></div>
<div class="content_right">
<div class="content_right_top"></div>
<div class="content_right_bottom"></div>
</div>
</div>
<!--内容部分结束-->
<!--尾部-->
<div id="footer">
</div>
<!--尾部结束-->
</body>
</html>
这是我所做的关于网页结构的一个页面，主要是结合老师讲解，将整个页面分为几个大块，通过添加各种块级元素来达到一个基本的网页布局。
原文：http://www.cnblogs.com/lbgp/p/4909044.html