1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <link href="css/demo.css" rel="stylesheet" />
7 </head>
8 <body>
9 <!--<div id="d1"></div>-->
10 <div id="header">头部</div>
11 <div id="main">
12 <div id="main-left">主题-左边</div>
13 <div id="main-center">主题-中间</div>
14 <div id="main-right">主题-右边</div>
15 </div>
16 <div id="footer"></div>
17 </body>
18 </html>
1 /*#d1{
2 height:200px;
3 width:400px;
4 border:solid 1px red;
5 线性渐变,开始位置,结束位置,开始颜色,结束颜色,色标(色标位置,色标颜色,可以有多个色标,色标即使颜色过渡点)
6 background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff));
7 径向渐变
8 background:-webkit-gradient(radial,center center,0,center center,460,from(blue),to(red),color-stop(0.6,#fff));
9 }*/
10 *{
11 padding:0px;
12 margin:0px;
13 font-family:"微软雅黑";
14 }
15 #header{
16 height:100px;
17 border:solid 1px red;
18 margin:0px auto;
19 }
20 #main{
21 margin:10px auto;
22 height:400px;
23 }
24 #footer{
25 margin:0px auto;
26 height:100px;
27 border:solid 1px red;
28 }
29 @media screen and (min-width:900px)
30 {
31 #header,#footer{
32 width:800px;
33 }
34 #main{
35 width:800px;
36 height:400px;
37 }
38 #main-left{
39 width:200px;
40 height:400px;
41 border:solid 1px red;
42 float:left;
43 }
44 #main-center
45 {
46 width:394px;
47 height:400px;
48 border:solid 1px red;
49 float:left;
50 }
51 #main-right
52 {
53 width:200px;
54 height:400px;
55 border:solid 1px red;
56 float:left;
57 }
58 }
59 @media screen and (min-width:600px) and (max-width:900px)
60 {
61 #header,#footer
62 {
63 width:600px;
64 }
65 #main
66 {
67 width:600px;
68 height:400px;;
69 }
70 #main-left
71 {
72 width:200px;
73 height:400px;
74 border:solid 1px red;
75 float:left;
76 }
77 #main-center
78 {
79 width:396px;
80 height:400px;
81 border:solid 1px red;
82 float:left;
83 }
84 #main-right
85 {
86 display:none;
87 }
88 }
89 @media screen and (max-width:600px)
90 {
91 #header,#footer
92 {
93 width:300px;
94 }
95 #main
96 {
97 width:300px;
98 height:400px;;
99 }
100 #main-left
101 {
102 display:none;
103 }
104 #main-center
105 {
106 width:300px;
107 height:400px;
108 border:solid 1px red;
109 }
110 #main-right
111 {
112 display:none;
113 }
114 }