多功能的clearfix

可以解决父子元素外边距重叠与高度塌陷<与低版本兼容>

.clearfix:before

.clearfix:after{

content:" "

display:table

clear:both}

.clearfix{zoom:1}

---

表单

代码

<form action="提交成功.html">

<fieldset legend="根据提示输入信息登陆">

<!-- 用来做一个多个选项分组 -->

<!-- value里面写入默认值 -->

<!-- 用户名<input type="text" name="username" value="请输入您的用户名"> -->

<!-- label for属性为ID服务 点击输入框旁边的字光标自动定位到框内 -->

<label for="um"></label>

<!-- placeholder里面写入提示信息 -->

用户名<input id="um" type="text" name="username" placeholder="请输入用户名">

<br><br>

密码<input type="password" name="password" placeholder="请输入密码">

</fieldset>

<br><br>

<!-- 单选框 -->

性别<input type="radio" name="gender" value="male">男

<input type="radio" name="gender" value="fmale" checked="checked">女

<br><br>

爱好<input type="checkbox" value="readbook">读书

<input type="checkbox" value="playgame">打游戏

<input type="checkbox" value="travelling">旅行

<input type="checkbox" value="shopping">购物

<input type="checkbox" value="money" checked="checked">美元

<!-- checked="checked"用来设置默认选项 -->

<br><br>

<!-- 下拉列表选项多选框 -->

你喜欢的明星

<select name="star" id="">

<!-- optgroup label用来分类 -->

<optgroup label="欧美女明星">

<option value="taylor">泰勒</option>

<option value="lorde" selected="selected">洛德</option>

<!-- selected用来设置默认选项 -->

<option value="del lanna">打雷</option>

<option value="callbla">卡贝拉</option>

</optgroup>

<optgroup label="欧美超级明星">

<option value="taylor">泰勒</option>

<option value="lorde" selected="selected">洛德</option>

<!-- selected="selected"用来设置默认选项 -->

<option value="del lanna">打雷</option>

<option value="callbla">卡贝拉</option>

</optgroup>

</select>

<br><br>

<!-- reset用来重置，将页面中选项全部变成默认 -->

<input type="reset" value="重置">

<!-- button用来设置按钮和JS配合使用 -->

<input type="button" value="按钮">

<input type="submit" value="注册">

<br><br>

<!-- 推荐使用这种方式创建按钮 -->

<button type="submit">戳我</button>

<button type="reset">顶我</button>

<button type="button">爱我</button>

<br><br>

<!-- textarea用来创建一个文本域,可以输入多行数据 网页上显示的文本框可以拖拉随意设置大小  -->

<textarea name="爱豆排名" id="" cols="30" rows="10"></textarea></form>

---