学习css !!!
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS优化表格</title>
<style type="text/css">
table,th,td{
border: 1px double black;
}
table{
border-collapse: collapse;
text-align: center;
margin:50px auto;
width: 50%;
box-shadow: 6px 6px 8px skyblue;
background-image: url(images/7.jpg);
background-repeat: no-repeat;
background-size:cover;
}
table caption{
font-size: 1.5em;
font-weight:bolder;
margin-bottom: 30px;
}
.happy{
color: green;
font-weight: bolder;
}
table img{
border-radius: 50%;
/*box-shadow: 0 0 10px red;*/
box-shadow: 3px 3px 10px red;
}
th,td{
padding: 15px;
}
th{
background-color: rgba(155,155,0,0.5);
}
</style>
</head>
<body>
<table>
<caption>§ 英雄联盟 §</caption>
<tr>
<th colspan="2">英雄</th>
<th colspan="4">介绍</th>
</tr>
<tr>
<th>人物</th>
<th>外号</th>
<th>类型</th>
<th>头像</th>
<th>口头禅</th>
<th>被动</th>
</tr>
<tr>
<td>复仇焰魂</td>
<td>火男</td>
<td>法师</td>
<td><img src="images/16.jpg" width="40"></td>
<td>欢迎体验地狱之火</td>
<td class="happy">炽热之印</td>
</tr>
<tr>
<td>德玛西亚皇子</td>
<td>嘉文四世</td>
<td>坦克</td>
<td ><img src="images/12.jpg" width="40"></td>
<td>我喜欢挑战</td>
<td class="happy">战争律动</td>
</tr>
<tr>
<td>刀锋之影</td>
<td>男刀</td>
<td>刺客</td>
<td><img src="images/13.jpg" width="40"></td>
<td>我从不妥协</td>
<td class="happy">刀锋之末</td>
</tr>
<tr>
<td>圣锤之毅</td>
<td >波比</td>
<td>战士</td>
<td><img src=" images/14.jpg" width="40"></td>
<td>路遥知马力</td>
<td class="happy">钢铁大使</td>
</tr>
<tr>
<td>艾希</td>
<td>寒冰射手</td>
<td>射手</td>
<td><img src="images/15.jpg" width="40"></td>
<td>一个部族</td>
<td class="happy">冰霜射击</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
