利用Html.css OPPO手机导航菜单的制作解析

<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界面的解析