<!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>
HTML唱吧导航栏
打印