ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

6.20(HTML和CSS-->练习案例)

2021-06-21 19:00:45  阅读:199  来源: 互联网

标签:盖伦 -- 冷却 造成 HTML 6.20 反派 伤害 CSS


HTML脑图:
在这里插入图片描述
how2j找的阶段性练习,话说VScode编辑器确实比DW好用,简洁免费(不是打广告哈哈)

#0

<head>
    <meta charset="uft-8">
</head>
<html
<body>
   <table border="1" >
        <tr bgcolor="#c0c0c0" height="10px">
            <td width="17%"><b>技能名</b></td>
            <td width="8%"><b>触发</b></td>
            <td width="13%"><b>技能属性</b></td>
            <td width="50%"><b>技能效果</b></td>
            <td width="8%">图标</td>
        </tr>
        <tr height="10px">
            <td><b>坚韧</b></td>
            <td><b>被动</b></td>
            <td colspan="2">盖伦如果在秒内不受到任何伤害,之后的每秒都会回复自己最大生命值的0.4%。小兵的伤害不会中断坚韧效果。</td>
            <td align="center"><img src="skill1.png"</td>
        </tr>
        <tr>
            <td width="17%"><b>致命打击</b></td>
            <td width="8%"><b>Q</b></td>
            <td width="13%">冷却时间:8</td>
            <td width="50%">盖伦移除身上的所有减速效果,并获得30%移动速度加成,持续1.5/2/2.5/3/3.5秒。<br/>
                在接下来的4.5秒内,他的下次普通攻击会造成30/55/80/105/130(+1.4AD)物理伤害,并沉默目标1.5秒。</b></td>
            <td align="center"><img src="skill2.png"></td>
        </tr>
        <tr>
            <td width="17%"><b>勇气</b></td>
            <td width="8%"><b>W</b></td>
            <td width="13%">冷却:24/23/22/21/20</td>
            <td width="50%"><b>被动:</b>击杀一个单位会永久提供0.25护甲和魔法抗性加成,最大值:30<br/>
                    <b>主动:</b>盖伦获得一个持续2/3/4/5/6秒的防御护盾,减少即将到来的30%伤害。</td>
            <td align="center"><img src="skill3.png"></td>
        </tr>
        <tr>
            <td width="17%"><b>审判</b></td>
            <td width="8%"><b>E</b></td>
            <td width="13%">冷却:9</td>
            <td width="50%">盖伦快速地旋舞大剑,持续3秒,在持续期间对周围敌人总共造成物理伤害————14/18/22/26/30加上他总攻击力的34/35/36/37/38%,五次(英雄等级每升3级加一次)。<br>
                    E【审判】会在攻击单个敌人时造成33%额外伤害。<br/>
                    取消E【审判】会返还相当于剩余持续时长的冷却时间。<br/>
                    E【审判】可以暴击,并造成额外伤害。</td>
            <td align="center"><img src="skill4.png"></td>
        </tr>
        <tr>
            <td width="17%"><b>德玛西亚正义</b></td>
            <td width="8%"><b>R</b></td>
            <td width="13%">冷却:120/100/80</td>
            <td>width="50%"><b>被动:</b>最近获得最大击杀的敌人会成为<b>大反派</b>,盖伦的E【审判】和普通攻击会对<b>大反派</b>造成额外真实伤害,伤害值为<b>大反派</b>1%的最大生命值。<br />
            <b>主动:</b>盖伦召唤德玛西亚之力,试图斩杀一名敌方英雄,目标损失的生命越多,则此技能造成的伤害越高。造成175/350/525魔法伤害加上目标已损失生命值的28/33/40%。对<b>大反派</b>造成真实伤害。</td>
            <td align="center"><img src="skill5.png"></td>
        </tr>
   </table>
    </body>
</html>
<!-- 2160,1440 1080,1920 -->

效果:
在这里插入图片描述
#1

<head>
    <meta charset="utf-8">
</head>
<html>
    <body>
        <h1>注册界面</h1>
        
            <table width="280px">
                <tr>
                    <td width="80px" align=right>
                        <font color="red">*</font>用户名:
                    </td>
                    <td colspan="4">
                        <input type="text" name="username">
                    </td>
                </tr>
                <tr>
                    <td width="100px" align=right>
                        <font color="red">*</font>密码:
                    </td>
                    <td colspan="4">
                        <input type="password" name="password">
                    </td>
                </tr>
                <tr>
                    <td width="100px" align=right>
                        <font color="red">*</font>确认密码:
                    </td>
                    <td colspan="4">
                        <input type="password" name="surePassword">
                    </td>
                </tr>
                <tr>
                    <td width="100px" align=right>
                        <font color="red">*</font>邮箱:
                    </td>
                    <td colspan="4">
                        <input type="text" name="email">
                    </td>
                </tr>
                <tr>
                    <td width="100px" align=right>
                        <font color="red">*</font>真实姓名:
                    </td>
                    <td colspan="4">
                        <input type="text" name="realname">
                    </td>
                </tr>
                <tr>
                    <td width="100px" align=right>
                        <font color="red">*</font>性别:
                    </td>
                    <td>
                        男<input type="radio" name="sex" value="m">
                    </td>
                    <td>
                        女<input type="radio" name="sex" value="f">
                    </td>
                </tr>
                <tr>
                    <td width="100px" align=right>
                        <font color="red">*</font>生日:
                    </td>
                    <td>
                        <select>
                            <option hidden>年</option>
                            <option value="1998">1998</option>
                            <option value="1998">···</option>
                            <option value="1998">2001</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option hidden>月</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option hidden>日</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="100px" align=right>
                        <font color="red">*</font>手机号:
                    </td>
                    <td colspan="4">
                        <input type="text" name="phone">
                    </td>
                </tr>
                <tr>
                    <td width="100px" align=right>
                        <font color="red">*</font>居住地:
                    </td>
                    <td>
                        <select>
                            <option hidden>省</option>
                            <option value="湖北">湖北</option>
                            <option value="湖南">湖南</option>
                            <option value="广东">广东</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option hidden>市县</option>
                            <option value="曹县">曹县</option>
                            <option value="广州">广州</option>
                            <option value="深圳">深圳</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option hidden>乡镇</option>
                            <option value="景德镇">景德镇</option>
                            <option value="温州">温州</option>
                            <option value="曲登乡">曲登乡</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="100px" align=right>
                        <font color="red">*</font>QQ号:
                    </td>
                    <td colspan="4">
                        <input type="text" name="QQ">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="4">
                        <font color="blue">设置我的QQ在线状态</font>
                    </td>
                </tr>
            </table>
       
        
    </body>
    
</html>

效果图:
在这里插入图片描述
HTML真丑,还是CSS好看
在这里插入图片描述


CSS就相对要难一些了
思考:绝对定位与相对定位的区别?
CSS的浮动,CSS显示方式,CSS水品居中,CSS左侧固定,CSS垂直居中,CSS左右固定,CSS贴在下方,CSS块之间的空格。

昨天想连着更,结果今天又没继续·····

标签:盖伦,--,冷却,造成,HTML,6.20,反派,伤害,CSS
来源: https://blog.csdn.net/qq_46148737/article/details/118066105

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有