作业分析
本次要使用table表格表签编写如下的效果
网页展示2.png
代码实现
使用html标签代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我喜欢的爽文男主</title>
<style>
#t1{
background-color: rgb(74,79,175);
}
#t2{
background-color: rgb(218,207,239);
}
#t3{
background-color: rgb(23,39,55);
}
#a1:hover{
color: red;
}
#a2;:hover{
color: red;
}
#a3:hover{
color: red;
}
</style>
</head>
<body>
<table border="1" width="750" cellpadding="10" cellspacing="0" align="center">
<thead>
<tr bgcolor="lightgrey">
<th>类型</th>
<th>图片</th>
<th>男主名称</th>
<th>内容介绍</th>
<th>技能</th>
</tr>
</thead>
<tr>
<td rowspan="12" bgcolor="lightgrey"><b>玄幻</b></td>
<td rowspan="4" align="center" bgcolor="indigoblue" id="t1"><a id="a1" href="https://baike.sogou.com/v702190.htm"><img src="./img/xy.png" width="160" height="199" ></a></td>
<td rowspan="4" width="60" align="center"><i>萧炎</i></td>
<td rowspan="4" width="300">《斗破苍穹》主角萧炎曾为天才，因变故沦为 “废柴” 且遭退婚。幸得药尘相助，他踏上逆袭之路，
在迦南学院等多地历练，收服异火提升实力，结识挚友红颜。
家族蒙难后，萧炎为复仇与守护，勇战各方邪恶势力，
一路披荆斩棘，最终荣登斗帝之位，守护斗气大陆。</td>
<td rowspan="4" width="100"><u>功法: 焚诀;斗技: 八极崩、吹火掌;地阶斗技: 焰分噬浪尺、三千雷动等</u> </td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td rowspan="4" align="center" bgcolor="grey" id="t2"><a id="a2" href="https://baike.sogou.com/v167795328.htm"><img src="./img/ts.png" width="160" height="199"></a></td>
<td rowspan="4" align="center"><i>唐三</i></td>
<td rowspan="4" width="300">《斗罗大陆》讲述了唐三穿越到斗罗大陆，在这个武魂世界中，他和同伴们在史莱克学院修炼。
唐三拥有双生武魂，凭借着自身的天赋、努力，还有伙伴们的支持，他们一起在魂师大赛中崭露头角，历经无数艰难险阻，
对抗强大的武魂殿，在斗罗大陆书写传奇。 </td>
<td rowspan="4" width="100"><u>蓝银皇魂技:蓝银真身、蓝银霸皇枪。昊天锤魂技:定力之破、杀戮结界等</u></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td rowspan="4" align="center" id="t3"><a id="a3" href="https://baike.sogou.com/v101668669.htm"><img src="./img/sh.jpeg" width="160" height="199"></a></td>
<td rowspan="4" align="center"><i>石昊</i></td>
<td rowspan="4" width="300">《完美世界》的故事围绕石昊展开，他生于下界荒域石国，虽天生至尊骨却遭族亲算计而被夺。
幸得柳神援手，他踏上逆袭之路。在下界，他战凶兽、平叛乱，成就人皇之威。
后入上界，在九天十地、异域、仙域等广袤天地间历经无数艰难，于绝境中突破，终成仙帝。</td>
<td rowspan="4" width="100"><u>至尊骨宝术: 轮回宝术、上苍之手。十凶宝术: 雷帝宝术、麒麟宝术等 </u></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
···
#个人总结
学会这个代码呢！要熟练掌握table表格标签和超链接标签！
下来一定要多多练习哦！