实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NBA联盟球星</title>
<style type="text/css">
table,tr,td,th{
border:1px solid black;
border-collapse: collapse;
}
table{
width: 60%;
background-image: url(images/bj.jpg);
/*opacity:0.8;*/
background-size:cover;
background
background-repeat: no-repeat;
color: #DAD5CC;
text-align: center;
margin: auto;
box-shadow: 8px 8px 2px 2px #271B25;
}
/*table th{
background-color: #271B25;
}*/
table caption{
font-size: 1.6em;
font-weight: bolder;
color: #271B25;
margin-bottom: 20px;
}
th,td{
padding: 10px;
}
/*.hei{
background-color: rgba(39,27,37,0.3);
}*/
td img{
border-radius: 50%;
box-shadow:0 0 8px 3px red inset;
width: 50%;
}
</style>
</head>
<body>
<form action="" method="get">
<table>
<caption>§ NBA联盟球星 §</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>联盟别名</th>
<th>头像</th>
<th>擅长打法</th>
<th>所属球队</th>
<th colspan="2">是否有冠军戒指</th>
</tr>
<tr>
<td>01</td>
<td>勒布朗詹姆斯</td>
<td>詹皇</td>
<td class="hei"><img src="images/zms.jpg"></td>
<td>全能</td>
<td>骑士队</td>
<td>
<input type="radio" name="name1" value="you">有</input>
<input type="radio" name="name1" value="wu">无</input>
</td>
</tr>
<tr>
<td>02</td>
<td>德怀恩韦德</td>
<td>闪电侠</td>
<td class="hei"><img src="images/wd.jpg"></td>
<td>三步上篮</td>
<td>热火队</td>
<td><input type="radio" name="name2" value="you">有</input>
<input type="radio" name="name2" value="wu">无</input></td>
</tr>
<tr>
<td>03</td>
<td>科比布莱恩特</td>
<td>黑曼巴</td>
<td class="hei"><img src="images/kb.jpg"></td>
<td>全能</td>
<td>湖人队</td>
<td><input type="radio" name="name3" value="you">有</input>
<input type="radio" name="name3" value="wu">无</input></td>
</tr>
<tr>
<td>04</td>
<td>凯文杜兰特</td>
<td>阿杜</td>
<td class="hei"><img src="images/dlt.jpg"></td>
<td>投篮精准</td>
<td>勇士队</td>
<td><input type="radio" name="name4" value="you">有</input>
<input type="radio" name="name4" value="wu">无</input></td>
</tr>
<tr>
<td colspan="6"></td>
<td><input type="submit" name="tijiao" value="答辩"></input></td>
</tr>
</table>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
