定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 background-color: red; 9 height: 100px; 10 width: 100px; 11 12 } 13 14 .c2 { 15 background-color: blue; 16 width: 100px; 17 height: 100px; 18 position: relative; 19 left: 100px; 20 bottom: 100px; 21 } 22 23 .c3 { 24 background-color: green; 25 width: 100px; 26 height: 100px; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="cc"> 32 <div class="c1"></div> 33 <div class="c2"></div> 34 <div class="c3"></div> 35 </div> 36 37 </body> 38 </html>
定位position：相对定位和绝对定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 background-color: red; 9 height: 100px; 10 width: 100px; 11 } 12 .c2{ 13 background-color: blue; 14 height: 100px; 15 width: 100px; 16 /*position: relative; !*相对定位,保留原来的空间位置,相对自己原来的位置移动,以左上角为基准*!*/ 17 18 /*top: 20px; 往下移20px,距离原来位置的上边框20px */ 19 /*top: -20px;*/ 20 /*left: 20px;*/ 21 /*right: ;*/ 22 /*bottom: ;*/ 23 24 position: absolute; /* 绝对定位,不保留自己原来的位置,按照父级标签或者祖先级标签..设置了position为 relative的标签的位置进行移动,如果一直找不到设置了设个属性的标签,那么按照body标签来移动 */ 25 26 top: 20px; 27 left: 20px; 28 } 29 .c3{ 30 background-color: green; 31 height: 100px; 32 width: 100px; 33 } 34 .ccc{ 35 height: 100px; 36 width: 200px; 37 background-color: purple; 38 } 39 .cc{ 40 position: relative; 41 left: 200px; 42 } 43 </style> 44 </head> 45 <body> 46 <div class="ccc"></div> 47 <div class="cc"> 48 <div class="c1"></div> 49 <div class="c2"></div> 50 <div class="c3"></div> 51 </div> 52 53 </body> 54 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 background-color: red; 9 height: 500px; 10 width: 200px; 11 } 12 .c2{ 13 background-color: green; 14 height: 500px; 15 width: 200px; 16 } 17 18 .s1{ 19 position: fixed; /*固定定位,位置是根据浏览器窗口来的*/ 20 /*top:20px;*/ 21 left: 20px; 22 bottom: 20px; 23 background-color: blue; 24 height: 40px; 25 width: 80px; 26 text-align: center; 27 28 line-height: 40px; /* 和标签高度一致,标签内容就垂直居中 */ 29 30 } 31 .s1 a{ 32 color: white; 33 text-decoration: none; 34 } 35 </style> 36 </head> 37 <body> 38 39 <!--<a name="top">这里是顶部,亲爱的</a>--> <!-- 锚点 --> 40 <div id="top">这是顶部</div> <!-- 锚点 --> 41 42 <div class="c1"></div> 43 <div class="c2"></div> 44 45 <span class="s1"> 46 <a href="#top">回到顶部</a> <!-- 触发锚点 --> 47 </span> 48 49 </body> 50 </html> 51 52 53 锚点设置的两种方式 54 <!--<a name="top">这里是顶部,亲爱的</a>--> <!-- 锚点 --> 55 <div id="top">这是顶部</div> <!-- 锚点 --> 56 触发锚点的a标签写法 57 <a href="#top">回到顶部</a> <!-- 触发锚点 -->
z-index模糊框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .shadow{ 8 position: fixed; 9 top:0; 10 bottom: 0; 11 left: 0; 12 right: 0; 13 background-color: rgba(0,0,0,0.5); 14 z-index: 99; 15 } 16 .mode{ 17 position: fixed; 18 height: 400px; 19 width: 300px; 20 background-color: white; 21 z-index: 100; /* 数值越大越在上层显示 */ 22 left: 50%; /* 按照窗口宽度的50%来移动 */ 23 top:50%; /* 按照窗口高度的50%来移动 */ 24 margin-left: -150px; 25 margin-top: -200px; 26 27 } 28 29 </style> 30 </head> 31 <body> 32 33 <div> 34 <h1> 35 22期,吴老板唱歌 36 </h1> 37 </div> 38 39 40 <div class="mode"> 41 42 </div> 43 44 <div class="shadow"> 45 46 </div> 47 48 49 </body> 50 </html>
opacity 透明度
1 .c1{ 2 background-color: rgba(255,0,0,0.3); /* 背景颜色或者字体颜色等单独的透明度 */ 3 height: 100px; 4 width: 100px; 5 } 6 .c2{ 7 background-color: rgb(255,0,0); 8 height: 100px; 9 width: 100px; 10 opacity: 0.3; /* 整个标签透明度 */ 11 } 12 <div class="c1"> 13 你好 14 </div> 15 <div class="c2"> 16 我好 17 </div>