收藏
批改状态：合格
老师批语：
通过css对表格控制实现表格精美布局：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css表格设置</title>
<style type="text/css">
table,th,td{
border:1px solid #333
}
table{
border-collapse:collapse;
text-align:center;
width: 60%;
margin:50px auto;
box-shadow: 3px 3px 3px #888;
background-image: url(./images/gs/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
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 #888;
}
th {
background-color: rgba(155,155,0,0.3);
color: brown;
}
.green{
color: darkgreen;
font-weight: bolder;
font-size: 1.2em;
}
</style>
</head>
<body>
<table>
<caption>§ 金庸笔下高手排行榜 §</caption>
<tr>
<th>排名</th>
<th>姓名</th>
<th>江湖人称</th>
<th>头像</th>
<th>特长</th>
<th>门派</th>
<th>事迹</th>
</tr>
<tr>
<td>1</td>
<td>王重阳</td>
<td>童兰子</td>
<td><img src="./images/gs/1.jpg" width="50"></td>
<td>一阳指</td>
<td>全真教</td>
<td class="green">打死过一只鸡</td>
</tr>
<tr>
<td>2</td>
<td>张无忌</td>
<td>魔教教主</td>
<td><img src="./images/gs/2.jpg" width="50"></td>
<td>九阳神功</td>
<td>明教</td>
<td class="green">同时交了5个女朋友</td>
</tr>
<tr>
<td>3</td>
<td>周伯通</td>
<td>老顽童</td>
<td><img src="./images/gs/3.jpg" width="50"></td>
<td>左右互搏</td>
<td>全真教</td>
<td class="green">给皇帝带过绿帽子</td>
</tr>
<tr>
<td>4</td>
<td>陈近南</td>
<td>南霸天</td>
<td><img src="./images/gs/4.jpg" width="50"></td>
<td>吃西瓜</td>
<td>天地会</td>
<td class="green">吃葡萄不吐葡萄皮</td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
添加背景色可以用background-color:rgba来实现。
给模块添加阴影效果box-shadow
在css中添加图片background-image: url();以及background-repeat:对图片的控制
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
