首先搭建基本机构：
<div id="menu">
<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>
</ul>
</div>
这时候看到的一个纵列文字前带圆点的列表
然后用css进行美化：
#menu {
background-color: #6282ac
height: 35px
width: 570px
position: relative
}
定义菜单的宽，高，颜色及定位方式。
#menu ul {
list-style-type: none
}
去掉文字下划线。
#menu li {
float: left
display: block
width: 60px
height: 31px
margin-top: 2px
margin-right: 6px
margin-bottom: 2px
margin-left: 6px
line-height: 31px
text-align: center
background-repeat: repeat-x
border: 1px solid #FFFFFF
}
定义“float: left”使列表项横向排列，设置高与行高使链接文字垂直居中。
menu a {
font-family: Arial, Helvetica, sans-serif
font-size: 10px
background-image: url(../images/b.gif)
display: block
background-repeat: repeat-x
}
定义链接的字体及背景
#menu a:hover{
background-image: url(../images/a.gif)
display: block
background-repeat: repeat-x
}
定义a的伪类实现鼠标点击时的背景变化
这是一个简单的案例会把之前博客中讲到的CSS的基本知识串起来，算是一个稍微综合一点的案例了！这里我会详细的每一部分的进行介绍！
从这张图中我们可以看到首页大致分为如下的几个部分：
CSS初始化
确定版心的大小
可以使用PS的矩阵选框工具确定
如图所示版心的宽为1200px
导航栏的大小为1366px
可以分为四部分来做：logo、navbar、search、personal
页面结构部分：
CSS的样式部分
其中需要注意的几个点是：
结构
css样式为：
注意点：
结构
CSS样式：
需要注意的是
结构
样式
注意：
结构
样式css
注意
样式的引用形式大致可分为以下四种：一、行间样式，即直接加在标签上的样式 例:<div style="width:50px"></div>
二、内联样式 即用<style></style>标签括起来写在页面中的样式
三、外联样式：即将样式单独放到一个文件夹中，然后用link标签引入页面的形式
四，导入样式，即将样式，按模块划分或其它的分法分别放在不同的css文件中，然后用@导入到其它样式中 。此方法建议不要用，因为效率不是特别高
前三种的优先级为： 行间 >内联 >外联
