<body>
<div id="top" class="auto">
<div class="nav">
<div class="left same">
<img src="data:images/mainnav_l.gif" />
</div>
<div class="mainnav">
<img class="logo" src="data:images/logo.gif" />
<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 class="right same">
<img src="data:images/mainnav_r.gif" />
</div>
</div>
</div>
</body>
body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,p {
margin:0px;
padding:0px;
font-size:13px;
}
ul {
list-style:none;
}
img,a img {
border:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
.auto{
width:960px;
margin: auto;
}
body{
background:url(body_bg.jpg) repeat-x;
}
#top .nav{
height:46px;
background:url(mainnav_bg.gif) repeat-x;
margin:15px ;
}
#top .nav .same{
width:10px;
height:46px;
}
#top .nav .left{
float:left;
}
#top .nav .right{
float:right;
}
#top .nav .mainnav{
width:940px;
float:left;
}
#top .nav .mainnav .logo{
width:163px;
height:46px;
float:left;
display:block;
}#top .mainnav ul {
width:770px;
float:left;
height:46px;
}
#top .mainnav ul li{
float:left;
}
#top .mainnav ul li a{
color:#;
font-size:14px;
display:block;
width:135px;
height:46px;
line-height:46px;
text-align:center;
background:url(main_line.gif) no-repeat;
}
#top .mainnav ul li a:hover{
background:url(green_bg.jpg);
text-decoration:none;
color:#fff;
}
CSS界面的解析
