<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="utf-8" />
???<title>这是标题</title>
???<style type="text/css">
??????#title{
??????????
??????????width:1210px; height:50px;
??????????background-color:#e8e7e3;
??????????color:gray;
??????????font-weight:500;
??????????font-family:‘Microsoft YaHei‘,Arial, Helvetica, sans-serif;
??????????position:absolute;
??????????top:50%;
??????????left:50%;
??????????margin-left:-605px;
??????????margin-top:-250px;
?????????
??????}
??????.one{
??????????float:left;
??????????display:block;
??????????
??????????
??????????background-color:darkgrey;
??????????text-align:center;
?????????
??????????width:135px;
??????????height:50px;
??????}
??????.one:hover {
??????????background:black;
??????????color:white;
??????}
???</style>
</head>
<body>
???<div id="title">
???????<div class="one">HTML/CSS</div>
???????<div class="one">JavaScript</div>
???????<div class="one">Server Side</div>
???????<div class="one">ASP.NET</div>
???????<div class="one">XML</div>
???????<div class="one">Web Servies</div>
???????<div class="one">Web Building</div>
???</div>
</body>
</html>
CCS实例，网页栏目
原文地址：http://www.cnblogs.com/bingxing/p/7620452.html