1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div id="div1"></div> 10 <div id="div2"></div> 11 <div id="div3"></div> 12 <div id="div4"></div> 13 <div id="div5"></div> 14 <div id="div6"></div> 15 <div id="div7"></div> 16 <div id="div8"><img src="img/草1.jpg"></div> 17 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 18 <div id="div9"> 19 文字 20 <input type="text" name=""> 21 <img src="img/鸟1.jpg"> 22 <p id="p1">哈哈</p> 23 <div id="div10"></div> 24 </div> 25 <br><br><br><br><br><br><br> 26 <div id="div11"></div> 27 <div id="div12"></div> 28 <div id="div13"></div> 29 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 30 <p>让窗口滚动起来</p> 31 </body> 32 </body> 33 </html>
1 #div1{ 2 width: 100px; 3 height: 100px; 4 background: red; 5 /*position: relative;*//*相对定位对象会占据原来位置*/ 6 position: absolute;/*绝对定位对象可以层叠。absolute相对与父元素body来定位*/ 7 left: 100px; 8 } 9 #div2{ 10 width: 100px; 11 height: 100px; 12 background: green; 13 /*position: relative;*//*相对定位和绝对定位都需要结合left、right、top、bottom使用*/ 14 position: absolute; 15 right: 50px; 16 } 17 #div3{ 18 width: 100px; 19 height: 100px; 20 background: blue; 21 /*position: relative;*/ 22 position: absolute; 23 top: 50px; 24 } 25 #div4{ 26 width: 100px; 27 height: 100px; 28 background: pink; 29 /*position: relative;*/ 30 /*position: absolute;*/ 31 /*position: fixed;*//*滚动窗口时fixed定位的内容不会被滚动，相对于窗口来定位。*/ 32 /*position: static;*//*默认值，没有定位*/ 33 /*bottom: 10px;*/ 34 } 35 #div5{ 36 width: 200px; 37 height:200px; 38 background: rgba(255,0,0,0.5); 39 position: relative; 40 left: 200px; 41 z-index: 3; 42 } 43 #div6{ 44 width: 200px; 45 height:200px; 46 background: rgba(0,255,0,0.5); 47 position: relative; 48 left: 300px; 49 top: -100px; 50 z-index: 2; 51 } 52 #div7{ 53 width: 200px; 54 height:200px; 55 background: rgba(0,0,255,0.5); 56 position: relative; 57 left: 400px; 58 top: -200px; 59 z-index: 1;/*1在最底层*/ 60 } 61 #div8>img{ 62 /*position: fixed;*/ 63 clip: rect(10px,160px,160px,10px);/*只有在position为absolute或fixed时才会起作用，在position为relative或static时无效。*/ 64 } 65 #div9{ 66 width: 100%; 67 height: 500px; 68 background: rgba(100,100,100,0.3); 69 } 70 #p1{ 71 display: inline-block; 72 vertical-align: 20px; 73 } 74 #div10{ 75 width: 100px; 76 height: 100px; 77 background: pink; 78 display: inline-block; 79 vertical-align: text-top;/*可设text-bottom、sub、super*/ 80 } 81 input{ 82 vertical-align: top;/*可设baseline默认、top、middle、bottom、像素、百分比*/ 83 } 84 #div11{ 85 width: 200px; 86 height: 200px; 87 background: red; 88 float: left; 89 } 90 #div12{ 91 width: 200px; 92 height: 200px; 93 background: green; 94 float: left; 95 } 96 #div13{ 97 width: 200px; 98 height: 200px; 99 background: blue; 100 clear: left;/*清除浮动clear:both、left、right、none*/ 101 }