HTML唱吧导航栏-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML唱吧导航栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>唱吧导航栏</title>
       <link href="../css/5-17.css" type="text/css" rel="stylesheet"/>
       <style>
           body,h1,h2,h3,ul,li,img,p{padding: 0;margin: 0;list-style: none;border: 0;}
           body{font-size: 14px;font-family: "宋体";color: #fff;}
           .all{
               width: 952px;
               height: 175px;
               margin: 50px auto;
               padding: 0 14px;
               background: #f6f3e9;
               border: 1px solid #ccc;
           }
           .text{
               height: 50px;
               line-height: 50px;
               color: #a84848;
           }
           .text h2
           {
               width: 175px;
               padding-left: 32px;
               font-size: 16px;
               background: url(../img/iconh.png) no-repeat left center;
               float: left;
           }
           .text a
           {
               display: inline-block;
           width: 60px;
           padding-left: 25px;
           float: right;
           font-weight: bold;
           font-size: 14px;
               }
           .text a:link,.text a:visited
           {
               color: #a84848;
               text-decoration: none;
               background: url(../img/play1.png) no-repeat left center;
           }
           .text a:hover{color: #000000;
           background: url(../img/play2.png) no-repeat left center;
                           }
           .con li
           {width: 148px;
           height: 105px;
           float: left;
           padding: 20px 0 0 90px;
           }
           .radio
           {background: #52a6b6 url(img/icon1.png) no-repeat 15px 15px;}
           .radio:hover
           {background: #313131 url(img/icon5.png) no-repeat 15px 15px;}
           .song
           {background: #52a6b6 url(img/icon2.png) no-repeat 15px 15px;}
           .song:hover
           {background: #313131 url(img/icon6.png) no-repeat 15px 15px;}
           .album
           {background: #52a6b6 url(img/icon3.png) no-repeat 15px 15px;}
           .album:hover
           {background: #313131 url(img/icon7.png) no-repeat 15px 15px;}
           .mv
           {background: #52a6b6 url(img/icon4.png) no-repeat 15px 15px;}
           .mv:hover
           {background: #313131 url(img/icon8.png) no-repeat 15px 15px;}
           .radio h2,song h2,.album h2,.mv h2{font-size: 44px;}
           .radio p,.song p,.album p,.mv p{line-height: 22px;}
           .radio a:link,.radio a:visited,.song a:link,.song a:visited,.album a:link,.album a:visited,.mv a:link,.mv a:visited{
               color: #fff;
               text-decoration: 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>文章来源地址https://www.toymoban.com/news/detail-443498.html