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 }
