一、整体布局
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------------>文本左右居中
二、标签种类
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>
五、子类漂浮，父类背景消失问题（由于子类漂浮，无法支撑起父类）
<meta charset="UTF-8"> <title>Title</title> <style> .w{ background-color: gold; } .w .item{ float: left; } </style> </head> <body> <div class="w"> <div class="item">111</div> <div class="item">222</div> </div> </body> </html>
解决方法一：再新加一个标签，样式设置成clear = both
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.w{
background-color: gold;
}
.w .item{
float: left;
}
</style>
</head>
<body>
<div class="w">
<div class="item">111</div>
<div class="item">222</div>
<div style="clear: both"></div>
</div>
</body>
</html>
解决方法二：利用伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .w{ background-color: gold; } .w .item{ float: left; } .w:after{ content: "777"; #在标签后面加一个内联标签 display: block; #设置成块级标签，让其换行 clear: both; visibility: hidden; #隐藏掉添加的部分 } </style> </head> <body> <div class="w"> <div class="item">111</div> <div class="item">222</div> </div> </body> </html>
六
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ 300px; height: 50px; border: 2px solid transparent; } .c1:hover{ #表示点上去以后c1变化 border: 2px solid rebeccapurple; # rebeccapurple为透明色 } .c1:hover .c2{ #表示点上去以后c1的变化的同时c2变化 color: #e20052; } </style> </head> <body> <div class="c1"> <span class="c2">123</span> <div class="c3">456</div> </div> </body> </html>
、hover后加选择器点上去以后俩个不同的东西同时变化的情况