2016y8m16d

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>清除浮动</title>
 6     <style type="text/css">
 7         .box{
 8             float:left;
 9             100px;
10             height:100px;
11             background:#345fac;
12             margin:10px;
13         }
14         .clear{
15             clear:both;
16         }
17         .left{
18             float:right;
19             100px;
20             height:100px;
21             background:lightblue;
22             margin:10px;
23         }
24         .right{
25             float:right;
26             100px;
27             height:100px;
28             background:lightgreen;
29             margin:10px;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="box">1</div>
35     <div class="box">2</div>
36 
37     <div class="clear"><div>
38 
39     <div class="box">4</div>
40     <div class="box">5</div>
41 
42     <div class="clear"></div>
43 
44     <div class="box">7</div>
45     <div class="box">8</div>
46     
47     <div class="clear"></div>
48 
49     <div class="box">10</div>
50     <div class="box">11</div>
51 
52     <div class="clear"></div>
53 
54     <div class="box">13</div>
55     <div class="box">14</div>
56 
57     <br><br>
58     <div class="left clear">a</div>
59     <div class="right">b</div>
60     <div class="left clear">c</div>
61     <div class="right">d</div>
62 </body>
63 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>固定定位/元素的层叠关系</title>
 6     <style type="text/css">
 7         .box{
 8             100px;
 9             height:100px;
10             background:red;
11             position:fixed;
12             right:100px; 
13             bottom:100px;
14         }
15         .index/* :first-of-type */{
16             400px;
17             height:400px;
18             background:blue;
19             position:absolute;
20             left:10;
21             top:10;
22             z-index:9999;
23         }
24         .z-index{
25             400px;
26             height:400px;
27             background:lightblue;
28             position:absolute;
29             left:40px;
30             top:40px;
31             z-index:9991;
32         }
33     </style>
34 </head>
35 <body>
36     
37     <div class="index"></div>
38     <div class="z-index"></div>
39     <div class="box">固定定位</div>
40 </body>
41 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>二列布局</title>
 6     <style type="text/css">
 7         div{
 8             1000px;
 9             height:100px;
10             background:#ccc;
11             /* border:1px solid #333; */
12             margin:0 auto; 
13         }
14         .centent{
15             height:500px;
16         }
17         .left{
18             300px;
19             height:500px;
20             float:left; 
21             background:lightyellow;
22         }
23         .right{
24             700px;
25             height:500px;
26             float:left; 
27             background:green;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="header"></div>
33     <div class="centent">
34         <div class="left"></div>
35         <div class="right"></div>
36     </div>
37     <div class="footer"></div>
38 </body>
39 </html>