响应式文档设计

1 <header>页眉</header>
2 <main>
3     <div class="left">left</div>
4     <div class="middle">middle</div>
5     <div class="right">right</div>
6 </main>
7 <footer>footer</footer>

 1 <style type="text/css">
 2         *{margin: 0px;padding: 0px;}
 3         body{ color: #ffffff;text-align: center; font-size: 24px;}
 4         header{width: 100%; height: 40px; background-color: #7f8c8d;}
 5         main{width: 100%;background-color: #ffffff; }
 6         .left,.middle,.right{float: left; width: 400px;height: 200px;}
 7         .left{background-color: #0b76ac;}
 8         .middle{background-color: #0bb59b;}
 9         .right{background-color: #8d341f;}
10         main:after{display: block; content: " "; height: 0; zoom: 1; clear: both;}
11         footer{width: 100%; height: 40px; background-color: #000000;}
12 </style>

1 <header>页眉</header>
2 <main>
3     <div class="col-2">
4         <div class="left">left</div>
5         <div class="middle">middle</div>
6     </div>
7     <div class="right">right</div>
8 </main>
9 <footer>footer</footer>

1 <meta name="viewport" content="width=device-width,initial-scale=1">

 1 <style type="text/css">
 2         *{margin: 0;padding: 0;}
 3         body{ color: #ffffff;text-align: center; }
 4         header{width: 100%; height: 40px; background-color: #7f8c8d;}
 5         main{width: 100%;background-color: #ffffff; }
 6         .left,.middle,.right{ height: 100px;width: 33.3%; float: left;}
 7         .left{background-color: #0b76ac;}
 8         .middle{background-color: #0bb59b;}
 9         .right{background-color: #8d341f;}
10         main:after{display: block; content: " "; height: 0; zoom: 1; clear: both;}
11         footer{width: 100%; height: 40px; background-color: #000000;}
12         @media only screen and (max-width:1024px ) {
13             .left,.middle{width: 50%; float: left;}
14             .right{width: 100%;}
15             .col-2:after{display: block;content: "";clear: both;zoom: 1;visibility: hidden;}
16         }
17         @media only screen and (max-width: 700px) {
18             .left,.middle,.right{width: 100%;}
19         }
20 </style>

1 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
2 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
3 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 1 <div class="container">
 2     <header class="row">
 3         <div class="col-*-12">页眉</div>
 4     </header>
 5     <main class="row">
 6         <div class="left col-lg-4 col-md-5 col-sm-6 col-xs-12">left</div>
 7         <div class="middle col-lg-4 col-md-5 col-sm-6 col-xs-12">middle</div>
 8         <div class="right col-lg-4 col-md-2 col-sm-12 col-xs-12">right</div>
 9     </main>
10     <footer class="row">
11         <div class="col-*-12">footer</div>
12     </footer>
13 </div>

1 <style type="text/css">
2         *{margin: 0;padding: 0;}
3         body{ color: #ffffff;text-align: center; }
4         header{height: 40px; background-color: #7f8c8d;}
5         .left{background-color: #0b76ac;height: 200px;}
6         .middle{background-color: #0bb59b;height: 200px;}
7         .right{background-color: #8d341f;height: 200px;}
8         footer{height: 40px; background-color: #000000;}
9 </style>