1.本次要使用table表格标签编写如下的效果:
2.代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>League Of Legend</Legend></title>
</head>
<body>
<table border="1" cellspacing="0" >
<tr>
<td rowspan="13">我的三板斧</td>
<td colspan="3">图片</td>
<td>英雄名称</td>
<td>技能</td>
<td>背景</td>
</tr>
<tr>
<td colspan="3"><img src="D:\QQ and WeChat\xindela.jpg" width="300px" height="auto"></td>
<td ><b>暗黑元首 辛德拉</b></td>
<td>被动:卓尔不凡 <br>
Q:暗黑法球 <br>
W:驱使念力 <br>
E:弱者退散 <br>
R:能量倾泻 <br> </td>
<td>来自于艾欧尼亚的一名魔法师,控制着令人胆寒的能量,因为背叛发誓要消灭一切控制她的人</td>
</tr>
<tr>
<td colspan="3" align="center"><img src="D:\QQ and WeChat\zoy.jpg" width="150px" height="auto" ></td>
<td ><b>暮光星灵 佐伊</b></td>
<td>被动:烟火四射! <br>
Q:飞行乱入 <br>
W:窃法手套 <br>
E:催眠气泡 <br>
R:折返跃迁 <br>
<td>来自于巨神峰的宇宙信使,是调皮捣蛋、异想天开、变化莫测的显示化身</td>
</td>
</tr>
<td colspan="3"><img src="D:\QQ and WeChat\acali.jpg" width="300px" height="auto"></td>
<td ><b>离群之刺 阿卡丽</b></td>
<td>被动:我流忍法!潜龙印<br>
Q:我流奥义!寒影<br>
w:我流奥义!霞阵<br>
E:我流奥义!隼舞<br>
R:我流秘奥义!表里杀缭乱</td>
<td>出身于均衡教派,独来独往,牢记从“慎”那里学来的一切,效忠并保护着艾欧尼亚</td>
</table>
</body>
</html>
3.个人总结:
此次框架设计是学习前端网页开发课程的第一次作业,在构思代码的时候属实让我无所适从,好在经过自己的思考完成作业。虽然只是一个简简单单的框架设计,但我相信无数个这样小的技能学习,终会帮助我完成质的飞跃,我会坚持学习云计算课程。