前端之CSS：CSS补充

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>

  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>