web网页

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>wyy</title><!-- 引入重置样式 --><!-- 引入样式 --><link rel="stylesheet" href="./wyy.css">
</head>
<body><div class="list"><div class="top-box"><div class="top"><img class="img" src="./image/top.jpg" title="飙升榜"> <a href="#" title="飙升榜"></a></div><div class="tit"><a href="#" title="飙升榜"><h3 class="bsb">飙升榜</h3></a><div class="icon1"><a href="#" title="播放"></a></div><div class="icon2"><a href="#" title="收藏"></a></div></div></div><div class="song"><ol class="song-list"><li ><span class="no no-top" style="color:#c10d0c;">1</span><a class="nm" href="#">APT.</a></li><li><span class="no no-top"style="color:#c10d0c;">2</span><a class="nm" href="#">我愿</a></li><li><span class="no no-top" style="color:#c10d0c;">3</span><a class="nm" href="#">我只能离开</a></li><li><span class="no no-top">4</span><a class="nm" href="#">于是</a></li><li><span class="no no-top">5</span><a class="nm" href="#">孤独患者</a></li><li><span class="no no-top">6</span><a class="nm" href="#">绽放</a></li><li><span class="no no-top">7</span><a  class="nm" href="#">孤独患者</a></li><li><span class="no no-top">8</span><a class="nm" href="#">麦恩莉</a></li><li><span class="no no-top">9</span><a class="nm" href="#">不懂他</a></li><li><span class="no no-top">10</span><a class="nm" href="#">米奇GO</a></li><div class="more"><a class="more" href="#">查看全部>></a></div></ol></div></div>
</body>
</html>

CSS代码：

ol li{list-style: none;
}
.list{width: 230px;height: 472px;margin: 0 auto;margin-top: 10px;position: relative;background: url(./image/index_bill.png);}
.top-box{width: 230px;height: 100px;padding: 20px 0 0 19px;}
.top {float: left;    display: inline;height: 80px;width: 80px;}
.top .img{display: block;width: 100%;height: 100%;
}
.tit{float: left;width: 116px;height: 50px;float: left;margin: 6px 0px 0px 10px;position: absolute;top:0px;right: 3px;}
.bsb{text-decoration: none;color: #333;
}.tit a:link{text-decoration: none;color: #333;margin-top: 10px;
}.tit a :hover{text-decoration: underline;color: #333;}.icon1{float: left;width: 22px;height: 22px;display: block;float: left;background-image: url(./image/icon1.1.png);background-size: 22px;background-position: -308.5px -221px;margin-right: 3px;margin-top: -5.2px;
}
.icon1:hover{background-image: url(./image/icon1.2.png);cursor: pointer;
}
.icon2{width: 22px;height: 22px;display: inline-block;background-image: url(./image/icon2.1.png);background-size: 22px;background-position: -310px -283.4px;margin-left: 3px;margin-right: 12px;margin-top: -16px;
}
.icon2:hover{background-image: url(./image/icon2.2.png);cursor: pointer;background-size: 22px;background-position: -310px -292px;
}.song{width: 230px;height: 352px;display: block;margin-top: -16px;
}.song-list  li{height: 32px;margin-left: -20px;line-height: 32px;font-size: 12px;color: #333;font-family: Arial, Helvetica, sans-serif;
}
.no{float: left;position: relative;width: 35px;height: 32px;text-align: center;color: #666;font-size: 16px;
}.nm{float: left;width: 170px;height: 32px;color: #000;cursor: pointer;text-decoration: none;
}
li a:hover{text-decoration: underline;color: #000;
}
.more{width: 170px;height: 32px;text-align: right;
}
.more a{color: #000;cursor: pointer;text-decoration: none;font-size: 12px;line-height:32px ; 
}
.more a:hover{text-decoration: underline;color: #000;
}