WEB第一次作业

作业分析

本次要使用table表格标签编写如下的效果


image.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>
        .video{
            width: 500px;height: 260px;
        }
    </style>
</head>
<body>
    <table
        border="1"  align="center"  cellpadding="10" cellspacing="0">
    <tr>
        <th width="50">类别</th>
        <th>图片</th>
        <th>简介</th>
        <th width="70">英雄名称</th>
        <th>被动</th>
        <th width="200">技能</th>
    </tr>
    <tr>
        <th rowspan="3">刺客</th>
        <td>
            <a href="https://101.qq.com/#/hero-detail?heroid=157&datatype=5v5&tab=skin" target="_blank">
            <img width="490px" height="260" src="./tu/YS.jpg"/td> </a>
        <td><video controls class="video" src="./tu/YSSP.mp4" /td>
        <td>疾风剑豪</td>
        <td width="50"><img width="70" height="60" src="./tu/YS00.jpg" >浪客之道</td>
        <td><ul>
            <li><img  width="40" height="40" src="./tu/YS01.jpg">Q.斩刚闪</li>
            <li><img  width="40" height="40" src="./tu/YS02.jpg">W.风之障壁</li>
            <li><img  width="40" height="40" src="./tu/YS03.jpg">E.踏前斩</li>
            <li><img  width="40" height="40" src="./tu/YS04.jpg">R.狂风绝息斩</li>
        </ul></td>
    <tr>
        <td>
        <a href="https://101.qq.com/#/hero-detail?heroid=91&datatype=5v5&tab=skin" target="_blank">
            <img width="490px" height="260" src="./tu/ND.jpg"/td>
        </a>
        <td><video controls class="video" src="./tu/NDSP.mp4" /td>
        <td>刀锋之影</td>
        <td width="50"><img wdith="70" height="60" src="./tu/ND00.jpg"/>刀锋之末</td>
        <td><ul>
            <li><img  width="40" height="40" src="./tu/ND01.jpg">Q.诺克萨斯外交</li>
            <li><img  width="40" height="40" src="./tu/ND02.jpg">W.斩草除根</li>
            <li><img  width="40" height="40" src="./tu/ND03.jpg">E.刺客之道</li>
            <li><img  width="40" height="40" src="./tu/ND04.jpg">R.暗影突袭</li>
        </ul></td>
    </tr>
    <tr>
        <td>
            <a href="https://101.qq.com/#/hero-detail?heroid=238&datatype=5v5&tab=skin" target="_blank">
                <img width="490px" height="260" src="./tu/J.jpg"/td>
            </a>
            <td><video controls class="video" src="./tu/JSP.mp4" /td>
            <td>影流之主</td>
        <td width="50"><img wdith="70" height="60" src="./tu/J00.jpg"/>影忍法!灭魂劫</td>
        <td><ul>
            <li><img  width="40" height="40" src="./tu/J01.jpg">Q.影奥义!诸刃</li>
            <li><img  width="40" height="40" src="./tu/J02.jpg">W.影奥义!分身</li>
            <li><img  width="40" height="40" src="./tu/J03.jpg">E.影奥义!鬼斩</li>
            <li><img  width="40" height="40" src="./tu/J04.jpg">R.禁奥义!瞬狱影杀阵</li>
        </ul></td>
    </tr>
    <tr>
        <th rowspan="3">法师</th>
        <td>
            <a href="https://101.qq.com/#/hero-detail?heroid=99&tab=skin" target="_blank">
                <img width="490px" height="260" src="./tu/GH.jpg"/td>
            </a>
             <td><video controls class="video" src="./tu/GHSP.mp4" /td>
        <td>光辉女郎</td>
        <td width="50"><img width="70" height="60" src="./tu/GH00.jpg" >光芒四射</td>
        <td><ul>
            <li><img  width="40" height="40" src="./tu/GH01.jpg">Q.光之束缚</li>
            <li><img  width="40" height="40" src="./tu/GH02.jpg">W.曲光屏障</li>
            <li><img  width="40" height="40" src="./tu/GH03.jpg">E.透光奇点</li>
            <li><img  width="40" height="40" src="./tu/GH04.jpg">R.终极闪光</li>
        </ul></td>
    <tr>
        <td>
             <a href="https://101.qq.com/#/hero-detail?heroid=103&datatype=5v5&tab=skin" target="_blank">
                <img width="490px" height="260" src="./tu/Al.jpg"/td>
            </a>
             <td><video controls class="video" src="./tu/ALSP.mp4" /td>
        <td>九尾妖狐</td>
        <td width="50"><img wdith="70" height="60" src="./tu/AL00.jpg"/>摄魂夺魄</td>
        <td><ul>
            <li><img  width="40" height="40" src="./tu/AL01.jpg">Q.欺诈宝珠</li>
            <li><img  width="40" height="40" src="./tu/AL02.jpg">W.妖异狐火</li>
            <li><img  width="40" height="40" src="./tu/AL03.jpg">E.魅惑妖术</li>
            <li><img  width="40" height="40" src="./tu/AL04.jpg">R.灵魄突袭</li>
        </ul></td>
    </tr>
    <tr>
        <td>
            <a href="https://101.qq.com/#/hero-detail?heroid=142&tab=skin" target="_blank">
                <img width="490px" height="260" src="./tu/ZY.jpg"/td>
            </a>
             <td><video controls class="video" src="./tu/ZYSP.mp4" /td>
            <td>暮光星灵</td>
        <td width="50"><img wdith="70" height="60" src="./tu/ZY00.jpg"/>烟火四射</td>
        <td><ul>
            <li><img  width="40" height="40" src="./tu/ZY01.jpg">Q.飞星乱入</li>
            <li><img  width="40" height="40" src="./tu/ZY02.jpg">W.窃法巧手</li>
            <li><img  width="40" height="40" src="./tu/ZY03.jpg">E.催眠气泡</li>
            <li><img  width="40" height="40" src="./tu/ZY04.jpg">R.折返跃迁</li>
        </ul></td>
    </tr>
    </table>
    <br>
    <audio controls autoplay preload="auto" loop src="./tu/YY.mp3"></audio>
</body>
</html>

个人总结

感觉网页开发很有意思,但是难度也大,就这次作业来说,代码的运用不够熟练,位置排布也不太理解,需要后期大量的的练习和训练

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

相关阅读更多精彩内容

  • 作业分析 本次要使用table表格标签编写如下的效果 代码实现 使用html标签代码实现 <!DOCTYPE ht...
    牢弟还得练阅读 82评论 0 1
  • #作业分析 本次要使用table表格标签编写以下效果 #代码实现 使用html标签代码实现 ```html <!D...
    满庭雪阅读 56评论 0 0
  • 作业分析 本次要使用table表格标签编写如下效果 代码实现--HTML标签代码实现 <!DOCTYPE html...
    C_11f7阅读 64评论 0 0
  • 作业分析 本次要使用table表格标签编写如下的效果 代码实现 使用html标签代码实现 个人总结 这次作业让我对...
    jhsdgfa阅读 88评论 0 0
  • 作业分析 本次要使用table表格标签编写如下的效果 代码实现 <!DOCTYPE html> 英雄联盟K...
    随缘_b01f阅读 67评论 0 0

友情链接更多精彩内容