<!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://blog.csdn.net/weixin_60886150/article/details/128186920
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_23804.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!