响应式布局

 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 <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title></title>
 7     <link href="css/demo3.css" rel="stylesheet" />
 8     <link href="css/pure-min.css" rel="stylesheet" />
 9     <link href="css/grids-responsive-min.css" rel="stylesheet" />
10 </head>
11 <body>
12     <div id="header">头部</div>
13     <div id="mainbody" class="pure-g">
14         <div class=" pure-u-1 pure-u-sm-2-5 pure-u-md-1-5 " id="main-left"><p>左边</p></div>
15         <div class="pure-u-1  pure-u-sm-3-5 pure-u-md-3-5" id="main-center"><p>中间</p></div>
16         <div class="pure-u-1 pure-u-sm-1 pure-u-md-1-5" id="main-right"><p>右边</p></div>
17     </div>
18 </body>
19 </html>

 1 *{
 2     padding:0px;
 3     margin:0px;
 4 }
 5 #header{
 6     width:80%;
 7     margin:0px auto;
 8     padding:20px 0px;
 9     border:solid 1px red;
10 }
11 #mainbody{
12     width:80%;
13     margin:0px auto;
14 }
15 
16 #mainbody p{
17     background-color:#ccc;
18     margin:10px;
19     min-height:100px;
20 }