效果图
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>琅琊榜之中国财富排行榜</title>
<style>
table,th,td {
border: 1px solid #555;
}
table {
border-collapse: collapse;
text-align: center;
width: 900px;
margin: 200px auto;
/*margin-top: 250px;*/
box-shadow: 5px 5px 10px #998;
}
table caption {
font-size: 1.6em;
font-weight: bolder;
margin-bottom: 30px;
}
th,td {
padding: 10px;
}
td img {
border-radius: 50%;
box-shadow: 2px 2px 2px #998;
}
th {
background-color: rgba(180,180,188,0.3);
color: brown;
}
body {
background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521746291519&di=7d02008bc04d070f4a902f17cefcb3f4&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F53912bb66a766.jpg);
background-size: 100%;
background-repeat: no-repeat;
margin: 0 auto;
}
span {
font-family: LiSu;
font-size: 50px;
}
</style>
</head>
<body>
<div>
<table>
<caption>§ <span>琅琊榜之中国财富排行榜</span> §</caption>
<tr>
<th colspan="2">名次</th>
<th colspan="3">基本信息</th>
<th colspan="2">企业信息</th>
</tr>
<tr>
<th>本国排名</th>
<th>世界排名</th>
<th>姓名</th>
<th>头像</th>
<th>籍贯</th>
<th>企业</th>
<th>最新财富值</th>
</tr>
<tr>
<td>1</td>
<td>14</td>
<td>马化腾</td>
<td><img src="http://img5.imgtn.bdimg.com/it/u=2725037089,3534270212&fm=27&gp=0.jpg" alt="" width="50"></td>
<td>广东省汕头市</td>
<td>腾讯公司</td>
<td>487亿美元</td>
</tr>
<tr>
<td>2</td>
<td>19</td>
<td>马云</td>
<td><img src="http://www.8658.cn/uploads/allimg/150316/1_03161TZ432B.jpg" alt="" width="50"></td>
<td>浙江省嵊州市</td>
<td>阿里巴巴集团</td>
<td>408亿美元</td>
</tr>
<tr>
<td>3</td>
<td>23</td>
<td>李嘉诚</td>
<td><img src="http://img1.cache.netease.com/catchpic/a_/AD/AD6F98E3474A319DE156F2066C1E62B7.jpg" alt="" width="50"></td>
<td>广东潮州潮安县</td>
<td>长江和记实业有限公司</td>
<td>344亿美元</td>
</tr>
<tr>
<td>4</td>
<td>24</td>
<td>许家印</td>
<td><img src="http://b.hiphotos.baidu.com/baike/pic/item/d043ad4bd11373f05b4756b0ad0f4bfbfbed04a0.jpg" alt="" width="50"></td>
<td>河南省周口市太康县</td>
<td>恒大集团</td>
<td>318亿美元</td>
</tr>
</table>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手工作业：
