实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子实战练习</title>
<style>
table{
margin: auto;
width: 60%;
border: solid 1px;
background-image: url(../3.22/imager/bg.jpg);
background-size: cover;
box-shadow: 5px 5px 5px #999;
}
th,td{
text-align: center;
border:solid 1px;
padding:5px;
}
h2{
text-align: center;
}
.imag img{
border-radius: 80%;
box-shadow: 3px 3px 3px 2px #888;
}
tr th{
background-color: Chartreuse;
height: 40px;
}
td>span{
color: red;
}
span[class="jiang"]{
color: forestgreen;
}
</style>
</head>
<body>
<table cellspacing="0">
<h2 >2018年中国富豪榜前五名单</h2>
<tr>
<th>排名</th>
<th>姓名</th>
<th>头像</th>
<th>财富（亿元人民币）</th>
<th>全球排行</th>
<th>主要财产来源</th>
<th>国籍</th>
</tr>
<tr>
<td>1 <span>↑</span></td>
<td>马化腾</td>
<td class="imag"><img src="../3.22/imager/mahuateng.jpg" alt="马化腾" width="70"></td>
<td>2950</td>
<td>15</td>
<td>腾讯</td>
<td rowspan="5">中国大陆</td>
</tr>
<tr>
<td>2 <span>↑</span></td>
<td>许家印</td>
<td class="imag"><img src="../3.22/imager/jiayin.jpg" alt="许家印" width="70"></td>
<td>2600</td>
<td>20</td>
<td>恒大</td>
</tr>
<tr>
<td>3 <span class="jiang">↓</span></td>
<td>马云</td>
<td class="imag"><img src="../3.22/imager/mayun.jpg" alt="马云" width="80"></td>
<td>2000</td>
<td>26</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>4</td>
<td>李嘉诚</td>
<td class="imag"><img src="../3.22/imager/jiacheng.jpg" alt="" width="70"></td>
<td>1900</td>
<td>32</td>
<td>长江实业</td>
</tr>
<tr>
<td>5 <span class="jiang">↓</span></td>
<td>王健林</td>
<td class="imag"><img src="../3.22/imager/jianlin.jpg" alt="" width="80"></td>
<td>1700</td>
<td>36</td>
<td>万达</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
