页面色块分布图（源码）
<!DOCTYPE html>
<html>
<head>
<title>分布图</title>
<meta charset="utf-8">
<style>
#div0{
float: left;
height: 593px;
width: 970px;
margin: auto;
position: absolute;
left: 0;
right: 0;
}
#div1{
background: red;
float: left;
height: 103px;
width: 277px;
}
#div2{
background: green;
float: right;
height: 49px;
width: 137px;
}
#div3{
background: green;
float: right;
height: 46px;
width: 679px;
margin-top: 8px;
}
#div4{
background: yellow;
float: left;
height: 435px;
width: 310px;
margin-top: 10px;
margin-right: 10px;
}
#div5{
background: blue;
float: left;
height: 240px;
width: 450px;
margin-top: 10px;
}
#div6{
background: blue;
float: right;
height: 400px;
width: 190px;
margin-top: 10px;
margin-left: 10px;
}
#div7{
background: blue;
float: left;
height: 110px;
width: 450px;
margin-top: 10px;
}
#div8{
background: blue;
float: left;
height: 30px;
width: 450px;
margin-top: 10px;
}
#div9{
background: green;
float: right;
height: 25px;
width: 650px;
margin-top: 10px;
}
#div10{
background: blue;
float: left;
height: 35px;
width: 970px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="div0" style="margin: 0 auto;">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
<div id="div10"></div>
</div>
</body>
</html>一级菜单（横向）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏1</title>
<style>
a {
color: #333;
text-decoration: none ;
background-color: #ff0;
border-color: #fff;
border-style: ridge;
}
ul {
list-style: none;
height: 30px;
width: 900px;
}
ul li {
float: left
}
ul li a {
display: block;
height: 30px;
margin-right: 10px;
text-align: center;
line-height: 30px;
width:120px;
}
a:hover {
background: #F60;
color: #fff;
}
</style>
</head>
<body>
<div align="center">
<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>
</ul>
</div>
</body>
</html>一级菜单（竖向）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏1</title>
<style>
a {
color: #333;
text-decoration: none ;
background-color: #ff0;
border-color: #fff;
border-style: ridge;
border-left: 10px solid #FF0000;
}
ol {
list-style: none;
height: 30px;
}
ol li a {
display: block;
height: 30px;
margin-right: 10px;
text-align: center;
line-height: 30px;
width:120px;
margin-left: 1px;
margin-bottom: 1px;
}
a:hover {
background: #F60;
color: #fff;
}
</style>
</head>
<body>
<div>
<ol>
<li><a href="#"> Home</a> </li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Next Station</a></li>
<li><a href="#">Contact Me</a></li>
</ol>
</div>
</body>
</html>二级简易菜单
<!DOCTYPE html>
<head>
<meta charset=utf-8">
<title>二层导引</title>
<style>
*{ margin:0px; padding:0px;}
#nav{ width:560px; height:30px; margin:0 auto;}
#nav ul{ list-style:none; }
#nav ul li{ width: 80px;height: 30px;background-image: url(button1.jpg);
float:left; line-height:30px; text-align:center;}
#nav ul li a{ text-decoration:none; color:#000; display:block;}
#nav ul li a:hover{width: 80px;height: 30px;background-image: url(button2.jpg);}
#nav ul li ul{ position:absolute; display:none;}
#nav ul li ul li{ float:none; line-height:30px; text-align:left;}
#nav ul li ul li a{ width:80px;}
#nav ul li:hover ul{ display:block}
</style>
</head>
<body>
<div align="center">
<img src="C:\h5\img\banner_bg.jpg" style="width: 560px;height: 20px;">
</div>
<div id="nav">
<ul>
<li><a href="#">首页导读</a></li>
<li><a href="#">推荐版面</a>
<ul>
<li><a href="#">生活</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">电影</a></li>
</ul>
</li>
<li><a href="#">推荐文章</a>
<ul>
<li><a href="#">生活</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">电影</a></li>
</ul></li>
<li><a href="#">人气排名</a>
<ul>
<li><a href="#">生活</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">电影</a></li>
</ul></li>
<li><a href="#">新开讨论区</a>
<ul>
<li><a href="#">生活</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">电影</a></li>
</ul></li>
<li><a href="#">休闲娱乐</a>
<ul>
<li><a href="#">生活</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">电影</a></li>
</ul></li>
<li><a href="#">常见问题</a>
<ul>
<li><a href="#">生活</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">电影</a></li>
</ul></li>
</ul>
</div>
</body>
</html>