##今日练习
##代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2241292_xoiedbe1mhn.css">
<style>
* {
margin: 0;
padding: 0;
}
.clearfix {
content: "";
clear: both;
display: block;
}
img {
margin-right: 10px;
width: 80px;
height: 80px;
}
a {
color: black;
text-decoration: none;
}
.box {
margin: 40px auto;
width: 688px;
height: 425px;
border: 1px solid #999;
}
td {
border-right: 1px solid #999;
}
.brn {
border-right: none;
}
.one-row {
height: 105px;
padding-top: 20px;
padding-left: 20px;
}
table {
border-collapse: collapse;
}
.float-left {
float: left;
}
.box-shadow{
margin-right: 15px;
width: 80px;
height: 80px;
box-shadow: 0px 0px 2px black;
}
.font {
width: 112px;
margin-top: 10px;
margin-bottom: 10px;
font-weight: 900;
}
.font:hover {
text-decoration: underline;
}
.tu-biao {
display: inline-block;
width: 25px;
height: 25px;
background: url(./img/index.png);
background-position: -266px -203px;
}
.pl25 .tu-biao{
transform: scale(0.7);
}
.tu-biao2-0 {
background-position: -296px -203px;
}
.tu-biao1-1 {
background-position: -266px -233px;
}
.tu-biao2-1 {
background-position: -296px -233px;
}
.tu-biao1-1{
opacity: 0;
}
.tu-biao2-1 {
opacity: 0;
}
.tu-biao:hover .tu-biao1-1 {
opacity: 1;
}
.tu-biao:hover .tu-biao2-1 {
opacity: 1;
}
table tr {
height: 30px;
}
.pl25 {
padding-left: 25px;
}
.pl25:hover .underline{
text-decoration: underline;
}
.fr{
float: right;
width: 80px;
height: 20px;
opacity: 0;
}
.pl25:hover .fr{
opacity: 1;
}
.icon{
display: inline-block;
width: 25px;
height: 25px;
background: url(./img/index.png);
background-position: -266px -205px;
}
.icon1-0{
transform: scale(0.75);
}
.icon1-1{
background-position: -266px -235px;
opacity: 0;
}
.icon2{
display:block;
width: 18px;
height: 25px;
background: url(./img/index01.png) no-repeat;
}
.icon2-0{
position: relative;
margin-top: -30px;
margin-left: 27px;
background-position: 1px -695px;
}
.icon2-1{
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background-position: -21px -695px;
opacity: 0;
}
.icon3-0{
float: right;
margin-top: -25px;
margin-right: 11px;
transform: scale(0.75);
background-position: -299px -205px;
}
.icon3-1{
background-position: -299px -235px;
opacity: 0;
}
.icon:hover .icon1-1 {
opacity: 1;
}
.icon2:hover .icon2-1 {
opacity: 1;
}
.icon:hover .icon3-1 {
opacity: 1;
}
tr:nth-child(2n+1){
background-color:#e8e8e8;
}
tr:nth-child(2n){
background-color:#f4f4f4;
}
.end-font{
float: right;
margin-right: 20px;
}
tr{
font-size: 12px;
}
tr:nth-child(2){
color: red;
}
tr:nth-child(3){
color: red;
}
tr:nth-child(4){
color: red;
}
</style>
</head>
<body>
<div class="box">
<table>
<tbody>
<tr height="115px">
<td width="229px">
<div class="one-row clearfix">
<div class="float-left box-shadow"><a href=""><img src="./img/pic1.jpg" alt=""></a></div>
<a href="">
<div class="float-left font">云音乐飙升榜</div>
</a>
<a href="">
<div class="tu-biao">
<div><span class="tu-biao tu-biao1-1"></span></div>
</div>
</a>
<a href="">
<div class="tu-biao tu-biao2-0">
<div><span class="tu-biao tu-biao2-1"></span></div>
</div>
</a>
</div>
</td>
<td width="229px">
<div class="one-row clearfix">
<div class="float-left box-shadow"><a href=""><img src="./img/pic2.jpg" alt=""></a></div>
<a href="">
<div class="float-left font">云音乐新歌榜</div>
</a>
<a href="">
<div class="tu-biao">
<div><span class="tu-biao tu-biao1-1"></span></div>
</div>
</a>
<a href="">
<div class="tu-biao tu-biao2-0">
<div><span class="tu-biao tu-biao2-1"></span></div>
</div>
</a>
</div>
</td>
<td width="229px" class="brn">
<div class="one-row clearfix">
<div class="float-left box-shadow"><a href=""><img src="./img/pic3.jpg" alt=""></a></div>
<a href="">
<div class="float-left font">网易原创歌曲榜</div>
</a>
<a href="">
<div class="tu-biao">
<div><span class="tu-biao tu-biao1-1"></span></div>
</div>
</a>
<a href="">
<div class="tu-biao tu-biao2-0">
<div><span class="tu-biao tu-biao2-1"></span></div>
</div>
</a>
</div>
</td>
</tr>
<tr>
<td class="pl25">
<span>1 </span>
<a href="" class="underline">不容</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25">
<span>1 </span>
<a href="" class="underline">耗尽</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25 brn">
<span>1 </span>
<a href="" class="underline">海上吟</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
</tr>
<tr>
<td class="pl25">
<span>2 </span>
<a href="" class="underline">不容</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25">
<span>2 </span>
<a href="" class="underline">耗尽</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25 brn">
<span>2 </span>
<a href="" class="underline">海上吟</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
</tr>
<tr>
<td class="pl25">
<span>3 </span>
<a href="" class="underline">不容</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25">
<span>3 </span>
<a href="" class="underline">耗尽</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25 brn">
<span>3 </span>
<a href="" class="underline">海上吟</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
</tr>
<tr>
<td class="pl25">
<span class="red">4 </span>
<a href="" class="underline">不容</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25">
<span>4 </span>
<a href="" class="underline">耗尽</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25 brn">
<span>4 </span>
<a href="" class="underline">海上吟</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
</tr>
<tr>
<td class="pl25">
<span>5 </span>
<a href="" class="underline">不容</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25">
<span>5 </span>
<a href="" class="underline">耗尽</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25 brn">
<span>5 </span>
<a href="" class="underline">海上吟</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
</tr>
<tr>
<td class="pl25">
<span>6 </span>
<a href="" class="underline">不容</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25">
<span>6 </span>
<a href="" class="underline">耗尽</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25 brn">
<span>6 </span>
<a href="" class="underline">海上吟</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
</tr>
<tr>
<td class="pl25">
<span>7 </span>
<a href="" class="underline">不容</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25">
<span>7 </span>
<a href="" class="underline">耗尽</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25 brn">
<span>7 </span>
<a href="" class="underline">海上吟</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
</tr>
<tr>
<td class="pl25">
<span>8 </span>
<a href="" class="underline">不容</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25">
<span>8 </span>
<a href="" class="underline">耗尽</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25 brn">
<span>8 </span>
<a href="" class="underline">海上吟</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
</tr>
<tr>
<td class="pl25">
<span>9 </span>
<a href="" class="underline">不容</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25">
<span>9 </span>
<a href="" class="underline">耗尽</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
<td class="pl25 brn">
<span>9 </span>
<a href="" class="underline">海上吟</a>
<div class="fr">
<a href="">
<div class="icon icon1-0">
<span class="icon icon1-1"></span>
</div>
</a>
<a href="">
<div class="icon2 icon2-0">
<span class="icon2 icon2-1"></span>
</div>
</a>
<a href="">
<div class="icon icon3-0">
<span class="icon icon3-1"></span>
</div>
</a>
</div>
</td>
</tr>
<tr>
<td class="">
<a href="" class="underline end-font">查看全部</a>
</td>
<td class="">
<a href="" class="underline end-font">查看全部</a>
</td>
<td class="brn">
<a href="" class="underline end-font">查看全部</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
