从来没有认真了解过怎样用CSS制作网站。网上从来不缺少教程，什么类型的都有，视频教程、文字教程、实例教程……但做为一个新手，可以了解CSS中什么是盒子模型、有什么选择器、什么是浮动，什么是定位，但到底要将一张PSD图片分切后用xHTML+CSS编写出来呢？就没有看到好的教程了。

基础的内容了解得再多，没有实践，便无从下手。年前没什么事，自己折腾了一番，大概了解了一下CSS的强大，然后做了一个最常用的导航条。

很多内容都是熟能生巧了。不过看着IE6、7、8、FF什么的各有各的潜规则就头大，这不严重打压俺们的兴趣嘛，小强般的IE6，相信没有人能让他从国内消失，就算盖茨也一样，相信微软也哭笑不得吧。

CSS代码

body,div,img,ul,a,li,p,span{
margin:0;
padding:0;
}
#Top,#Nav{
width:950px; margin:0 auto;
}
/*body*/

#Top{
height:75px;
background:#EFEFEF;
}
#Top a{
display:block;
font-size:32px;
font-family:”微软雅黑”;
font-weight:bold;
color:#990000;
line-height:80px;
text-decoration:none;
margin-left:20px;
}
#Top a:hover{
color:#CC0000;
}
/*top*/

#Nav{height:40px;}
#Nav ul{
height:40px;
list-style:none;
background:#990000;
}
#Nav ul li{
height:40px;
float:left;
}
#Nav ul li a{
display:block;
height:40px;
padding:0 15px;
color:#FFFFFF;
float:left;
line-height:40px;
text-decoration:none;
font-family:”微软雅黑”;
font-size:16px;
}
#Nav ul li a:hover{
background:#CC0000;
}
/*nav*/

HTML代码

<body>
<div id=”Top”>
<a href=”http://www.yuansheng.org” id=”Logo”>我的博客</a>
</div>
<div id=”Nav”>
<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>
</ul>
</div>
<div>
</body>