css常用的一些属性：
1.去掉下划线 ：text-decoration:none ;
2.加上下划线： text-decoration: underline;
3.调整文本和图片的位置（也就是设置元素的垂直对齐方式）：vertical-align:-20px;
没设置之前：
设置之后：
3.外边距：margin
4.内边距：padding
5.居中；margin 0 auto;(只是针对盒子居中)
6内联标签是不可以设置长宽的，有时候就得把内联标签变成块级标签或者块级内联标签，这就用到了display标签。。
1.将内联标签转换成块级标签：display:block;
2.将块级标签转换成内联标签：display:inline;
3.块级内联标签：display；inline-block;
块级内联标签可以像块级一样可设长宽，也可像内联一样在一行显示
6.隐藏的两个方法：display:none; #隐藏了会顶上去
visibility :hidden; #隐藏了不会顶上去
7.隐藏溢出的两个方法：overflow :auto;
overflow :scoll; #带滚动条
8.文本水平居中：text-align:center;
文本垂直居中：line-height;
9.伪类；
1.没访问之前： a:link{color:red;}
2.鼠标悬浮时： a:hover{color:green;}
3.访问过后： a:visited{color:yellow;}
4.鼠标点击时 a:active{color:blue;}
5.在p标签属性为c2的后面加上内容
p.c2:after{
content:'hello';
color:red;
}
6.在p标签属性为c2的钱面加上内容
p.c2:before{
content:'啦啦啦';
color:red;
}
10.position的四种属性
1.static：默认位置
2.fixed：完全脱离文档流，固定定位(以可视窗口为参照物)
3.relative:相对定位(参照的是自己本身的位置)，没有脱离文档流，没有顶上去，会保持自己的位置不动。可以使用top left进行定位
4.absolute:绝对定位：脱离了文档流（参照的是按已定位的父级标签定位，如果找不到会按body的去找）
注意！！：将定位标签设置为absolute，将他的父级标签设置为定位标签 （relative）
11.float和position的区别
float：半脱离文档流
position：全脱离文档流
12.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
//测试z-index
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.img1 {position:absolute;left:0;top:0;z-index:-10;}.img2 {position:absolute;left:0;top:0;z-index:-3; //越大越往前排，离你越近}.img3 {position:absolute;left:0;top:0;z-index:-5;}</style>
</head>
<body>
<div class="img3"><img src="作业/1.jpg" alt=""></div>
<div class="img2"><img src="作业/2.jpg" alt=""></div>
<div class="img1"><img src="作业/3.jpg" alt=""></div>
</body>
</html>
13.透明度：opacity:0.4;
14.边框弧度：border-radius: 50%;
15.去除列表前面的标志：list-style:none;
16.对齐上面和左边最顶部：padding:0; margin:0;
17.字体加粗样式： font-weight: 900;
18.需要注意的几个逻辑表达式的问题，下面的这个和js的&&，||用法是一样的
print(3 and 5) #两个为真才为真
print(0 and 3) #0是假就不判断后面了，直接成假了
print(0 or 3) #有一个为真就为真
print(2 or 3) #2已经为真了那么就不会去判断后面了
//实现图片切换的效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding:0;margin: 0;}.outer{width:790px;height: 340px;border: solid 1px red;margin: 0 auto;margin-top: 40px;position: relative;}ul{list-style: none;position: absolute;top: 0;left:0;}.com{position: absolute;display: none;/*visibility: hidden;*/}.num{position: absolute;top: 300px;left: 330px;}.num li{display: inline-block;width: 20px;height: 20px;color: black;background-color: white;border-radius: 50%; //边框弧度line-height: 20px;text-align: center;}.btn{position: absolute;width: 40px;height: 60px;background-color: grey;opacity: 0.5; //透明度color: black;font-weight: 900; //加粗text-align: center;line-height: 60px;top:50%;margin-top: -30px;}.leftbtn{left:0;}.rightbtn{right:0;}</style>
</head>
<body>
<div class="outer"><ul class="img"><li><a href=""><img src="1.jpg" alt=""></a></li><li class="com"><a href=""><img src="2.jpg" alt=""></a></li><li class="com"><a href=""><img src="3.jpg" alt=""></a></li><li class="com"><a href=""><img src="4.jpg" alt=""></a></li><li class="com"><a href=""><img src="5.jpg" alt=""></a></li><li class="com"><a href=""><img src="6.jpg" alt=""></a></li></ul><ul class="num"><li></li><li></li><li></li><li></li><li></li></ul><div class="leftbtn btn"> < </div><div class="rightbtn btn"> > </div></div></body>
</html>
//后台管理布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后台管理布局</title><style>*{margin: 0;}a{text-decoration: none;}.header{width: 100%;height: 44px;background-color: #2459a2;}.title li{width: 100px;height: 80px;list-style: none;text-align: center;line-height: 80px;margin-top: 20px;padding: 50px;background-color: blue;}.leftmenu .title a{font-size: 18px;color: white;}.leftmenu{width: 300px;background-color: grey;position: fixed;top: 44px;left:0;bottom: 0;}.con{position: fixed;top: 44px;left: 300px;right:0;bottom: 0;background-color: darksalmon;overflow: scroll;}</style>
</head>
<body>
<div class="header"></div>
<div class="content"><div class="leftmenu"><ul class="title"><li><a href="">菜单一</a></li><li><a href="">菜单二</a></li><li><a href="">菜单三</a></li></ul></div><div class="con"><h1>hellp</h1><h1>hello</h1><h1>hello</h1></div>
</div>
</body>
</html>
//遮盖层
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>遮罩层</title><style>.backgroup{width: 100%;height: 2000px;}.zzc{position: fixed;bottom: 0;top:0;left:0;right:0;background-color: grey;opacity: 0.4;}</style>
</head>
<body>
<div class="backgroup"><p>haiyan</p><p>haiyan</p><p>haiyan</p><p>haiyan</p><p>haiyan</p><p>haiyan</p><p>haiyan</p><p>haiyan</p><p>haiyan</p><p>haiyan</p><p>haiyan</p><p>haiyan</p><p>haiyan</p>
</div>
<div class="zzc"></div>
</body>
</html>
