作业效果图如下：
作业代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="keywords" content="av">
<title>宅男IT</title>
<style>
table,th,td {
border:3px solid #111;
}
table {
border-collapse: collapse;
text-align: center;
width: 60%;
margin: 50px auto;
box-shadow: 5px 5px 5px #666;
background-image: url(../images/bg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
table caption {
font-size: 2em;
font-weight: bolder;
color: pink;
margin-bottom:40px;
}
h3 {
background-color: black;
width: 350px;
}
th,td {
color: red;
padding: 12px;
font-size: 1.6em;
font-weight: bolder;
}
td img {
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 3px 3px 3px #666;
}
th {
background-color: rgba(166,166,0,0.3);
color: fuchsia;
}
.name {
color: blue;
font-size: 1.7em;
}
.xing {
color: gold;
font-size: 1.5em;
}
.move {
color: yellow;
}
</style>
</head>
<body>
<table>
<caption><h3>& AV女优排行榜 &</h3></caption>
<tr>
<th>排名</th>
<th>艺名</th>
<th>称号</th>
<th>玉照</th>
<th>三围(cm)</th>
<th>绝技</th>
<th>代表作品</th>
</tr>
<tr>
<td>1</td>
<td class="name">波多野结衣</td>
<td>暗黑志玲</td>
<td><img src="../images/av1.jpg"></td>
<td>88/59/85</td>
<td class="xing">性教育</td>
<td class="move">家庭老师</td>
</tr>
<tr>
<td>2</td>
<td class="name">京香Julia</td>
<td>轻熟女</td>
<td><img src="../images/av2.jpg"></td>
<td>101/55/84</td>
<td class="xing">性虐</td>
<td class="move">搜查官</td>
</tr>
<tr>
<td>3</td>
<td class="name">麻生希</td>
<td>童颜巨乳</td>
<td><img src="../images/av3.jpg"></td>
<td>88/58/89</td>
<td class="xing">颜射</td>
<td class="move">超绝美女神</td>
</tr>
<tr>
<td>4</td>
<td class="name">苍井空</td>
<td>苍老师</td>
<td><img src="../images/av4.jpg"></td>
<td>90/58/83</td>
<td class="xing">中出</td>
<td class="move">巨乳娘大战僵尸</td>
</tr>
<tr>
<td>5</td>
<td class="name">吉泽明步</td>
<td>日系邓丽欣</td>
<td><img src="../images/av5.jpg"></td>
<td>86/58/86</td>
<td class="xing">脱衣舞</td>
<td class="move">痴恶女</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业手抄如下：
