CSS3学习笔记-界面组件

纵向菜单 

 tips:

li+li{border-top:1px solid #f00;}

设置a标签display:block填充整个li区域，同时在a标签上设置边距

横向菜单

ul设置overflow:hidden 强制包裹浮动元素

li设置float:left左浮动

a标签设置display:block

下拉菜单

菜单的视觉样式和功能样式最好分开

父级元素ul设置float:left 强制对li 浮动进行包裹

所有的视觉样式，边距，边框，背景都要应用给a标签，以便可点击区域最大化

background-clip:padding-box背景只出现在内边距区域的后面

二级菜单的定位为绝对定位，设置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>

控件与标注

<label>标签的for属性对应<input>的id，或者也可以用<label>标签包裹<input>

表单控件的说明可以使用<p>标签

复选框和单选款input type设置checkbox或者radio ,一般是成对出现的，设置它们的name属性相等

选项列表<select>下的每个备选项元素都是由<option>文本元素生成

表单标记策略

将每一组<label><input>放入<section>标签中。对于多选框和复选框，将所有的选择框用<section>包裹，再单独对每一个选择框用<section>进行包裹。

弹出层

img {
  display:block;
}

img是行内元素，在块级元素中默认的行为是以文本基线对齐，而不是与他们容器的底边对齐。转换为块级元素可以解决这个问题。

z-index只对position不是static的值有效

figure标签规定独立的流内容（图像、图表、照片、代码等等）。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中

CSS3学习笔记-界面组件

原文：https://www.cnblogs.com/goOtter/p/9657756.html