一、整体布局

1、创建一个html标签

2、创建三个div标签（分别是网页的头部，中间，和底部三部分）

3、一般都用class选择器

4、用css给body标签加个 margin:0（用于消除body边框和浏览器间的空白部分）

5、使div（块状）标签居中---------->先定义宽度，高度----------->margin:0 auto(自动离俩边距离相同)

6、list-style: none; 去除无序列表前面的符号（不能除去有序列表的）

7、padding：(1)上   (2)右   (3)下    (4)左             padding：(1)上下     (2) 左右

8、去掉a标签下面的下划线------------------>text-decoration = none

9、设置图片的高度用margin-top = xxxpx；

10、line-height = 行高  ------------>文本上下居中

11、text-again = center------------>文本左右居中

12、设置透明度方法：1、opacity：0-1

　　　　　　　　　　 2、background：rgba（0,0,0,0-1）

13、absolute 绝对定位，如果父标签中有reverse ，则相对于父标签进行定位，如果没有，则相对于body标签进行定位，脱离文档流，其下面的部分会顶上去

14、cursor: pointer;  变小手

二、标签种类

 dispaly:inline 变内联标签   ----------无法使用高度，宽度

display:block  变块级标签

display:inline-block 变内联标签 -----可以使用高度，宽度

三、页面中的小图标（实际上是通过一面墙上的洞看图片中的图标，我们可以通过调节洞的大小和图片的位置来显示不同的样式）

1、先定义洞口的大小  width：18px   height：16px

2、通过backgroud-position：值1  值2   通过调整值1，值2的大小来移动位置来得到不同的图片

四、z-index 在同一位置定义俩标签（都钉住，那么后面的标签会把前面的标签覆盖掉，这样我们就可以用z-index=xx的大小来决定位置）

<div style="position: fixed; left:0; right:0;height: 50px; "></div>

<div style="position: fixed; left:0; right:0;height: 50px; "></div>

五、子类漂浮，父类背景消失问题（由于子类漂浮，无法支撑起父类）

 子类漂浮，父类背景无

解决方法一：再新加一个标签，样式设置成clear = both

 加clear = both

解决方法二：利用伪类

 利用伪类

六、hover

1、hover后加选择器点上去以后俩个不同的东西同时变化的情况

 同时变化

static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

2、鼠标点上去换背景

 覆盖

七、小三角

 小尖角

 使用伪类出现上下尖角

 上下尖角变化实例

对于块级标签，margin-top 允许出现负值，一直往上走，可以脱离屏幕
对于内联标签，margin-top不允许出现负值，负值无效，不会脱离屏幕

八、页面中的小图标

1、自己用css画

2、用别人的    http://fontawesome.io/3.2.1/icons/   下载并导入<link rel="stylesheet" href="http://www.mamicode.com/font-awesome/css/font-awesome.css">

九、目录格式

HTML文件放到APP中

css样式文件放到css文件夹中

js文件放到script文件夹中

下载的第三方插件放到plugin中 

十、img默认是有边框的（如果加在a标签中间，a标签中的字体颜色会带给img的边框）

解决方法：在样式中加一个img{border = 0 }  把边框提前设置为0

十一、样式的就近原则

如果给同一个标签的同一类型，设置俩个不同的属性，那么就按照样式的就近原则进行渲染

 就近原则

如果想要是某一样式不被改变的话，就在样式中添加 ！important

 !important

十二、布局

1、对于上图中的布局的方法一：固定上面标题部分和左半部分

 固定上 左

2、对右半部分进行操作(overflow = "auto")

 右半部分溢出操作

十三、提示框

 提示框

十四、输入框

 输入框

十五、模态对话框

 模态对话框

十六、输入框加减操作

 输入框加减

HTML css