6.20（HTML和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块之间的空格。
昨天想连着更，结果今天又没继续·····
