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 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????.img1 { 8 ??????????????position:absolute; 9 ??????????????left:0;10 ??????????????top:0;11 ??????????????z-index:-10;12 ??????????????}13 ????????.img2 {14 ??????????????position:absolute;15 ??????????????left:0;16 ??????????????top:0;17 ??????????????z-index:-3; //越大越往前排，离你越近18 ??????????????}19 ????????.img3 {20 ??????????????position:absolute;21 ??????????????left:0;22 ??????????????top:0;23 ??????????????z-index:-5;24 ??????????????}25 ????</style>26 </head>27 <body>28 <div class="img3"><img src="作业/1.jpg" alt=""></div>29 <div class="img2"><img src="作业/2.jpg" alt=""></div>30 <div class="img1"><img src="作业/3.jpg" alt=""></div>31 </body>32 </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已经为真了那么就不会去判断后面了
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????*{ 8 ????????????padding:0; 9 ????????????margin: 0;10 ????????}11 ????????.outer{12 ????????????width:790px;13 ????????????height: 340px;14 ????????????border: solid 1px red;15 ????????????margin: 0 auto;16 ????????????margin-top: 40px;17 ????????????position: relative;18 ????????}19 ????????ul{20 ????????????list-style: none;21 ????????????position: absolute;22 ????????????top: 0;23 ????????????left:0;24 ????????}25 ????????.com{26 ????????????position: absolute;27 ????????????display: none;28 ????????????/*visibility: hidden;*/29 ????????}30 ????????.num{31 ????????????position: absolute;32 ????????????top: 300px;33 ????????????left: 330px;34 ????????}35 ????????.num li{36 ????????????display: inline-block;37 ????????????width: 20px;38 ????????????height: 20px;39 ????????????color: black;40 ????????????background-color: white;41 ????????????border-radius: 50%; //边框弧度42 ????????????line-height: 20px;43 ????????????text-align: center;44 ????????}45 ????????.btn{46 ????????????position: absolute;47 ????????????width: 40px;48 ????????????height: 60px;49 ????????????background-color: grey;50 ????????????opacity: 0.5; //透明度51 ????????????color: black;52 ????????????font-weight: 900; ?//加粗53 ????????????text-align: center;54 ????????????line-height: 60px;55 ????????????top:50%;56 ????????????margin-top: -30px;57 ????????}58 ????????.leftbtn{59 ????????????left:0;60 ????????}61 ?????????.rightbtn{62 ?????????????right:0;63 64 ????????}65 ????</style>66 </head>67 <body>68 <div class="outer">69 ????<ul class="img">70 ????????<li><a href=""><img src="1.jpg" alt=""></a></li>71 ????????<li class="com"><a href=""><img src="2.jpg" alt=""></a></li>72 ????????<li class="com"><a href=""><img src="3.jpg" alt=""></a></li>73 ????????<li class="com"><a href=""><img src="4.jpg" alt=""></a></li>74 ????????<li class="com"><a href=""><img src="5.jpg" alt=""></a></li>75 ????????<li class="com"><a href=""><img src="6.jpg" alt=""></a></li>76 ????</ul>77 ????<ul class="num">78 ????????<li></li>79 ????????<li></li>80 ????????<li></li>81 ????????<li></li>82 ????????<li></li>83 ????</ul>84 ????<div class="leftbtn btn"> < </div>85 ????<div class="rightbtn btn"> > </div>86 87 </div>88 89 </body>90 </html>91 92 实现图片切换的效果 ?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>后台管理布局</title> ?6 ????<style> ?7 ????????*{ ?8 ????????????margin: 0; ?9 ????????} 10 ????????a{ 11 ????????????text-decoration: none; 12 ????????} 13 ????????.header{ 14 ????????????width: 100%; 15 ????????????height: 44px; 16 ????????????background-color: #2459a2; 17 ????????} 18 ????????.title li{ 19 ????????????width: 100px; 20 ????????????height: 80px; 21 ????????????list-style: none; 22 ????????????text-align: center; 23 ????????????line-height: 80px; 24 ????????????margin-top: 20px; 25 ????????????padding: 50px; 26 ????????????background-color: blue; 27 ????????} 28 ????????.leftmenu .title a{ 29 ????????????font-size: 18px; 30 ????????????color: white; 31 ????????} 32 ????????.leftmenu{ 33 ????????????width: 300px; 34 ????????????background-color: grey; 35 ????????????position: fixed; 36 ????????????top: 44px; 37 ????????????left:0; 38 ????????????bottom: 0; 39 ????????} 40 ????????.con{ 41 ????????????position: fixed; 42 ????????????top: 44px; 43 ????????????left: 300px; 44 ????????????right:0; 45 ????????????bottom: 0; 46 ????????????background-color: darksalmon; 47 ????????????overflow: scroll; 48 ????????} 49 ?50 ????</style> 51 </head> 52 <body> 53 <div class="header"></div> 54 <div class="content"> 55 ????<div class="leftmenu"> 56 ????????<ul class="title"> 57 ????????????<li><a href="">菜单一</a></li> 58 ????????????<li><a href="">菜单二</a></li> 59 ????????????<li><a href="">菜单三</a></li> 60 ????????</ul> 61 ????</div> 62 ????<div class="con"> 63 ????????<h1>海燕啊</h1> 64 ????????<h1>海燕啊</h1> 65 ????????<h1>海燕啊</h1> 66 ????????<h1>海燕啊</h1> 67 ????????<h1>海燕啊</h1> 68 ????????<h1>海燕啊</h1> 69 ????????<h1>海燕啊</h1> 70 ????????<h1>海燕啊</h1> 71 ????????<h1>海燕啊</h1> 72 ????????<h1>海燕啊</h1> 73 ????????<h1>海燕啊</h1> 74 ????????<h1>海燕啊</h1> 75 ????????<h1>海燕啊</h1> 76 ????????<h1>海燕啊</h1> 77 ????????<h1>海燕啊</h1> 78 ????????<h1>海燕啊</h1> 79 ????????<h1>海燕啊</h1> 80 ????????<h1>海燕啊</h1> 81 ????????<h1>海燕啊</h1> 82 ????????<h1>海燕啊</h1> 83 ????????<h1>海燕啊</h1> 84 ????????<h1>海燕啊</h1> 85 ????????<h1>海燕啊</h1> 86 ????????<h1>海燕啊</h1> 87 ????????<h1>海燕啊</h1> 88 ????????<h1>海燕啊</h1> 89 ????????<h1>海燕啊</h1> 90 ????????<h1>海燕啊</h1> 91 ????????<h1>海燕啊</h1> 92 ????????<h1>海燕啊</h1> 93 ????????<h1>海燕啊</h1> 94 ????????<h1>海燕啊</h1> 95 ????????<h1>海燕啊</h1> 96 ????????<h1>海燕啊</h1> 97 ????????<h1>海燕啊</h1> 98 ????????<h1>海燕啊</h1> 99 ????????<h1>海燕啊</h1>100 ????????<h1>海燕啊</h1>101 ????????<h1>海燕啊</h1>102 ????????<h1>海燕啊</h1>103 ????????<h1>海燕啊</h1>104 ????????<h1>海燕啊</h1>105 ????????<h1>海燕啊</h1>106 ????????<h1>海燕啊</h1>107 ????????<h1>海燕啊</h1>108 ????????<h1>海燕啊</h1>109 ????????<h1>海燕啊</h1>110 ????????<h1>海燕啊</h1>111 ????????<h1>海燕啊</h1>112 ????????<h1>海燕啊</h1>113 ????????<h1>海燕啊</h1>114 ????????<h1>海燕啊</h1>115 ????????<h1>海燕啊</h1>116 ????????<h1>海燕啊</h1>117 ????????<h1>海燕啊</h1>118 ????</div>119 </div>120 </body>121 </html> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>遮罩层</title> 6 ????<style> 7 ????????.backgroup{ 8 ????????????width: 100%; 9 ????????????height: 2000px;10 ????????}11 ????????.zzc{12 ????????????position: fixed;13 ????????????bottom: 0;14 ????????????top:0;15 ????????????left:0;16 ????????????right:0;17 ????????????background-color: grey;18 ????????????opacity: 0.4;19 ????????}20 ????</style>21 </head>22 <body>23 <div class="backgroup">24 ????<p>haiyan</p>25 ????<p>haiyan</p>26 ????<p>haiyan</p>27 ????<p>haiyan</p>28 ????<p>haiyan</p>29 ????<p>haiyan</p>30 ????<p>haiyan</p>31 ????<p>haiyan</p>32 ????<p>haiyan</p>33 ????<p>haiyan</p>34 ????<p>haiyan</p>35 ????<p>haiyan</p>36 ????<p>haiyan</p>37 </div>38 <div class="zzc"></div>39 </body>40 </html>css样式之补充
原文地址：https://www.cnblogs.com/Ebola-/p/8569695.html