HTML脑图：
how2j找的阶段性练习，话说VScode编辑器确实比DW好用，简洁免费（不是打广告哈哈）
#0
<head>
<meta charset="uft-8">
head>
<html
>
<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">td>
tr>
<tr>
<td width="17%"><b>致命打击b>td>
<td width="8%"><b>Qb>td>
<td width="13%">冷却时间：8td>
<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>Wb>td>
<td width="13%">冷却：24/23/22/21/20td>
<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>Eb>td>
<td width="13%">冷却：9td>
<td width="50%">盖伦快速地旋舞大剑,持续3秒,在持续期间对周围敌人总共造成物理伤害————14/18/22/26/30加上他总攻击力的34/35/36/37/38%，五次(英雄等级每升3级加一次)。
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>Rb>td>
<td width="13%">冷却：120/100/80td>
<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>
效果：
#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">1998option>
<option value="1998">···option>
<option value="1998">2001option>
select>
td>
<td>
<select>
<option hidden>月option>
<option value="1">1option>
<option value="2">2option>
<option value="3">3option>
select>
td>
<td>
<select>
<option hidden>日option>
<option value="11">11option>
<option value="12">12option>
<option value="13">13option>
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块之间的空格。
昨天想连着更，结果今天又没继续·····
Original: https://www.cnblogs.com/GeniusWang/p/15644220.html
Author: Genius_Wang
Title: 6.20（HTML和CSS–＞练习案例)
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/583152/
转载文章受原作者版权保护。转载请注明原作者出处！