HTML唱吧导航栏

本文介绍: 网页设计与制作《唱吧导航栏》

<!DOCTYPE html&g t;
<html&g t;
   <head&g t;
       <meta char set=”utf-8″&g t;
       <title>唱吧导航栏</title>
       <link href=”../css/5-17.css” type=”text/css” rel=”styles h e et”/>
       <style>
           body,h1,h2,h3,ul,li,img,p{padding: 0;margin: 0;list–style: none;border: 0;}
           body{font–size: 14px;font–fa m ily: “宋体“;color: #fff;}
           .all{
               width: 952px;
               height: 175px;
               m ar gin: 50px auto;
               padding: 0 14px;
               background: #f6f3e9;
               border: 1p x so li d #cc c;
           }
           .text{
               height: 50p x;
               line–height: 50px;
               color: #a84848;
           }
           .text h2
           {
               width: 175px;
               padding–left: 32px;
               font–size: 16px;
               background: url(../img/iconh.png) no–re pe at left center;
               float: left;
           }
           .text a
           {
               display: inline–block;
           width: 60px;
           padding–left: 25px;
           float: right;
           font-we ight: b o ld;
           font–size: 14px;
               }
           .text a:link,.text a:vi site d
           {
               color: #a84848;
               text–de c ora ti on: non e;
               background: url(../img/play1.png) no–re pe at left center;
           }
           .text a:hover{color: #000000;
           b ackground: url(../img/play2.png) no–re peat le ft center;
                           }
           .c on li
           {width: 148px;
           height: 105px;
           float: left;
           padding: 20px 0 0 90px;
           }
           .radio
           {b ackground: #52a6b6 url(img/icon1.png) no–re peat 15px 15px;}
           .r ad io:hover
           {b ackground: #313131 url(img/icon5.png) no–re peat 15px 15px;}
           .s ong
           {b ackground: #52a6b6 url(img/icon2.png) no-re peat 15px 15px;}
           .s ong:hover
           {b ackground: #313131 url(i mg/icon6.png) no-re peat 15px 15px;}
           .albu m
           {b ackground: #52a6b6 url(i mg/icon3.png) no-repeat 15px 15px;}
           .albu m:hover
           {bac kg round: #313131 url(img/icon7.png) no-repeat 15px 15px;}
           .mv
           {bac kg round: #52a6b6 url(img/icon4.png) no-repeat 15px 15px;}
           .mv:hover
           {bac kg round: #313131 url(img/icon8.png) no-repeat 15px 15px;}
           .rad io h2,s ong h2,.album h2,.mv h2{font–size: 44px;}
           .rad io p,.s ong p,.album p,.mv p{line-height: 22px;}
           .radio a:link,.radio a:vi sited,.song a:link,.song a:visited,.album a:link,.album a:visited,.mv a:link,.mv a:visited{
               color: #fff;
               text-dec ora tion: none;
           }
       </style>
   </head>
   <body>
       <div class=”all”>
           <div class=”text”>
               <h2>MUSIC–精选歌单</h2>
               <a href=”#”>连播本页</a>
           </div>

       <ul class=”con”>
           <li class=”song”>
               <h2>Song</h2>
               <p>音乐达人</p>
               <p><a href=”#”>随便听听</a></p>
           </li>
           <li class=”radio”>
               <h2>Radio</h2>
               <p>音乐达人</p>
               <p><a href=”#”>音乐专辑</a></p>
           <li class=”album”>
               <h2>Album</h2>
               <p>音乐达人</p>
               <p><a href=”#”>最新单曲</a></p>
           </li>
           <li class=”mv”>
               <h2>MV</h2>
               <p>音乐达人</p>
               <p><a href=”#”>劲爆MV</a></p>
               </li>
       </ul>
       </div>
   </body>
</html>