web开发第一次作业

本次作业需用表格标签制作一个关于游戏英雄技能的表格,并且点击英雄图片可以跳转到相应的官网。表格如下:


image.png

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellpading="10" cellspacing="0" width="1700">
<thead>
<tr bgcolor="grey">
<th >类型</th>
<th >图片</th>
<th >英雄名称</th>
<th >被动</th>
<th >技能</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" >射手</td>
<td><a href="https://pvp.qq.com/web201605/herodetail/174.shtml"><img src="./R-C (1).png" width="200px"></a>

</td>

<td>虞姬</td>
<td>普攻有25%几率追加一次普攻,造成物理伤害并减少目标移速,效果可叠加3层</td>
<td><ul>
<li>楚歌起</li>
<li>大风来</li>
<li>阵前舞</li>
</ul></td>
</tr>
<tr>

<td><a href="https://pvp.qq.com/web201605/herodetail/199.shtml"><img src="./16820821713979.webp" width="200px"></a>
</td>
<td>公孙离</td>
<td>普攻叠加印记,每四层印记触发一次爆炸,对周围敌人造成法术伤害并减少技能冷却时间。释放技能或收回纸伞后普攻额外投掷飞镖造成物理伤害1。</td>
<td><ul>
<li>飞燕回旋</li>
<li>霜叶舞</li>
<li>孤鹜断霞</li>
</ul>

</td>
</tr>

<tr>
<td rowspan="2">法师</td>
<td><a href="https://pvp.qq.com/web201605/herodetail/142.shtml"><img src="./17071255458437.webp" width="200px"></a>
</td>
<td>安琪拉</td>
<td>安琪拉的技能会灼烧敌人,每层灼烧效果会造成11(+2%法术加成)点法术伤害,灼烧效果最多叠加10层。</td>
<td>
<ul>
<li>火球术</li>
<li>混沌火种</li>
<li>炽热光辉</li>

</ul>

</td>
</tr>

<tr>
<td><a href="https://pvp.qq.com/coming/v2/skins/0508-dxj.shtml"><img src="./74f641e3b1aa37ffdb06e65a06c5d9262292286956104806250.jpg" width="200px">
</a>
</td>
<td>小乔</td>
<td>小乔释放技能命中敌人时,会增加25%移动速度,持续2秒</td>
<td><ul>
<li>绽放之舞</li>
<li>甜蜜恋风</li>
<li>星华缭乱</li>

</ul>

</td>
</tr>
<tr>
    <td rowspan="2">打野</td>
    <td><a href="https://pvp.qq.com/web201605/herodetail/131.shtml"><img src="./R-C.png" width="200px"></a>
    </td>
    <td>李白</td>
    <td>李白使用普通攻击攻击敌人时,会积累1道剑气,持续3秒;积累4道剑气后进入侠客行状态,增加30点物理攻击力并解除青莲剑歌的封印,持续5秒;攻击建筑不会积累剑气</td>
    <td>
        <ul>
            <li>将进酒</li>
            <li>神来之笔</li>
            <li>青莲剑歌</li>
            
        </ul>
    </td>
    </tr>
    
    <tr>
        <td><a href="https://pvp.qq.com/web201605/herodetail/150.shtml"><img src="./0bd162d9f2d3572c4513613f8113632763d0c364.webp" width="200px"></a></td>
        <td>韩信</td>
        <td>韩信的第四次普通攻击会将敌人击飞0.5秒;韩信释放技能以及强化普攻命中目标后会增加60%攻击速度。</td>
        <td>
            <ul>
                <li>无情冲锋</li>
                <li>背水一战</li>
                <li>国士无双</li>
                
            </ul>
        </td>
        </tr>

</tbody>

</table>

</body>
</html>

总结

对各种标签的运用还不够熟悉,打代码的速度过慢没有运用熟练。
对图片插入一个网址的步骤以及合并单元格的步骤没有理解到位。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容