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 }
时间： 2024-10-18 16:14:09