作业分析
本次使用table标签和css样式编写如下的效果：
image.png
代码实现
使用html+css实现(编写工具 VSCode)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀英雄介绍</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.nav {
background-color: rgb(24, 26, 41);
height: 60px;
width: auto;
margin-top: 0px;
margin-left: 0px;
}
nav img {
height: 60px;
width: 60px;
float: left;
}
nav span {
font-size: 15px;
font-family: '微软雅黑';
color: aliceblue;
font-weight: bold;
margin-top: 8px;
float: left;
}
nav p {
font-size: 9px;
margin-top: 12px;
color: rgb(107, 103, 103)
}
.navs {
margin-left: 1300px;
margin-top: 0;
padding: 5px;
width: 50px;
height: auto;
display: inline-block;
}
body {
background-color: rgb(163, 194, 184);
}
.simg {
border-radius: 15px;
/*圆角边框，半径为15px*/
cursor: pointer;
/* 鼠标悬停时显示手型光标*/
}
</style>
</head>
<body>
<div class="nav">
<nav>
<img src="王者荣耀.png" alt="王者荣耀">
<span>王者荣耀</span>
<br>
<p>团队成就更多</p>
</nav>
<div class="navs">
<form action="">
</form>
</div>
</div>
<table width="1540" height="1680" border="1" cellspacing="0" cellpadding="0">
<tr>
<th width="95" height="25">英雄类型</th>
<th width="94">英雄名称</th>
<th width="250">英雄图片</th>
<th width="385">英雄被动</th>
<th width="452">英雄大招</th>
</tr>
<tr>
<td rowspan="3" align="center">打野</td>
<td height="255" align="center">李白</td>
<td><img src="李白皮肤.jpg" alt="李白" width="462" height="241" class="simg"></td>
<td>
<p><img src="李白被动技能.png" width="71" height="77"></p>
<div>侠客行（被动）</div>
<div>被动：</div>
<div>李白使用普攻攻击敌人时，会积累1道剑气，持续3秒。
积累4道剑气后会进入【侠客行】状态，增加30点物理攻击并解除
【青莲剑歌】的封印，持续5秒。</span></div>
<div>攻击建筑不会积累剑气。</div>
<p> </p>
</td>
<td>
<div>
<img src="李白三技能.png" width="71" height="77">
<div>
<div>青莲剑歌（三技能）</div>
<div>冷却值：12</div>
<div>法力消耗：120</div>
<div>李白化身为剑气飞速穿梭斩击5次，
每次斩击造成220/270/320(+50%额外物理攻击)物理伤害。
当同时攻击多个敌方英雄时，每增加一位敌方英雄将衰减15%的伤害，
最低衰减至初始伤害的70%。</div>
</div>
</div>
</td>
</tr>
<tr>
<td height="282" align="center">孙悟空</td>
<td><img class="simg" src="孙悟空.png" alt="孙悟空" width="462" height="270"></td>
<td>
<img src="孙悟空被动.png" width="71" height="77">
<div>
<div>大圣神威（被动）</div>
<div>被动：孙悟空释放技能后下次普攻变为强力敲击，冲锋至目标身旁并造成475(+100%物理攻击)物理伤害，该伤害可全额享受暴击收益。</div>
<div>孙悟空天生拥有20%暴击率，但初始只能造成150%暴击效果。</div>
<div>孙悟空需要利用技能接普攻打出更高的伤害，被动的暴击加上暴击装备的加成能迅速击杀对方脆皮英雄</div>
</div>
</td>
<td>
<p><img src="孙悟空大招.png" width="71" height="77"> </p>
<div>如意金箍（三技能）</div>
<div>冷却值：40/35/30</div>
<div>消耗：100</div>
<div>孙悟空将金箍棒直插入地，对范围内敌人造成250/375/500(+80%物理攻击)物理伤害并将其击飞1秒。</div>
<div>这是孙悟空主要的控制技能，能形成很好的AOE控制效果，并且对印记标记的敌人有更高的伤害</div>
<p> </p>
</td>
</tr>
<tr>
<td height="304" align="center">阿珂</td>
<td><img src="阿珂.png" width="462" height="282" class="simg"></td>
<td>
<img src="阿珂被动.png" width="71" height="77">
<div>死吻（被动）</div>
<div>阿轲在敌人身后发起的攻击，必定暴击，在敌人正面发起的所有攻击，必定不暴击；
阿轲的初始暴击伤害为125%，每1%暴击几率将额外的增加0.5%暴击伤害；
阿轲对非英雄目标最多造成2000伤害，正面攻击非英雄单位时，伤害提升20%
</div>
<div>玩法：被动技能导致阿轲在敌人正面和背后的输出完全不在一个档次上，在敌人背后进行输出能造成巨大的伤害。</div>
</td>
<td><img src="阿珂大招.png" width="71" height="77" alt="">
<div>幻舞（三技能）</div>
<div>冷却值：20/18/16</div>
<div>阿轲短暂准备后进入隐身状态，处于隐身状态时，每0.5秒回复110/160/210（+25%额外物理加成）
点生命值并增加40%移动速度，持续3秒；当阿轲发起攻击时会解除隐身状态，
并在3秒内增加自身120/140/160点攻击力，同时每当对敌人造成伤害时会增加30%移动速度，
持续1秒。被动：击败英雄或者助攻时刷新所有技能冷却时间。</div>
</td>
</tr>
<tr>
<td rowspan="3" align="center">射手</td>
<td height="282" align="center">马可波罗</td>
<td><img src="马可波罗.png" width="462" height="274" class="simg"></td>
<td><img src="马可波罗被动.png" alt="" width="71" height="77">
<div>
<div>连锁反应（被动）</div>
<div>冷却值：0 消耗：0</div>
<div>马可波罗的每次普攻与技能伤害会给目标附加1层防御破坏效果(对小兵为5层)，
达到10层后回复30点能量，同时目标触发防御破坏效果。
防御破坏期间目标每次受到马可波罗的伤害都会额外受到40( +35%物理攻击)真实伤害(该伤害可以暴击)，
持续5秒。马可波罗的技能伤害仅享受50%的法球加成。</div>
</div>
</td>
<td><img src="马可波罗大招.png" width="71" height="77" alt="">
<div>
<div>狂热弹幕（三技能）</div>
<div>冷却值：50/45/40 消耗：75</div>
<div>马可波罗闪烁出现在指定位置并向周围持续发射弹幕，造成120/180/240(+35%物理攻击)物理伤害。
技能持续期间马可波罗会释放12次弹幕，攻速每提升30%，弹幕次数增加1次，最多增加6次。
弹幕会触发普攻的法球效果，但仅享受50%的法球加成。</div>
</div>
</td>
</tr>
<tr>
<td height="282" align="center">狄仁杰</td>
<td><img src="狄仁杰.png" width="462" height="271" class="simg"></td>
<td><img src="狄仁杰被动.png" width="71" height="77" alt="">
<div>
<div>迅捷（被动）</div>
<div>冷却值：0 消耗：0</div>
<div>被动：狄仁杰的普通攻击能够获得1层迅捷效果，
每层迅捷效果会增加6％攻击速度和5％移动速度，最多叠加5层。
狄仁杰的第三次普攻将会随机使用一张蓝牌或红牌进行攻击。</div>
<div>玩法：这个技能能让狄仁杰的持续输出能力和生存能力得到显著提升。</div>
</div>
</td>
<td><img src="狄仁杰大招.png" width="71" height="77" alt="">
<div>
<div>王朝密令（三技能）</div>
<div>冷却值：24/20/16 消耗：100</div>
<div>狄仁杰掷出一道金色密令， 密令附带普攻法球效果，
对命中的第个敌方 英雄造成300/375/450(+60%法术攻击)
(+120%额外物理攻击)物理伤害和300/375/450(+60%法术攻击)
(+ 120%额外物理攻击)法术伤害，并将其晕眩1秒，同时会减少目标50%物理和法术防御，
命中后会获得目标视野，持续5秒。期间友军向该目标移动时会增加10%移速。</div>
</div>
</td>
</tr>
<tr>
<td height="210" align="center">虞姬</td>
<td><img src="虞姬.png" width="462" height="233" class="simg"></td>
<td>
<img src="虞姬被动.png" width="71" height="77" alt="">
<div>
<div style="float:left; margin-top:0px;">树神佑护（被动）</div>
<div>冷却值：0 消耗：0</div>
<div>被动：虞姬在普攻时有25%的几率追加一次普攻，
追加普攻造成100(+20%物理攻击)物理伤害，
同时将减少目标15%移速，持续2秒，该效果最高叠加3层。</div>
<div>
当攻速达到一定阈值时，虞姬【楚歌起】和【阵前舞】得到强化。
</div>
</div>
</td>
<td>
<div>
<img src="虞姬大招.png" height="77" width="71" alt="">
<div>阵前舞（三技能）</div>
<div>冷却值：25/22.5/20 消耗：100</div>
<div>虞姬冲向目标将其晕眩0.5秒并减少90%移速，持续2秒，然后向后跳跃，
并对目标射出2支弩矢，每支弩矢造成340/510/680(+100%额外物理攻击)物理伤害，
后跳结束后虞姬获得20/30/40%攻速加成，持续4秒。
当攻速达到一定阈值时，虞姬【阵前舞】得到强化。</div>
</div>
</td>
</tr>
</table>
</body>
</html>
个人总结
通过本次的前端网页开发，让我更加熟悉网页中的基础代码，也为以后打下了良好的基础。
