Web第一次作业

作业分析

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

屏幕截图 2024-12-10 214029.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>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" bgcolor="rgba(50,50,100,0.5)">

    <tr >
        <td>类型</td>
        <td>图片</td>
        <td>名称</td>
        <td>作用</td>
       </tr>
      <tr>
        <td rowspan="4">人物</td>
        <td><img src="D:\Cloudprogram2024\homework\莱萌鸡.jpg"></td>
        <td>莱萌鸡</td>
        <td>无</td>
       </tr>
       <tr >
        <td><img src="D:\Cloudprogram2024\homework\栗雄.png"></td>
        <td>栗雄</td>
        <td>无</td>
        
       </tr>
       <tr >
        <td><img src="D:\Cloudprogram2024\homework\么么狐.jpg"></td>
        <td>么么狐</td>
        <td>无</td>
        
       </tr><tr >
        <td><img src="D:\Cloudprogram2024\homework\紫咪小鹰.jpg"></td>
        <td>紫咪小鹰</td>
        <td>无</td>
        
       </tr>
       <tr>
        <td rowspan="3">障碍</td>
        <td><img src="D:\Cloudprogram2024\homework\屏幕截图 2024-12-10 190949.png"></td>
        <td>黑色毛球</td>
        <td>在灰色毛球周围匹配消除</td>
       </tr>
       <tr >
        <td><img src="D:\Cloudprogram2024\homework\屏幕截图 2024-12-10 191025.png"></td>
        <td>冰块</td>
        <td>消除冰块上的小动物可以击碎冰块,冰块最多有三层</td>
        
       </tr>
       <tr >
        <td><img src="D:\Cloudprogram2024\homework\屏幕截图 2024-12-10 191043.png"></td>
        <td>金豆荚</td>
        <td>消除金豆荚下方小动物使其消除</td>
        
       </tr>
       <tr>
        <td rowspan="3">外挂</td>
        <td><img src="D:\Cloudprogram2024\homework\屏幕截图 2024-12-10 191122.png"></td>
        <td>小木槌</td>
        <td>消除任意障碍或动物一次,每局限用3次,使用过3次后当局不能继续使用 </td>
       </tr>
       <tr >
        <td><img src="D:\Cloudprogram2024\homework\屏幕截图 2024-12-10 191153.png"></td>
        <td>强制交换</td>
        <td>强制交换相邻的两个动物,每局限用2次,用过2次后当局不能继续使用 </td>
    
       </tr>
       <tr >
        <td><img src="D:\Cloudprogram2024\homework\屏幕截图 2024-12-10 191212.png"></td>
        <td>加5步</td>
        <td>剩余步数增加5步,只能在游戏中步数低于6步时使用,不限使用次数</td>
        
       </tr>

</table>

</body>
</html>

总结

刚开始标签名记不住,总是去翻笔记,但是后面逐渐脱离翻笔记,无他,唯手熟尔

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容