<!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>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。