实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>云音乐飙升榜</title>
<style type="text/css">
table,th,td{
border: 1px solid blue;
border-collapse: collapse;
}
table{
width: 60%;
box-shadow: 10px 10px 5px #888888;
border-collapse: separate;
border-radius: 10px;
background-image: url(http://bpic.588ku.com/element_origin_min_pic/17/04/25/f348494985376ebcb878aa4c3151757b.jpg);
background-size: cover;
}
h3{
font-size: 35px;
font-family: Cursive;
text-shadow: 5px 10px 5px #BB9963;
}
tr th{
font-family: Cursive;
font-size: 20px;
text-shadow: 5px 5px 5px #D00219;
}
tr td{
font-family: Cursive;
text-align: center;
vertical-align: middle;
}
.item1{
font-family: Cursive;
color: red;
}
#item4{
color: #d00145;
}
tr td img{
width: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<caption><h3>云音乐飙升榜</h3></caption>
</tr>
<tr>
<th>音乐标题</th>
<th>飙升率</th>
<th>歌手</th>
<th>专辑</th>
</tr>
<tr>
<td class="item1">拥抱</td>
<td>538%</td>
<td>徐秉龙</td>
<td id="item4"><img src="../images/1.jpg" alt="拥抱">拥抱</td>
</tr>
<tr>
<td class="item1">In My Blood</td>
<td>412%</td>
<td>Shawn Mendes</td>
<td id="item4"><img src="../images/2.jpg" alt="In My Blood">In My Blood</td>
</tr>
<tr>
<td class="item1">Sober</td>
<td>163%</td>
<td>未知</td>
<td id="item4"><img src="../images/3.jpg" alt="未知">未知</td>
</tr>
<tr>
<td class="item1">被拥抱的荒岛</td>
<td>130%</td>
<td>曹方</td>
<td id="item4"><img src="../images/4.jpg" alt="被拥抱的荒岛">被拥抱的荒岛</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
