首页 > 代码库 > 原生css3作响应式布局

原生css3作响应式布局

2024-10-28 16:55:40   207人阅读

 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="http://www.mamicode.com/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 }

 

原生css3作响应式布局


联系
我们