1  2  3  4 
      5      6     
      7  8  9     
     10     
     
      头部
     
11     
     
      12         
      
       主题-左边
      
13         
      
       主题-中间
      
14         
      
       主题-右边
      
15     
     
16     
     
17 18 

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-left101     {102         display:none;103     }104     #main-center105     {106         width:300px;107         height:400px;108         border:solid 1px red;109     }110     #main-right111     {112         display:none;113     }114 }