纵向菜单
tips:
li+li{border-top:1px solid #f00;}
设置a标签display:block填充整个li区域，同时在a标签上设置边距
横向菜单
（1）ul设置overflow:hidden 强制包裹浮动元素，li设置float:left左浮动，a标签设置display:block
（2）ul设置inline-block,li设置float:left
下拉菜单
（1）菜单的视觉样式和功能样式最好分开
（2）所有的视觉样式，边距，边框，背景都要应用给a标签，以便可点击区域最大化
（3）二级菜单的定位为绝对定位，设置left:0 top:100%
鼠标悬停时显示
li ul{
display:none;
}
li:hover > ul{ display:block; }
鼠标悬停时父元素变色
.multi_drop_menu li:hover > a { /*悬停时的文本颜色*/ color:#fff; /*悬停时的背景颜色*/ background-color:#aaa }
注：hover事件会随着元素的结构层次向上冒泡，下拉菜单会继承圆角样式
表单
form
action 用于指定服务器上用来处理表单的文件url method 用来设定请求方式
提交表单
名/值对，名字是表单控件的name属性，值为输入框的值或者布尔值
控件组
<fieldset>用于区分表单中不同的信息区域
<fieldset> <legend>Mailing Address</legend> </fieldset>
控件与标注
（1）<label>标签的for属性对应<input>的id，或者也可以用<label>标签包裹<input>
（2）表单控件的说明可以使用<p>标签
（3）复选框和单选款input type设置checkbox或者radio ,一般是成对出现的，设置它们的name属性相等
（4）选项列表<select>下的每个备选项元素都是由<option>文本元素生成
表单标记策略
将每一组<label><input>放入<section>标签中。对于多选框和复选框，将所有的选择框用<section>包裹，再单独对每一个选择框用<section>进行包裹。
弹出层
img { display:block; }
（1）img是行内元素，在块级元素中默认的行为是以文本基线对齐，而不是与他们容器的底边对齐。转换为块级元素可以解决这个问题。
（2）z-index只对position不是static的值有效
H5figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
h5标签figcaption代表了figure元素的一个标题或相关解释，在figure中使用figcaption时，figcaption最好作为figure中的第一个或最后一个元素
css创造三角形
div{ width:0; height:0; border:12px solid; border-color:transparent transparent transparent red; }
一般使用在::brfore或者::after中