1 <!DOCTYPE html> 2 <!--CSS中position属性--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .pg-header{ 9 height: 50px; 10 background-color: black; 11 color: #dddddd; 12 position: fixed; 13 top:0; 14 right: 0; 15 left: 0; 16 } 17 .pg-body{ 18 background-color: #dddddd; 19 height: 200px; 20 margin-top: 100px; 21 } 22 </style> 23 24 </head> 25 <body> 26 27 <div class="pg-header">头部 position: fixed;分层固定中页面某个位置</div> 28 <div class="pg-body">内容 margin-top: 100px 离顶部100像素</div> 29 30 31 <div style=" 40px; 32 height:40px; 33 background-color:red; 34 color:green; 35 position: fixed; 36 bottom:100px; 37 right: 100px; 38 "> 39 -返回顶部 40 </div> 41 <div style="position: relative; 500px;height: 500px;border: 5px solid red;margin:0 auto;"> 42 43 父级position: relative配合子级position: absolute使用才有效果 44 45 <div style="position: absolute;left: 100px;bottom: 200px; 150px;height: 20px;background-color:gold; "> 46 以父级的位置做为起始点来偏移位置left加bottom，-------块的大小;width加height，---------块的颜色background-color 47 </div> 48 </div> 49 50 <br/> 51 <br/> 52 53 <div style="position: relative; 500px;height: 500px;border: 5px solid red;margin:0 auto;"> 54 <div style="position: absolute;left: 0px;bottom: 0px; 50px;height: 50px;background-color:green; "></div> 55 </div> 56 57 58 59 </body> 60 </html>
1 <!DOCTYPE html> 2 <!--CSS中position多层背景--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <div style=" <!--display: none;--> 10 z-index:10; 11 position: fixed; 12 top:50%; 13 left: 50%; 14 margin-left:-250px; 15 margin-top:-250px; 16 background-color: white; 17 height:400px; 18 500px; 19 "> 20 <!--注释--> display: none;让标签消失 z-index层级的顺序 21 <input type="text"/> 22 <input type="text"/> 23 <input type="text"/> 24 </div> 25 26 <div style="<!--display: none;--> 27 z-index:9; 28 position: fixed; 29 background-color: white; 30 top: 0; 31 bottom: 0; 32 right: 0; 33 left: 0; 34 opacity: 0.5; 35 "> 36 <!--注释--> display: none;让标签消失 opacity: 0.5控制透明度 37 </div> 38 <div style="height: 5000px; 39 background-color: green; 40 "> 41 内容显示层 42 </div> 43 44 45 </body> 46 </html>
1 <!DOCTYPE html> 2 <!--CSS中header应用--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .pg-header{ 9 position: fixed; 10 right: 0; 11 left: 0; 12 top: 0; 13 height: 48px; 14 background-color: #2459a2; 15 line-height: 48px; 16 } 17 .pg-body{ 18 margin-top: 50px; 19 } 20 .w{ 21 width: 980px; 22 margin: 0 auto; 23 } 24 .pg-header .menu{ 25 display: inline-block; 26 padding: 0 10px 0 10px; 27 color: white; 28 } 29 30 /*hover当鼠标移动到当前标签时，以下CSS属性才生效*/ 31 .pg-header .menu:hover{ 32 background-color: #E80203; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="pg-header"> 38 <div class="w"> 39 <a class="logo">LOGO</a> 40 <a class="menu">全部</a> 41 <a class="menu">42区</a> 42 <a class="menu">段子</a> 43 <a class="menu">1024</a> 44 </div> 45 </div> 46 <div class="pg-body"> 47 <div class="w"> 其他内容 </div> 48 </div> 49 </body> 50 </html>
1.jpg
1 <!DOCTYPE html> 2 <!--CSS中overflow应用--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <div style="height: 200px; 300px;overflow: auto;"> 10 overflow: auto超过设定就出滚动条 11 <img src="1.jpg"> 12 </div> 13 <br/> 14 <div style="height: 200px; 300px;overflow: hidden;"> 15 overflow: hidden超过设定就不显示，隐藏 16 <img src="1.jpg"> 17 </div> 18 </body> 19 </html>
2.gif
3.png 
4.jpg 
1 <!DOCTYPE html> 2 <!--CSS在background的应用1--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <div style="background-image: url(2.gif); 10 height:700px;"> 11 堆叠图片 平铺效果 12 </div> 13 14 <br/> 15 <div>--------------------分割-------------------</div> 16 <div>--------------------分割-------------------</div> 17 <div>--------------------分割-------------------</div> 18 <div>--------------------分割-------------------</div> 19 <div>--------------------分割-------------------</div> 20 <br/> 21 22 <div style="background-image: url(2.gif); 23 background-repeat:repeat-x; 24 height:700px;"> 25 堆叠图片 X横向平铺效果 26 </div> 27 28 <br/> 29 <div>--------------------分割-------------------</div> 30 <div>--------------------分割-------------------</div> 31 <div>--------------------分割-------------------</div> 32 <div>--------------------分割-------------------</div> 33 <div>--------------------分割-------------------</div> 34 <br/> 35 36 <div style="background-image: url(2.gif); 37 background-repeat:repeat-y; 38 height:700px;"> 39 堆叠图片 Y竖向平铺效果 40 </div> 41 42 </body> 43 </html>
1 <!DOCTYPE html> 2 <!--CSS在background的应用2--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <div style="height: 100px;border: 2px solid green;"> 根据位置移动来显示 </div> 10 <div style="background-image:url(3.png); 11 background-repeat:no-repeat; 12 height: 18px; 13 18px; 14 border: 2px solid red; 15 background-position-x: 0px; 16 background-position-y: 0px; 17 "> 18 </div> 19 <br/> 20 <div style="height: 100px;border: 2px solid green;"> 根据位置移动来显示 </div> 21 <div style="background-image:url(3.png); 22 background-repeat:no-repeat; 23 height: 18px; 24 18px; 25 border: 2px solid red; 26 background-position-x: 0px; 27 background-position-y: -15px; 28 "> 29 </div> 30 <br/> 31 <div style="height: 100px;border: 2px solid green;"> 简单的写法 </div> 32 <div style="background: url(3.png) 1px -35px no-repeat; 33 height: 18px; 34 18px; 35 border: 2px solid red; 36 "> 37 38 </div> 39 <br/> 40 <div style="height: 100px;border: 2px solid green;"> 全图显示 </div> 41 <div style="background-image: url(3.png); 42 height: 178px; 43 18px; 44 border: 2px solid red; 45 "> 46 47 </div> 48 49 </div> 50 51 52 53 54 55 56 57 </body> 58 </html>
1 <!DOCTYPE html> 2 <!--CSS在background实例--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 10 <div style="height: 50px; 400px;position: relative;"> 11 <input type="text" style="height: 50px; 360px;padding-right: 40px"> 12 <span style="position: absolute; 13 right: 5px; 14 top: 5px; 15 background-image: url(4.jpg); 16 height: 40px; 17 40px; 18 display: inline-block; 19 "> 20 </span> 21 </div> 22 23 24 </body> 25 </html>