223 前端之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>
