【探索HTML5第二弹04】响应式布局（上），让我们一起来响应式布局吧

前言

第一次看到响应式布局这个东西的时候，我还以为又出了新东西呢，稍微研究了下才发现其实也是现有资源的组合而出的创新，中国什么时候也搞一个这种创新呢？

所谓响应式布局，大意是在不同设备上（不同尺寸下）都能以比较合理的方式显示，大家千万不要觉得iphone上的显示感觉还不差，我们就说说博客园吧，其实园子该改成响应式布局，只不过要花点功夫。

我们首先进入博客园后，手机对整个页面是有一定缩放的，所以看上去还是全屏呢，然后你要看其中一个内容还要滑大，左边完了要看右边又要滑过去，哎真是费力不讨好啊，不注意点到一个a标签又不见了，所以这真不是比较友好的界面。

响应式布局的提出是比较有意思的，根据不同的尺寸做不同的显示，甚至在小尺寸的情况下一些东西不让他显示，所以在各种屏幕上表现的都比较不错。

在前端界有个非常出名的网站叫做禅意花园，我个人感觉响应式布局的出现与之有异曲同工之妙，都是同样的html结构，但是在不同情况下显示便不一样了

Media Query（媒介查询）

在这两天的学习中，我感觉他就是响应式布局的主角了，能根据不同的尺寸加载不同的css样式，我们要做的就是在相同的html结构下，用css控制合适的显示即可。

 1 <style type="text/css">
 2     #container { width: 960px; margin: auto; }
 3     #wrap { width: 740px; float: left; }
 4     p { line-height: 600px; text-align: center; font-weight: bold; margin: 0 0 20px 0; }
 5     #main { width: 520px; float: right; background: yellow; }
 6     #sub01 { width: 200px; float: left; background: orange; }
 7     #sub02 { width: 200px; float: right; background: green; }
 8     /*--窗口1000px以上--*/
 9     @media screen and (min- 1000px) 
10     {
11         #container { width: 1000px; }
12         #wrapper { width: 780px; float: left; }
13         #main { width: 560px; float: right; }
14         #sub01 { width: 200px; float: left; background: orange; }
15         #sub02 { width: 200px; float: right; background: green; }
16     }
17      /*--窗口640px以上、999px以下--*/
18     @media screen and (min- 1000px) and (max- 999px)
19     {
20         #container { width: 640px; }
21         #wrapper { width: 640px; float: none; }
22         #main { width: 420px; float: right; }
23         #sub01 { width: 200px; float: left; background: orange; }
24         #sub02 { width: 100%; float: right; background: green; }
25     }
26      /*--窗口639px以下*/
27     @media screen and (min- 1000px) and (max- 999px)
28     {
29         #container { width: 100%; }
30         #wrapper { width: 100%; float: none; }
31         #main { width: 100%; float: right; }
32         #sub01 { width: 100%; float: left; background: orange; }
33         #sub02 { width: 100%; float: right; background: green; }
34     }
35     </style>

这便是基本语法，好了接下来我们来干点有意思的事情，一步一步响应式布局，第一步，我们去网上找点有意思的图片吧。

第一步，准备资源

本来是在网上找了很多资源psd资源的，本来想的是便切图便做来着，但是网上的资源基本都是外国的，而且切图搞起来也很慢，于是折腾了3个小时了，最后还是将原来的东西搞了出来。。。。以下是我原来做过的布局，现在拿出来看看，还是第一个作品呢：

【初探HTML5之使用新标签布局】用html5布局我的博客页！

这个页面明显不是响应式布局，那么我们今天就来修改修改吧。。。

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
  7         h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
  8         html, body { background: none repeat scroll 0 0 #FFFFFF; color: #000000; }
  9         body { background-image: url("http://common.cnblogs.com/Skins/sea/images/back.gif"); font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size: 13px; line-height: 1.5; word-wrap: break-word; }
 10         p { line-height: 1.7;}
 11         a { text-decoration: none; color: #1A8BC8; }
 12         a:visited { color: #1A8BC8; }
 13         li { list-style: none; }
 14         img { border: none;}
 15         footer { text-align: center; color: Gray;}
 16         .c { clear: both;}
 17         .l-h-1 { line-height: 1;}
 18         .f-n { float: none;}
 19         .l { float : left;}
 20         .r { float: right;}
 21         
 22         
 23         .header { background: white url("http://common.cnblogs.com/Skins/sea/images/bg_header.jpg") no-repeat left top; height: 195px; border: 1px dotted #8B8D72; }
 24         .header hgroup{ margin: 50px 0 0 265px;  }
 25         .header h1 a{ font-size: 17px; font-weight: bold; text-decoration: none; color: Black;}
 26         
 27         .nav { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; border-top: none;}
 28         .nav ul{ padding: 5px 0 0 5px; }
 29         .nav li{ display: inline; padding: 5px 5px 0; }
 30         .nav aside { text-align: right; padding: 0 5px 5px;}
 31         
 32         .main { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; padding: 20px;}
 33         .main article header { margin-bottom: 10px; }
 34         .main article header h1{ font-size: 16px; font-weight: bold; }
 35         .main article header h1 a{ color: #1A8BC8; text-decoration: none; }
 36         .main article header h1 time, .main article header h1 span{ font-size: 12px; font-weight:  normal; float: right; }
 37         .main article section h2{ background: none repeat scroll 0 0 #2B6695; border-radius: 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-size: 14px; font-weight: bold; height: 25px; line-height: 25px; margin: 15px 0 !important; padding: 5px 0 5px 20px; text-shadow: 2px 2px 3px #222222; }
 38         .main .book { margin: 10px; }
 39         .main .book header { border-bottom: 1px solid  #2B6695; }
 40         .main .book .author { font-weight: bold;}
 41         .main .book h3 { background: #2B6695; padding: 5px 20px; border-radius: 4px 4px 0 0; display: inline-block; margin-left: 20px; font-weight: bold; color: White; }
 42         
 43         .main .green_channel { border: 1px dotted #8B8D72; padding: 10px 10px ; margin: 10px 0 10px 0; width: 420px;}
 44         .main .green_channel a { margin: 0 2px; display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: bold; color: White; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D") repeat-x scroll 0 0 transparent;}
 45         .main .green_channel .green { background-color: #2DAEBF; }
 46         .main .green_channel .red { background-color: #E33100;}
 47         .main .green_channel .yellow { background-color: #FFB515;}
 48         .main .green_channel .gray { background-color: #EEEEEE; color: #555555;}
 49         .main .green_channel img { vertical-align: -7px;}
 50                 
 51         .main .author_info { display: inline-block; }
 52         .main .author_info .info_txt { display: inline-block; text-decoration: none; font-size: 12px; line-height: 1.5 }
 53         .main .digg { float: right;}
 54         .main .digg div { margin: 0 10px; display: inline-block; color: #075DB3; font-family: Verdana; font-size: 14px; text-align: center;}
 55         .main .digg div.f-n { float: none; display: block;color: gray; font-size: 12px;}
 56         .main .digg .top { background: url("http://static.cnblogs.com/images/upup.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px;}
 57         .main .digg .down { background: url("http://static.cnblogs.com/images/downdown.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px;}
 58        
 59         .aside { position: absolute; left: 20px; top: 105px; width: 220px; border: 1px dotted #8B8D72; background: white;}
 60         .aside .my_info { margin: 10px; line-height: 1.4;}
 61         .aside .side_bar { margin: 10px;}
 62         .aside .side_bar h3{ background: url("http://common.cnblogs.com/Skins/sea/images/bg_listtitle.gif") ; background-repeat: no-repeat; margin: 10px 0; font-weight: bold;}
 63         
 64         .comment { margin: 0 20px 20px 260px;}
 65         .comment h2 { padding: 5px 0;}
 66         .comment li { padding: 5px 15px; margin: 10px 0; border: 1px dotted #8B8D72; background: white; }
 67         .comment li a{ padding: 0 3px; }
 68     </style>
 69 </head>
 70 <body>
 71     <header class="header">
 72         <hgroup>
 73             <h1>
 74                 <a href="http://www.cnblogs.com/yexiaochai/">叶小钗</a></h1>
 75             <h2>
 76                 两年内我会成为国内优秀的web前端工程师！2013-04-15</h2>
 77         </hgroup>
 78     </header>
 79     <nav class="nav">
 80         <ul>
 81             <li><a href="http://www.cnblogs.com/">博客园</a></li>
 82             <li><a href="http://www.cnblogs.com/yexiaochai/">首页</a></li>
 83             <li><a href="http://q.cnblogs.com">博问</a></li>
 84             <li><a href="http://home.cnblogs.com/ing/">闪存</a></li>
 85             <li><a href="http://www.cnblogs.com/yexiaochai/admin/EditPosts.aspx?opt=1">新随笔</a></li>
 86             <li><a href="http://space.cnblogs.com/msg/send/%e5%8f%b6%e5%b0%8f%e9%92%97">联系</a></li>
 87             <li><a href="http://www.cnblogs.com/yexiaochai/rss">订阅<img alt="订阅" src="http://images.cnblogs.com/xml.gif"></a></li>
 88             <li><a href="http://www.cnblogs.com/yexiaochai/admin/EditPosts.aspx">管理</a></li>
 89         </ul>
 90         <!--不知道是否合理-->
 91         <aside>
 92               随笔-20  评论-260  文章-0  trackbacks-0 
 93         </aside>
 94     </nav>
 95     <div class="main">
 96         <article>
 97             <header>
 98                 <h1>
 99                     <a href="#">HTML5书籍推荐</a><time pubdate="pubdate" value="2013-04-15">2013年4月15日</time><span>阅读(1363) 评论(24）</span></h1>
100             </header>
101             <p>
102                 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些
103                 HTML5 技术。<br />
104                 HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。<br />
105                 它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft
106                 Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。<br />
107                 <b>作为前端开发人员你还未学习HTML5?</b>看来你已经OUT了，现在由老夫来推荐几本书籍：</p>
108             <section>
109                 <h2>
110                     书籍推荐</h2>
111                 <article class="book">
112                     <header>
113                         <h3>
114                             HTML5高级程序设计</h3>
115                     </header>
116                     <div class="author">
117                             （荷）柳伯斯，（美）阿伯斯，（美）萨姆 著</div>
118                     <p>
119                         本书首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化，同时揭示了HTML5背后的设计原理．从第2章起，分别围绕构建令人神往的富Web应用，逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、Web
120                         Workers、Storage等API的使用，辅以直观明了的客户端和服务器端示例代码，让开发人员能够迅速理解和掌握新一代Web标准所涵盖的核心技术。本书最后探索了离线Web应用并展望了HTML5未来的发展前景。<br />
121                         本书面向有一定经验的Web应用开发人员，对HTML5及未来Web应用技术发展抱有浓厚兴趣的读者也可以学习参考。
122                     </p>
123                 </article>
124                 <article class="book">
125                     <header>
126                         <h3>
127                             HTML5&CSS3权威指南</h3>
128                     </header>
129                     <div class="author">
130                             陆凌牛</div>
131                     <p>
132                         如果你是一位有前瞻性的Web前端工作者，那么你一定会从《HTML5与CSS3权威指南》中受益，因为它就是专门为你打造的。《HTML 5与CSS 3权威指南》内容系统而全面，详尽地讲解了HTML
133                         5和CSS 3的所有新功能和新特性；技术新颖，所有知识点都紧跟HTML 5与CSS 3的最新发展动态（HTML 5和CSS 3仍在不断完善之中）；实战性强（包含246个示例页面），不仅每个知识点都配有精心设计的小案例（便于动手实践），而且还有两个综合性的案例（体现用HTML
134                         5与CSS 3开发Web应用的思维和方法）。《HTML5与CSS3权威指南》不仅能满足你全面而系统地学习理论知识的需求，还能满足你需要充分实践的需求。</p>
135                 </article>
136                 <article class="book">
137                     <header>
138                         <h3>
139                             Javascript高级程序设计</h3>
140                     </header>
141                     <div class="author">
142                             (美)(Nicholas C.Zakas)扎卡斯</div>
143                     <p>
144                         JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript
145                         标准。JavaScript是目前Web客户端开发的主要编程语言，也是Ajax的核心技术之一。
146                     </p>
147                 </article>
148             </section>
149             <footer>该文章属于叶小钗原创文章，欢迎转载，转载请注明出处</footer>
150         </article>
151         <div class="green_channel">
152             绿色通道： <a class="green" href="javascript:void(0);">好文要顶</a> <a href="javascript:void(0);"
153                 class="red">关注我</a> <a href="javascript:void(0);" class="yellow">收藏该文</a> <a target="_blank"
154                     href="#" class="gray">与我联系</a> <img alt="" src="http://static.cnblogs.com/images/icon_weibo_24.png">
155         </div>
156 
157         <div class="author_info">
158             <a target="_blank" href="http://home.cnblogs.com/u/yexiaochai/">
159                 <img alt="" class="author_avatar" src="http://pic.cnitblog.com/face/u294743.jpg?id=23185449"></a>
160             <div class="info_txt">
161                 <a href="http://home.cnblogs.com/u/yexiaochai/">叶小钗</a><br>
162                 <a href="http://home.cnblogs.com/u/yexiaochai/followees">关注 - 19</a><br>
163                 <a href="http://home.cnblogs.com/u/yexiaochai/followers">粉丝 - 130</a>
164             </div>
165             <div class="l-h-1">
166                 <a href="#">+加关注</a>
167             </div>
168             <div class="c"></div>
169         </div>
170         <div class="digg">
171             <div class="top">6</div>
172             <div class="down">0</div>
173             <div class="f-n">(请您对文章做出评价)</div>
174         </div>
175     </div>
176     <aside class="aside">
177         <div class="my_info">
178             昵称：<a href="http://home.cnblogs.com/u/yexiaochai/">叶小钗</a><br>
179             园龄：<a title="入园时间：2011-04-23" href="http://home.cnblogs.com/u/yexiaochai/">1年11个月</a><br>
180             粉丝：<a href="http://home.cnblogs.com/u/yexiaochai/followers/">130</a><br>
181             关注：<a href="http://home.cnblogs.com/u/yexiaochai/followees/">19</a><div id="p_b_follow">
182             </div>
183             <div id="p_b_ing">
184                 <a href="http://home.cnblogs.com/ing/my/">我的闪存</a></div>
185         </div>
186 
187         <div class="side_bar">
188             <h3>常用链接</h3>
189             <ul>
190                 <li><a href="http://www.cnblogs.com/yexiaochai/MyPosts.html" id="ctl01_rptMainLinks_lnkLinkItem_0">
191                     我的随笔</a></li>
192                 <li><a href="http://www.cnblogs.com/yexiaochai/MyComments.html" id="ctl01_rptMainLinks_lnkLinkItem_1">
193                     我的评论</a></li>
194                 <li><a href="http://www.cnblogs.com/yexiaochai/OtherPosts.html" title="我发表过评论的随笔"
195                     id="ctl01_rptMainLinks_lnkLinkItem_2">我的参与</a></li>
196                 <li><a href="http://www.cnblogs.com/yexiaochai/RecentComments.html" id="ctl01_rptMainLinks_lnkLinkItem_3">
197                     最新评论</a></li>
198                 <li><a href="http://www.cnblogs.com/yexiaochai/tag/" id="ctl01_rptMainLinks_lnkLinkItem_4">
199                     我的标签</a></li>
200             </ul>
201             <h3>随笔分类</h3>
202             <ul>
203                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471015.html"
204                     class="listitem" id="ctl04_CatList_LinkList_0_Link_0">css</a></li>
205                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471013.html"
206                     class="listitem" id="ctl04_CatList_LinkList_0_Link_1">HTML5&amp;CSS3初探</a></li>
207                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471016.html"
208                     class="listitem" id="ctl04_CatList_LinkList_0_Link_2">javascript</a></li>
209                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/309100.html"
210                     class="listitem" id="ctl04_CatList_LinkList_0_Link_3">Java学习(3)</a></li>
211                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/326208.html"
212                     class="listitem" id="ctl04_CatList_LinkList_0_Link_4">Web前端(13)</a></li>
213                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/329149.html"
214                     class="listitem" id="ctl04_CatList_LinkList_0_Link_5">工作点滴(3)</a></li>
215                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/326205.html"
216                     class="listitem" id="ctl04_CatList_LinkList_0_Link_6">设计模式</a></li>
217                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/306145.html"
218                     class="listitem" id="ctl04_CatList_LinkList_0_Link_7">学习感悟(3)</a></li>
219             </ul>
220              <h3>最近评论</h3>
221             <ul>
222                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658242">
223                     1. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
224                 <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658237">@</a>SmileCoder<br>
225                     你目标有点难哦</li>
226                 <li class="recent_comment_author">--叶小钗</li>
227                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658237">
228                     2. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
229                 <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658193">@</a>叶小钗<br>
230                     2年内我一定要成为国内优秀的NET软件工程师</li>
231                 <li class="recent_comment_author">--SmileCoder</li>
232                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658218">
233                     3. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
234                 <li class="recent_comment_body">真正要改变自己不是一件容易的事。</li>
235                 <li class="recent_comment_author">--izhangxu</li>
236                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658196">
237                     4. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
238                 <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658081">@</a>zuiaitianxibi<br>
239                     我一直认为这种题非常2.。。</li>
240                 <li class="recent_comment_author">--叶小钗</li>
241                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658193">
242                     5. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
243                 <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658180">@</a>赵弟栋<br>
244                     哪个是你妹。。。</li>
245                 <li class="recent_comment_author">--叶小钗</li>
246                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658180">
247                     6. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
248                 <li class="recent_comment_body">好久不见了 妹</li>
249                 <li class="recent_comment_author">--赵弟栋</li>
250                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658167">
251                     7. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
252                 <li class="recent_comment_body">加油吧！</li>
253                 <li class="recent_comment_author">--刘玲</li>
254                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658148">
255                     8. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
256                 <li class="recent_comment_body">好吧 支持一下</li>
257                 <li class="recent_comment_author">--clith</li>
258                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658144">
259                     9. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
260                 <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658132">@</a>月漩涡<br>
261                     多谢道友</li>
262                 <li class="recent_comment_author">--叶小钗</li>
263                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658132">
264                     10. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
265                 <li class="recent_comment_body">送你一首<a target="_blank" href="http://bz.5sing.com/1790260.html">初心</a></li>
266                 <li class="recent_comment_author">--月漩涡</li>
267             </ul>
268         </div>
269 
270     </aside>
271 
272     <div class="comment">
273         <h2>
274             评论：</h2>
275         <ul>
276             <li><a href=""># 1楼</a>
277                 <time>2013-04-15 16:48</time>
278                 | <a href="">2013-04-15 16:48</a>
279                 <p>
280                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
281                 <div>
282                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
283                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
284                             class="r">支持(0)</a>
285                 </div>
286             </li>
287             <li><a href=""># 1楼</a>
288                 <time>2013-04-15 16:48</time>
289                 | <a href="">2013-04-15 16:48</a>
290                 <p>
291                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
292                 <div>
293                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
294                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
295                             class="r">支持(0)</a>
296                 </div>
297             </li>
298             <li><a href=""># 1楼</a>
299                 <time>2013-04-15 16:48</time>
300                 | <a href="">2013-04-15 16:48</a>
301                 <p>
302                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
303                 <div>
304                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
305                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
306                             class="r">支持(0)</a>
307                 </div>
308             </li>
309             <li><a href=""># 1楼</a>
310                 <time>2013-04-15 16:48</time>
311                 | <a href="">2013-04-15 16:48</a>
312                 <p>
313                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
314                 <div>
315                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
316                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
317                             class="r">支持(0)</a>
318                 </div>
319             </li>
320             <li><a href=""># 1楼</a>
321                 <time>2013-04-15 16:48</time>
322                 | <a href="">2013-04-15 16:48</a>
323                 <p>
324                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
325                 <div>
326                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
327                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
328                             class="r">支持(0)</a>
329                 </div>
330             </li>
331             <li><a href=""># 1楼</a>
332                 <time>2013-04-15 16:48</time>
333                 | <a href="">2013-04-15 16:48</a>
334                 <p>
335                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
336                 <div>
337                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
338                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
339                             class="r">支持(0)</a>
340                 </div>
341             </li>
342             <li><a href=""># 1楼</a>
343                 <time>2013-04-15 16:48</time>
344                 | <a href="">2013-04-15 16:48</a>
345                 <p>
346                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
347                 <div>
348                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
349                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
350                             class="r">支持(0)</a>
351                 </div>
352             </li>
353         </ul>
354     </div>
355 
356     <footer>版权所有·博客园</footer>
357 </body>
358 </html>

原来的代码

我们注意观察下原来的页面，因为是以margin的方式布局，所以基本看不出来变化呢，虽以这个页面作为响应式布局的练手不太合适，但我们还是做起来看看吧。

各位注意到这里有个很巧妙的地方了吗？

html布局时候我是采用先主体内容，然后是左边的内容，再然后是评论相关，现在我们调整下顺序看看会怎么样：

展示上没有任何变化，因为aside是绝对定位的，现在我们加上点“响应式布局”的东西。。。。

开始响应式布局

1         /*在窗口尺寸在400-799时候我们做一点变化*/
2         @media screen and (min- 1px) and (max- 699px){
3             .header hgroup { margin-left: 0;}
4             .nav { margin-left: 0;}
5             .main { margin-left: 0;}
6             .comment { margin-left: 0;}
7             .aside { width: 100%; position: static; }
8         }

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
  7         h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
  8         html, body { background: none repeat scroll 0 0 #FFFFFF; color: #000000; }
  9         body { background-image: url("http://common.cnblogs.com/Skins/sea/images/back.gif"); font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size: 13px; line-height: 1.5; word-wrap: break-word; }
 10         p { line-height: 1.7; }
 11         a { text-decoration: none; color: #1A8BC8; }
 12         a:visited { color: #1A8BC8; }
 13         li { list-style: none; }
 14         img { border: none; }
 15         footer { text-align: center; color: Gray; }
 16         .c { clear: both; }
 17         .l-h-1 { line-height: 1; }
 18         .f-n { float: none; }
 19         .l { float: left; }
 20         .r { float: right; }
 21         
 22         

 23         .header { background: white url("http://common.cnblogs.com/Skins/sea/images/bg_header.jpg") no-repeat left top; height: 195px; border: 1px dotted #8B8D72; }
 24         .header hgroup { margin: 50px 0 0 265px; }
 25         .header h1 a { font-size: 17px; font-weight: bold; text-decoration: none; color: Black; }
 26         
 27         .nav { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; border-top: none; }
 28         .nav ul { padding: 5px 0 0 5px; }
 29         .nav li { display: inline; padding: 5px 5px 0; }
 30         .nav aside { text-align: right; padding: 0 5px 5px; }
 31         
 32         .main { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; padding: 20px; }
 33         .main article header { margin-bottom: 10px; }
 34         .main article header h1 { font-size: 16px; font-weight: bold; }
 35         .main article header h1 a { color: #1A8BC8; text-decoration: none; }
 36         .main article header h1 time, .main article header h1 span { font-size: 12px; font-weight: normal; float: right; }
 37         .main article section h2 { background: none repeat scroll 0 0 #2B6695; border-radius: 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-size: 14px; font-weight: bold; height: 25px; line-height: 25px; margin: 15px 0 !important; padding: 5px 0 5px 20px; text-shadow: 2px 2px 3px #222222; }
 38         .main .book { margin: 10px; }
 39         .main .book header { border-bottom: 1px solid #2B6695; }
 40         .main .book .author { font-weight: bold; }
 41         .main .book h3 { background: #2B6695; padding: 5px 20px; border-radius: 4px 4px 0 0; display: inline-block; margin-left: 20px; font-weight: bold; color: White; }
 42         
 43         .main .green_channel { border: 1px dotted #8B8D72; padding: 10px 10px; margin: 10px 0 10px 0; width: 420px; }
 44         .main .green_channel a { margin: 0 2px; display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: bold; color: White; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D") repeat-x scroll 0 0 transparent; }
 45         .main .green_channel .green { background-color: #2DAEBF; }
 46         .main .green_channel .red { background-color: #E33100; }
 47         .main .green_channel .yellow { background-color: #FFB515; }
 48         .main .green_channel .gray { background-color: #EEEEEE; color: #555555; }
 49         .main .green_channel img { vertical-align: -7px; }
 50         
 51         .main .author_info { display: inline-block; }
 52         .main .author_info .info_txt { display: inline-block; text-decoration: none; font-size: 12px; line-height: 1.5; }
 53         .main .digg { float: right; }
 54         .main .digg div { margin: 0 10px; display: inline-block; color: #075DB3; font-family: Verdana; font-size: 14px; text-align: center; }
 55         .main .digg div.f-n { float: none; display: block; color: gray; font-size: 12px; }
 56         .main .digg .top { background: url("http://static.cnblogs.com/images/upup.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px; }
 57         .main .digg .down { background: url("http://static.cnblogs.com/images/downdown.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px; }
 58         
 59         .aside { position: absolute; left: 20px; top: 105px; width: 220px; border: 1px dotted #8B8D72; background: white; }
 60         .aside .my_info { margin: 10px; line-height: 1.4; }
 61         .aside .side_bar { margin: 10px; }
 62         .aside .side_bar h3 { background: url("http://common.cnblogs.com/Skins/sea/images/bg_listtitle.gif"); background-repeat: no-repeat; margin: 10px 0; font-weight: bold; }
 63         
 64         .comment { margin: 0 20px 20px 260px; }
 65         .comment h2 { padding: 5px 0; }
 66         .comment li { padding: 5px 15px; margin: 10px 0; border: 1px dotted #8B8D72; background: white; }
 67         .comment li a { padding: 0 3px; }
 68         
 69         /*在窗口尺寸在400-799时候我们做一点变化*/
 70         @media screen and (min- 1px) and (max- 699px){
 71             .header hgroup { margin-left: 0;}
 72             .nav { margin-left: 0;}
 73             .main { margin-left: 0;}
 74             .comment { margin-left: 0;}
 75             .aside { width: 100%; position: static; }
 76         }
 77     </style>
 78 </head>
 79 <body>
 80     <header class="header">
 81         <hgroup>
 82             <h1>
 83                 <a href="http://www.cnblogs.com/yexiaochai/">叶小钗</a></h1>
 84             <h2>
 85                 两年内我会成为国内优秀的web前端工程师！2013-04-15</h2>
 86         </hgroup>
 87     </header>
 88     <nav class="nav">
 89         <ul>
 90             <li><a href="http://www.cnblogs.com/">博客园</a></li>
 91             <li><a href="http://www.cnblogs.com/yexiaochai/">首页</a></li>
 92             <li><a href="http://q.cnblogs.com">博问</a></li>
 93             <li><a href="http://home.cnblogs.com/ing/">闪存</a></li>
 94             <li><a href="http://www.cnblogs.com/yexiaochai/admin/EditPosts.aspx?opt=1">新随笔</a></li>
 95             <li><a href="http://space.cnblogs.com/msg/send/%e5%8f%b6%e5%b0%8f%e9%92%97">联系</a></li>
 96             <li><a href="http://www.cnblogs.com/yexiaochai/rss">订阅<img alt="订阅" src="http://images.cnblogs.com/xml.gif"></a></li>
 97             <li><a href="http://www.cnblogs.com/yexiaochai/admin/EditPosts.aspx">管理</a></li>
 98         </ul>
 99         <!--不知道是否合理-->
100         <aside>
101               随笔-20  评论-260  文章-0  trackbacks-0 
102         </aside>
103     </nav>
104     <div class="main">
105         <article>
106             <header>
107                 <h1>
108                     <a href="#">HTML5书籍推荐</a><time pubdate="pubdate" value="2013-04-15">2013年4月15日</time><span>阅读(1363)
109                         评论(24）</span></h1>
110             </header>
111             <p>
112                 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些
113                 HTML5 技术。<br />
114                 HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。<br />
115                 它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft
116                 Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。<br />
117                 <b>作为前端开发人员你还未学习HTML5?</b>看来你已经OUT了，现在由老夫来推荐几本书籍：</p>
118             <section>
119                 <h2>
120                     书籍推荐</h2>
121                 <article class="book">
122                     <header>
123                         <h3>
124                             HTML5高级程序设计</h3>
125                     </header>
126                     <div class="author">
127                         （荷）柳伯斯，（美）阿伯斯，（美）萨姆 著</div>
128                     <p>
129                         本书首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化，同时揭示了HTML5背后的设计原理．从第2章起，分别围绕构建令人神往的富Web应用，逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、Web
130                         Workers、Storage等API的使用，辅以直观明了的客户端和服务器端示例代码，让开发人员能够迅速理解和掌握新一代Web标准所涵盖的核心技术。本书最后探索了离线Web应用并展望了HTML5未来的发展前景。<br />
131                         本书面向有一定经验的Web应用开发人员，对HTML5及未来Web应用技术发展抱有浓厚兴趣的读者也可以学习参考。
132                     </p>
133                 </article>
134                 <article class="book">
135                     <header>
136                         <h3>
137                             HTML5&CSS3权威指南</h3>
138                     </header>
139                     <div class="author">
140                         陆凌牛</div>
141                     <p>
142                         如果你是一位有前瞻性的Web前端工作者，那么你一定会从《HTML5与CSS3权威指南》中受益，因为它就是专门为你打造的。《HTML 5与CSS 3权威指南》内容系统而全面，详尽地讲解了HTML
143                         5和CSS 3的所有新功能和新特性；技术新颖，所有知识点都紧跟HTML 5与CSS 3的最新发展动态（HTML 5和CSS 3仍在不断完善之中）；实战性强（包含246个示例页面），不仅每个知识点都配有精心设计的小案例（便于动手实践），而且还有两个综合性的案例（体现用HTML
144                         5与CSS 3开发Web应用的思维和方法）。《HTML5与CSS3权威指南》不仅能满足你全面而系统地学习理论知识的需求，还能满足你需要充分实践的需求。</p>
145                 </article>
146                 <article class="book">
147                     <header>
148                         <h3>
149                             Javascript高级程序设计</h3>
150                     </header>
151                     <div class="author">
152                         (美)(Nicholas C.Zakas)扎卡斯</div>
153                     <p>
154                         JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript
155                         标准。JavaScript是目前Web客户端开发的主要编程语言，也是Ajax的核心技术之一。
156                     </p>
157                 </article>
158             </section>
159             <footer>该文章属于叶小钗原创文章，欢迎转载，转载请注明出处</footer>
160         </article>
161         <div class="green_channel">
162             绿色通道： <a class="green" href="javascript:void(0);">好文要顶</a> <a href="javascript:void(0);"
163                 class="red">关注我</a> <a href="javascript:void(0);" class="yellow">收藏该文</a> <a target="_blank"
164                     href="#" class="gray">与我联系</a>
165             <img alt="" src="http://static.cnblogs.com/images/icon_weibo_24.png">
166         </div>
167         <div class="author_info">
168             <a target="_blank" href="http://home.cnblogs.com/u/yexiaochai/">
169                 <img alt="" class="author_avatar" src="http://pic.cnitblog.com/face/u294743.jpg?id=23185449"></a>
170             <div class="info_txt">
171                 <a href="http://home.cnblogs.com/u/yexiaochai/">叶小钗</a><br>
172                 <a href="http://home.cnblogs.com/u/yexiaochai/followees">关注 - 19</a><br>
173                 <a href="http://home.cnblogs.com/u/yexiaochai/followers">粉丝 - 130</a>
174             </div>
175             <div class="l-h-1">
176                 <a href="#">+加关注</a>
177             </div>
178             <div class="c">
179             </div>
180         </div>
181         <div class="digg">
182             <div class="top">
183                 6</div>
184             <div class="down">
185                 0</div>
186             <div class="f-n">
187                 (请您对文章做出评价)</div>
188         </div>
189     </div>
190     <div class="comment">
191         <h2>
192             评论：</h2>
193         <ul>
194             <li><a href=""># 1楼</a>
195                 <time>2013-04-15 16:48</time>
196                 | <a href="">2013-04-15 16:48</a>
197                 <p>
198                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
199                 <div>
200                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
201                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
202                             class="r">支持(0)</a>
203                 </div>
204             </li>
205             <li><a href=""># 1楼</a>
206                 <time>2013-04-15 16:48</time>
207                 | <a href="">2013-04-15 16:48</a>
208                 <p>
209                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
210                 <div>
211                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
212                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
213                             class="r">支持(0)</a>
214                 </div>
215             </li>
216             <li><a href=""># 1楼</a>
217                 <time>2013-04-15 16:48</time>
218                 | <a href="">2013-04-15 16:48</a>
219                 <p>
220                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
221                 <div>
222                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
223                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
224                             class="r">支持(0)</a>
225                 </div>
226             </li>
227             <li><a href=""># 1楼</a>
228                 <time>2013-04-15 16:48</time>
229                 | <a href="">2013-04-15 16:48</a>
230                 <p>
231                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
232                 <div>
233                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
234                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
235                             class="r">支持(0)</a>
236                 </div>
237             </li>
238             <li><a href=""># 1楼</a>
239                 <time>2013-04-15 16:48</time>
240                 | <a href="">2013-04-15 16:48</a>
241                 <p>
242                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
243                 <div>
244                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
245                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
246                             class="r">支持(0)</a>
247                 </div>
248             </li>
249             <li><a href=""># 1楼</a>
250                 <time>2013-04-15 16:48</time>
251                 | <a href="">2013-04-15 16:48</a>
252                 <p>
253                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
254                 <div>
255                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
256                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
257                             class="r">支持(0)</a>
258                 </div>
259             </li>
260             <li><a href=""># 1楼</a>
261                 <time>2013-04-15 16:48</time>
262                 | <a href="">2013-04-15 16:48</a>
263                 <p>
264                     感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
265                 <div>
266                     <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
267                         删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
268                             class="r">支持(0)</a>
269                 </div>
270             </li>
271         </ul>
272     </div>
273     <aside class="aside">
274         <div class="my_info">
275             昵称：<a href="http://home.cnblogs.com/u/yexiaochai/">叶小钗</a><br>
276             园龄：<a title="入园时间：2011-04-23" href="http://home.cnblogs.com/u/yexiaochai/">1年11个月</a><br>
277             粉丝：<a href="http://home.cnblogs.com/u/yexiaochai/followers/">130</a><br>
278             关注：<a href="http://home.cnblogs.com/u/yexiaochai/followees/">19</a><div id="p_b_follow">
279             </div>
280             <div id="p_b_ing">
281                 <a href="http://home.cnblogs.com/ing/my/">我的闪存</a></div>
282         </div>
283         <div class="side_bar">
284             <h3>
285                 常用链接</h3>
286             <ul>
287                 <li><a href="http://www.cnblogs.com/yexiaochai/MyPosts.html" id="ctl01_rptMainLinks_lnkLinkItem_0">
288                     我的随笔</a></li>
289                 <li><a href="http://www.cnblogs.com/yexiaochai/MyComments.html" id="ctl01_rptMainLinks_lnkLinkItem_1">
290                     我的评论</a></li>
291                 <li><a href="http://www.cnblogs.com/yexiaochai/OtherPosts.html" title="我发表过评论的随笔"
292                     id="ctl01_rptMainLinks_lnkLinkItem_2">我的参与</a></li>
293                 <li><a href="http://www.cnblogs.com/yexiaochai/RecentComments.html" id="ctl01_rptMainLinks_lnkLinkItem_3">
294                     最新评论</a></li>
295                 <li><a href="http://www.cnblogs.com/yexiaochai/tag/" id="ctl01_rptMainLinks_lnkLinkItem_4">
296                     我的标签</a></li>
297             </ul>
298             <h3>
299                 随笔分类</h3>
300             <ul>
301                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471015.html"
302                     class="listitem" id="ctl04_CatList_LinkList_0_Link_0">css</a></li>
303                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471013.html"
304                     class="listitem" id="ctl04_CatList_LinkList_0_Link_1">HTML5&amp;CSS3初探</a></li>
305                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471016.html"
306                     class="listitem" id="ctl04_CatList_LinkList_0_Link_2">javascript</a></li>
307                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/309100.html"
308                     class="listitem" id="ctl04_CatList_LinkList_0_Link_3">Java学习(3)</a></li>
309                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/326208.html"
310                     class="listitem" id="ctl04_CatList_LinkList_0_Link_4">Web前端(13)</a></li>
311                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/329149.html"
312                     class="listitem" id="ctl04_CatList_LinkList_0_Link_5">工作点滴(3)</a></li>
313                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/326205.html"
314                     class="listitem" id="ctl04_CatList_LinkList_0_Link_6">设计模式</a></li>
315                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/306145.html"
316                     class="listitem" id="ctl04_CatList_LinkList_0_Link_7">学习感悟(3)</a></li>
317             </ul>
318             <h3>
319                 最近评论</h3>
320             <ul>
321                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658242">
322                     1. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
323                 <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658237">@</a>SmileCoder<br>
324                     你目标有点难哦</li>
325                 <li class="recent_comment_author">--叶小钗</li>
326                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658237">
327                     2. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
328                 <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658193">@</a>叶小钗<br>
329                     2年内我一定要成为国内优秀的NET软件工程师</li>
330                 <li class="recent_comment_author">--SmileCoder</li>
331                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658218">
332                     3. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
333                 <li class="recent_comment_body">真正要改变自己不是一件容易的事。</li>
334                 <li class="recent_comment_author">--izhangxu</li>
335                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658196">
336                     4. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
337                 <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658081">@</a>zuiaitianxibi<br>
338                     我一直认为这种题非常2.。。</li>
339                 <li class="recent_comment_author">--叶小钗</li>
340                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658193">
341                     5. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
342                 <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658180">@</a>赵弟栋<br>
343                     哪个是你妹。。。</li>
344                 <li class="recent_comment_author">--叶小钗</li>
345                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658180">
346                     6. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
347                 <li class="recent_comment_body">好久不见了 妹</li>
348                 <li class="recent_comment_author">--赵弟栋</li>
349                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658167">
350                     7. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
351                 <li class="recent_comment_body">加油吧！</li>
352                 <li class="recent_comment_author">--刘玲</li>
353                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658148">
354                     8. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
355                 <li class="recent_comment_body">好吧 支持一下</li>
356                 <li class="recent_comment_author">--clith</li>
357                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658144">
358                     9. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
359                 <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658132">@</a>月漩涡<br>
360                     多谢道友</li>
361                 <li class="recent_comment_author">--叶小钗</li>
362                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658132">
363                     10. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
364                 <li class="recent_comment_body">送你一首<a target="_blank" href="http://bz.5sing.com/1790260.html">初心</a></li>
365                 <li class="recent_comment_author">--月漩涡</li>
366             </ul>
367         </div>
368     </aside>
369     <footer>版权所有·博客园</footer>
370 </body>
371 </html>

完整代码

大家知道添加以上代码后出现了什么样的事情么？？？

我神奇的在这里拖动浏览器得到了自己想要的这一幕，诚然，这算不得什么，但是至少我可以自豪的说我今天响应式布局了。。。。当然我们若是再加一点动画的元素的话。。。

        * { transition: all 1s;}

这句话将带来动画效果，若是用得好的话是很不错的哟！！！

预览地址

http://sandbox.runjs.cn/show/pdcmc2pz

前段时间有圆友指导我们写的代码可以直接预览啦。。。真的不错啊。

深入研究一把

以一句话评价我第一个响应式布局：浅，实在是浅到没边了，本来也想装下高手，找个图做做来的说，但是真没找到什么合适的图，而且做响应式布局时候，应该会做多张设计图吧，今天至少是没可能这么干了，所以我们现在来看看别人做的：

http://template.precise.itembridge.com/

这是一个不折不扣的优秀响应式布局的网站，我们现在来“翻译翻译”，我给翻译翻译。。。。人家这可是真资格的响应式布局网站，我这水货也说不出来什么，就简单看看其css吧。

他这里方便管理，单独引入了一个关于响应式布局的css：【CSS我未写进来，有点大】洋洋洒洒几千行啊，我这个页面加载速度都被他拖垮了所以就给删除了。。。

由此可以看出要做响应式布局的代价还是很大的，但是我说了这么多还是没有什么帮助呢，那只好将我做的第二个布局拿出来试试手了。。。。

【实战HTML5与CSS3】免费制作威客页面啦（附源码）

我们这里将原来的代码改一改，去掉多余的东西，方便操作,毫无疑问，这个图和响应式布局没有一毛钱关系，于是我们现在需要操作一下下，代码就直接写到页面中了，看看怎么才能把它变成响应式布局。

百分比布局

以现在响应式布局的方式来说，固定宽度布局不太可取，我这里需要将原来的网页改为百分比布局，这里有一个公式：

目标元素的宽带/上下文元素的宽带=百分比宽度

原来的代码为了方便今天的课题，我将原来的很多代码都删除了，最后变成了这样子：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <link href="css/style.css" rel="stylesheet" type="text/css" />
  6     <style type="text/css">
  7     * { transition: all 1s;}
  8     /*在窗口尺寸在400-799时候我们做一点变化*/
  9         @media screen and (min- 960px) and (max- 1000px){
 10             .wraper { width: 100%; }
 11         }
 12     
 13     </style>
 14 </head>
 15 <body>
 16     <div class="wraper">
 17         <header id="header">
 18             <h1 class="logo">
 19                 <img src="images/logo.gif" />
 20             </h1>
 21             
 22             <div class="search">
 23                 <input type="text" placeholder="请输入关键字" class="noborder" />
 24                 <span class="search_bt">搜索</span>
 25             </div>
 26             <nav class="nav">
 27                 <ul>
 28                     <li><a href="javascript:'">首 页</a><i></i></li>
 29                     <li><a href="javascript:'">观 点</a><i></i></li>
 30                     <li><a href="javascript:'">深 度</a><i></i></li>
 31                     <li><a href="javascript:'">作 者</a><i></i></li>
 32                     <li><a href="javascript:'">标 签</a><i></i></li>
 33                     <li><a href="javascript:'">钛爱铂</a><i></i></li>
 34                     <li><a href="javascript:'">我的钛度</a><i></i></li>
 35                 </ul>
 36             </nav>
 37             <div class="top_show clear">
 38                 <div class="fl">
 39                     当前位置：<a href="javascript:'">首 页</a></div>
 40                 <div class="fr">
 41                     热门：<a href="javascript:'">新媒体</a> <a href="javascript:'">一周策划</a> <a href="javascript:'">
 42                         新创业者说</a> <a href="javascript:'">妙史</a> <a href="javascript:'">钛能吐槽</a></div>
 43                 <div class="clear">
 44                 </div>
 45             </div>
 46         </header>
 47         <section id="main">
 48             <div class="box_top">
 49                 <h2>
 50                     "虚拟运营商"英国样板解剖：乐购乐购！</h2>
 51                 <p>
 52                     身处一个移动电话渗透率高达180%以上的成熟市场，美工零售巨头Tesco（乐购）的电信子公司，却通过零售商特有优势实现了持续的逆势增长...</p>
 53                 <div class="img">
 54                     <img src="pics/01.png" />
 55                 </div>
 56                 <div class="mtb4 textr pdlr10">
 57                     标签：<a href="javascript:'">头条</a>,<a href="javascript:'">投稿</a>,<a href="javascript:'">电商</a>,<a
 58                         href="javascript:'">虚拟运营商</a> 评论：（<a href="javascript:'">12</a>） 2013年04月18日8:31
 59                     <a class="fontb" href="javascript:'">【前往头条】</a></div>
 60             </div>
 61             <div class="box_img">
 62                 <ul>
 63                     <li><a href="http://www.tmtpost.com/34495.html">
 64                         <img src="pics/img01.jpg" />
 65                         <span>一个IT奶爸的移动医疗随想</span></a></li>
 66                     <li><a href="http://www.tmtpost.com/34515.html">
 67                         <img src="pics/img02.jpg" />
 68                         <span>知乎安卓版客户端推“一个”模式：慢有慢的理由</span></a></li>
 69                     <li><a href="http://www.tmtpost.com/34276.html">
 70                         <img src="pics/img03.jpg" />
 71                         <span>任正非抵抗危机</span></a></li>
 72                 </ul>
 73                 <ul class="pager">
 74                     <li class="sec"></li>
 75                     <li></li>
 76                     <li></li>
 77                 </ul>
 78             </div>
 79             <section class="article_list">
 80                 <article>
 81                     <i class="icon"><span>0</span></i>
 82                     <img src="pics/ar01.jpg" />
 83                     <h2>
 84                         谷歌眼镜的商业模式：风险转嫁给开发者
 85                     </h2>
 86                     <p>
 87                         谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。
 88                     </p>
 89                     <footer>
 90                         <span class="fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business">
 91                             商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a>
 92                         </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05
 93                             11:11 </span>
 94                         <div class="clear">
 95                         </div>
 96                     </footer>
 97                 </article>
 98                 <article>
 99                     <i class="icon"><span>0</span></i>
100                     <img src="pics/ar02.jpg" />
101                     <h2>
102                         为何众筹模式无法逆袭好莱坞娱乐工业帝国
103                     </h2>
104                     <p>
105                         独立制作、众筹集资，美剧制作者和独立艺术家看似建立起了全新的传媒生态系统，威胁到娱乐产业内容生产的传统模式，但仍无法逆袭，《纸牌屋》和《权利游戏》代表的“大制作”远未终结。
106                     </p>
107                     <footer>
108                         <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business">
109                             商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a>
110                         </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05
111                             11:11 </span>
112                         <div class="clear">
113                         </div>
114                     </footer>
115                 </article>
116                 <footer>
117                     <ul class="pager">
118                         <li class="total"><a href="javascript:'">页数:1/68</a></li>
119                         <li><a href="javascript:'">1</a></li>
120                         <li><a href="javascript:'">2</a></li>
121                         <li><a href="javascript:'">3</a></li>
122                         <li><a href="javascript:'">4</a></li>
123                         <li><a href="javascript:'">5</a></li>
124                         <li><a href="javascript:'">6</a></li>
125                         <li><a href="javascript:'">7</a></li>
126                         <li>...</li>
127                         <li><a href="javascript:'">68</a></li>
128                     </ul>
129                 </footer>
130             </section>
131             <div class="clear">
132             </div>
133         </section>
134         <aside id="aside">
135             <div class="box">
136                 <h2 class="header">
137                     特色专栏</h2>
138                 <div class="main por">
139                    
140                     <ul class="list">
141                         <li>
142                             <img src="pics/aside01.png" />
143                             <h3>
144                                 创业者法律课堂--创投法务后花园</h3>
145                             创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li>
146                         <li class="split ">
147                             <h3>
148                                 商场无姐妹，一场忽视“敬业竟...</h3>
149                             肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li>
150                         <li>
151                             <img src="pics/aside02.png" />
152                             <h3>
153                                 创业者法律课堂</h3>
154                             创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li>
155                         <li class="split ">
156                             <h3>
157                                 商场无姐妹，一场忽视“敬业竟...</h3>
158                             肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li>
159                     </ul>
160                     <div class="pager">
161                         <a href="javascript:'"><--上一篇</a> <a href="javascript:'">下一篇--></a>
162                     </div>
163                 </div>
164             </div>
165             <div class="mt15 backwhite textc pdtb10 boxborder">
166                 <a title="移动端的媒体未来" href="/tag/mediafuture">
167                     <img src="pics/event.jpg" />
168                 </a>
169             </div>
170             
171             <div class="box mt15 comment">
172                 <h2 class="header">
173                     经常评论</h2>
174                 <div class="main por">
175                     <ul class="list">
176                         <li class="split ">
177                             <img src="pics/p01.jpg" />
178                             <a href="http://www.tmtpost.com/author/yangjin" rel="nofollow external" class="rc-reviewer">
179                                 葱葱</a> 嘿嘿作者说的很形象，这就是各种圈子里“皇上不急太监急”的写照。不过，观点无价值的问题我不同意，观点不一定“对了”才有价值，我相信从实证延伸出来的探讨，属于社会科学的范畴，而社会科学的研究不是用实验说话的，这个产品死了？就没意义了？反倒在互联网发展的历史上意义重大。社会科学，就是通过一个一个实证去探讨，众多博客就为此做出了贡献。
180                             <div class="end mtb6">
181                                 原文：<a href="http://www.tmtpost.com/34430.html" rel="nofollow" class="rc-post">你的观点是什么，重要吗？</a>
182                             </div>
183                         </li>
184                         <li class="split ">
185                             <img src="pics/p02.jpg" />
186                             <a href="http://www.tmtpost.com/author/yangjin" rel="nofollow external" class="rc-reviewer">
187                                 一个卖脑子的人</a> 企业真正的危机往往来自内部而不是外部，在走向不断成功的路上胜利往往被一场突来的危机打败而走向落寞，根本原因在于企业失去了激情，创新，危机感的企业文化，而被小富即安的文化所代替。推荐朋友们认真阅读此文，审视在此多事之秋时期，我们应如何应对？
188                             <div class="end mtb6">
189                                 原文：<a href="http://www.tmtpost.com/34430.html" rel="nofollow" class="rc-post">任正非抵抗危机</a>
190                             </div>
191                         </li>
192                         
193                     </ul>
194                 </div>
195             </div>
196             <div class="clear">
197             </div>
198         </aside>
199         <div class="clear">
200         </div>
201         <div class="partner">
202             <h3>
203                 合作伙伴</h3>
204             <ul>
205                 <li><a target="_blank" title="新浪科技" href="http://tech.sina.com.cn/">新浪科技</a></li>
206                 <li><a target="_blank" title="腾讯科技" href="http://tech.qq.com/">腾讯科技</a></li>
207                 <li><a target="_blank" title="网易科技" href="http://tech.163.com/">网易科技</a></li>
208                 <li><a target="_blank" title="搜狐IT" href="http://it.sohu.com/">搜狐IT</a></li>
209                 <li><a target="_blank" title="凤凰科技" href="http://tech.ifeng.com/">凤凰科技</a></li>
210                 <li><a target="_blank" title="阿里云" href="http://cnrdn.com/uGj5">阿里云</a></li>
211                 <li><a target="_blank" title="DoNews" href="http://www.donews.com">DoNews</a></li>
212                 <li><a target="_blank" title="经理人分享" href="http://www.managershare.com/">经理人分享</a></li>
213                 <li><a target="_blank" title="创业家" href="http://www.iheima.com">i黑马</a></li>
214                 <li><a target="_blank" title="i天下网商" href="http://i.wshang.com/">i天下网商</a></li>
215                 <li><a target="_blank" title="鲜果网" href="http://www.xianguo.com/">鲜果网</a></li>
216                 <li><a target="_blank" title="中国网科技" href="http://tech.china.com.cn/">中国网科技</a></li>
217                 <li><a target="_blank" title="站长之家" href="http://www.chinaz.com/">站长之家</a></li>
218                 <li><a target="_blank" title="和讯科技" href="http://tech.hexun.com/">和讯科技</a></li>
219                 <li><a target="_blank" title="新华网科技" href="http://www.news.cn/tech/">新华网科技</a></li>
220                 <li><a target="_blank" title="CNET科技资讯" href="http://www.cnetnews.com.cn/">CNET科技资讯</a></li>
221                 <li><a target="_blank" title="财新网" href="http://www.caixin.com/">财新网</a></li>
222                 <li><a target="_blank" title="网易云阅读" href="http://yuedu.163.com/contentcenter">网易云阅读</a></li>
223                 <li><a target="_blank" title="天地互联" href="http://wwwconferencecn">天地互联</a></li>
224                 <li><a target="_blank" title="光明网科技" href="http://it.gmw.cn/">光明网科技</a></li>
225                 <li><a target="_blank" title="通信产业网" href="http://www.ccidcom.com/">通信产业网</a></li>
226                 <li><a target="_blank" href="http://www.itdalao.com">IT大佬网</a></li>
227                 <li><a target="_blank" title="搜课网" href="http://zxx.sooker.com/">搜课网</a></li>
228             </ul>
229         </div>
230     </div>
231     <footer id="footer">
232         <div class="wraper">
233             <a class="aliyun" target="_blank" href="http://cnrdn.com/3pe5">
234                 <img title="阿里云计算" alt="" src="http://www.tmtpost.com/wp-content/themes/newskin/images/ali-logo.gif">
235             </a><a href="/about_tmtpost">关于我们</a> | <a href="/jobs" rel="nofollow">加入我们</a>
236             | <a href="/contact" rel="nofollow">联系我们</a> | <a href="/report" rel="nofollow">寻求报道</a>
237             | <a href="/tougao1" rel="nofollow">投稿通道</a>
238             <p>
239                 Copyright &copy; 2011-2013 <a href="http://www.tmtpost.com/" target="_blank">钛媒体 TMTpost.com</a>.
240                 All Rights Reserved. 京ICP备12042878号 |
241             </p>
242         </div>
243     </footer>
244 </body>
245 </html>

现在HTML

代码少了2/3呢，好了我们来简单看看代码先，最外层为wraper布局，设置了宽度为960px，这里先不管他了，我们看看其他的地方，将有数字的全部变为百分比，最后形成的css是这样的：（本来字体该使用em的，我这里就暂时不管了，留待下次解决吧）

PS：真要动手的时候你会发现还是有点不好搞的。。。

  1 body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select { margin: 0; padding: 0; }
  2 body { background: #e5e5e5 url("../images/bg_body.gif") ; font: 12px "宋体","Arial Narrow",HELVETICA;   font-family: "微软雅黑",Tahoma,Verdana,Geneva,sans-serif; color: #666666; word-break: break-all; word-wrap: break-word; }
  3 a { color: #2D374B; text-decoration: none; }
  4 a:hover { color: #CD0200; text-decoration: underline; }
  5 em { font-style: normal; }
  6 li { list-style: none outside none; }
  7 img { border: 0 none; vertical-align: middle;  }
  8 table { border-collapse: collapse; border-spacing: 0; }
  9 p { word-wrap: break-word; }
 10 .block { display: block; }
 11 .poa { position: absolute; }
 12 .por { position: relative; }
 13 .noborder { border: 0 none; }
 14 .clear { clear: both; }
 15 .fl { float: left; }
 16 .fr { float: right; }
 17 .fn { float: none; }
 18 .fontb { font-weight: bold; }
 19 .textl { text-align: left;}
 20 .textc { text-align: center;}
 21 
 22 .textr { text-align: right;}
 23 .mtb2 { margin: 2px 0;}
 24 .mtb4 { margin: 4px 0;}
 25 .mtb6 { margin: 6px 0;}
 26 
 27 .mt8 { margin-top: 8px; }
 28 .mt12 { margin-top: 12px; }
 29 .mt15 { margin-top: 15px; }
 30 .mt10 { margin-top: 10px; }
 31 
 32 .mb10 { margin-bottom: 10px; }
 33 .pd10 { padding: 10px;}
 34 .pdb10 {  padding-bottom: 10px;}
 35 
 36 .pdtb5 { padding-top: 5px; padding-bottom: 5px; }
 37 .pdtb10 { padding-top: 10px; padding-bottom: 10px; }
 38 .pdlr5 { padding-left: 5px; padding-right: 5px; }
 39 .pdlr10 { padding-left: 10px; padding-right: 10px; }
 40 .backwhite { background-color: White; }
 41 .boxborder { border: 1px solid #c9c9c9;}
 42 .bordersolid { border-style: solid;}
 43 .button { background: -moz-linear-gradient(top, #fafafa, #e7e7e7); background: -webkit-linear-gradient(top, #fafafa, #e7e7e7); background: -o-linear-gradient(top, #fafafa, #e7e7e7); background: linear-gradient(top, #fafafa, #e7e7e7); display: inline-block; border: 1px solid #cdcdcd; padding: 4px 10px; border-radius: 5px;} 
 44 
 45 
 46 .wraper { width: 960px; margin: 0 auto;}
 47 #header { position: relative;  }
 48 .logo { display: inline-block; margin-top: 14px; }
 49 
 50 
 51 .search { position: absolute; right: 0; top: 55px; }
 52 .search input { height: 25px; line-height: 25px; background-color: #b6b6b6; }
 53 .search_bt { text-indent: -99999px; display: inline-block; background: #5f5f5f url("../images/icons.gif") -4px -34px; width: 27px; height: 25px; cursor: pointer; float: right;  margin-top: -1px;}
 54 .nav { height: 38px; background: #707070 url("../images/bg_title.gif"); margin-top: 10px; }
 55 .nav li{ display: inline-block; padding: 0 20px; text-align: center; position: relative; }
 56 .nav a{ color: White; font-size: 14px; font-weight: bold; line-height: 38px; }
 57 .nav i{ display: inline-block; height: 38px; width: 2px; line-height: 38px; position: absolute; right: 0; background: -moz-linear-gradient(left, #acabab, #686868); background: linear-gradient(left, #acabab, #686868); background: -webkit-linear-gradient(left, #acabab, #686868); background: -o-linear-gradient(left, #acabab, #686868);}
 58 .top_show { margin: 7px 0 14px;}
 59 .top_show a{ color: #308ddb;}
 60 
 61 #main { width: 67.70833%; float: left; } 
 62 .box_top { background: white; padding: 20px 16px; border: 1px solid #c9c9c9;}
 63 .box_top h2 { color: #636f76; font-size: 22px;  }
 64 .box_top p { margin: 10px 0 10px;}
 65 .box_top .img { width: 100%;}
 66 .box_top .img img { width: 100%;}
 67 
 68 .box_top a { color: #308DDB; }
 69 
 70 .box_img { background: white; padding: 20px 16px 15px; margin-top: 15px; border: 1px solid #c9c9c9;}
 71 .box_img li{ display: inline-block; width: 188px; vertical-align: top; margin: 0 7px; } 
 72 .box_img li a { display: inline-block; text-align: left; } 
 73 .box_img li span { display: block; padding: 4px 0; font-weight: bold; font-size: 13px; } 
 74 .box_img .pager { margin: 10px 0 0 0; text-align: center; }
 75 .box_img .pager li { width: 0; height: 0; border: 4px solid #c5c4c4; border-radius: 4px; cursor: pointer; margin: 0 5px;  }
 76 .box_img .pager li.sec { border-color: #636f76; }
 77 
 78 .article_list article { background: white; padding: 20px 16px 15px; margin-top: 15px; line-height: 22px; border: 1px solid #c9c9c9; position: relative; }
 79 .article_list article img { float: left; border: 1px solid #cccccc; padding: 4px; margin: 0 15px 0 5px; max-width: 204px; max-height: 154px;}
 80 .article_list article h2 { color: #636F76; font-size: 18px; padding: 0 0 10px; }
 81 .article_list article footer  { position: relative; }
 82 .article_list article footer .fl { float: none; left: 0; }
 83 .article_list article footer .fr { float: none; right: 0; }
 84 
 85 .article_list article footer a { color: #308DDB; }
 86 .article_list .icon { background: url("../images/icons.gif") -2px -237px; position: absolute; top: -7px; right: 0; width: 52px; height: 28px; }
 87 .article_list .icon span {  text-align: center; color: White; font-weight:bold; font-style: normal; font-size: 14px; line-height: 26px; padding-left: 34px;}
 88 
 89 .article_list .pager { margin: 15px auto; text-align: center; }
 90 .article_list .pager li { display: inline-block; }
 91 .article_list .pager a{ background: -moz-linear-gradient(top, #fafafa, #e7e7e7); background: -webkit-linear-gradient(top, #fafafa, #e7e7e7); background: -o-linear-gradient(top, #fafafa, #e7e7e7); background: linear-gradient(top, #fafafa, #e7e7e7); display: inline-block; border: 1px solid #cdcdcd; padding: 4px 10px; border-radius: 5px;}
 92 
 93 
 94 
 95 #aside { float: right; width: 30.20833%;  } 
 96 .box { background:white; border: 1px solid #c9c9c9;}
 97 .box .header{ background: #707070 url("../images/bg_title.gif"); height: 36px; line-height: 36px; color: White; font-size: 14px; padding: 0 10px; }
 98 .box .main{ padding: 0 10px; }
 99 .box .list { line-height: 20px; padding: 1px; }
100 .box .list li{ margin-bottom: 6px; border: none; }
101 .box .list .split { border-bottom: 1px dotted #cccccc; padding-bottom: 5px; }
102 .box .list h3 { line-height: 26px; }
103 .box .list img { float: left; padding: 0 12px 0 0; }
104 .box .pager { text-align: center; padding-bottom: 10px;  }
105 .box .pager a { background: -moz-linear-gradient(top, #fafafa, #e7e7e7) ; background: -o-linear-gradient(top, #fafafa, #e7e7e7) ; background: -webkit-linear-gradient(top, #fafafa, #e7e7e7) ; border: 1px solid #cdcdcd; padding: 4px 10px; border-radius: 5px; }
106 .box .ts_tag { position: absolute; top: 10px; right: -32px; }
107 .box .ts_tag a { background: url("../images/icons.gif") -2px -78px;  display: inline-block; width: 34px; height: 150px; }
108 
109 .comment .list img { max-height: 45px; max-width: 45px; border: 1px solid #999999; padding: 1px; margin: 5px; }
110 .comment .list a { color: #308DDB; font-weight: bold; display: block; padding: 3px 0; }
111 .comment .list .end a {  display: inline; font-weight: normal; }
112 
113 .hot_news { border: 1px solid #C9C9C9; background-color: White; margin-top: 15px; border-radius: 4px; position: relative; vertical-align: top; }
114 .hot_news ul { margin-top: 10px; }
115 .hot_news li { text-align: left; padding: 8px;   border-top: 1px dotted #CCCCCC; overflow: hidden; height: 28px; margin: 0 4px; }
116 .hot_news .hot{ background-color: White; padding: 5px; display: inline-block; width: 172px; border-radius: 4px 0 0 4px; text-align: center; }
117 .hot_news .button { padding: 4px 20px;}
118 .hot_news .hot .button { padding: 4px 30px;}
119 
120 .hot_news .recent{ background-color: #ededed; padding: 5px; display: inline-block; width: 91px;  border-left: 1px solid #C9C9C9; border-radius: 0 4px 4px 0; text-align: center; }
121 
122 .hot_news .icon { width: 9px; height: 22px; position: absolute; border: 1px solid #9b9a9a; left: 177px; top: 120px; border-radius: 5px 0 0 5px; border-width: 1px 0 1px 1px; background-color: #ededed;  }
123 .triangle { display: inline-block; border: 6px solid #9b9a9a;    border-color: #ededed #9b9a9a #ededed  #ededed ;  position: absolute; top: 126px; left: 181px;  border-left: 0; }
124 
125 .triangle2 { display: inline-block; border: 3px solid #9b9a9a;   border-color: #9b9a9a #ededed #9b9a9a #9b9a9a; position: absolute; border-left: 0; top: 129px; left: 184px;}
126 
127 .partner { border: 1px solid #C9C9C9; padding: 10px; }
128 .partner li { display: inline-block; width: 85px; line-height: 22px;}
129 
130 #footer { background-color: #ACABAB; padding: 15px 10px  10px 10px; color: White; font-size: 14px; }
131 
132 #footer a{ color: White;  }
133 #footer p{ color: #777777; font-size: 12px; padding: 5px 0;  }
134 #footer .aliyun { float: right; margin-right: 150px; }

css

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <link href="css/style.css" rel="stylesheet" type="text/css" />
  6     <style type="text/css">
  7     * { transition: all 1s;}
  8     /*在窗口尺寸在400-799时候我们做一点变化*/
  9         @media screen and (min- 800px) and (max- 959px){
 10             .wraper { width: 100%; }
 11             .box_img li{ display: inline-block; width: 200px;} 
 12         }
 13     
 14         @media screen and (min- 360px) and (max- 799px){
 15             .wraper { width: 100%; }
 16             #main { width: 100%; }
 17             #aside { width: 100%; }
 18         }
 19         
 20     </style>
 21 </head>
 22 <body>
 23     <div class="wraper">
 24         <header id="header">
 25             <h1 class="logo">
 26                 <img src="images/logo.gif" />
 27             </h1>
 28             <div class="search">
 29                 
 30                 <input type="text" placeholder="请输入关键字" class="noborder" /><span class="search_bt">搜索</span>
 31             </div>
 32             <nav class="nav">
 33                 <ul>
 34                     <li><a href="javascript:'">首 页</a><i></i></li>
 35                     <li><a href="javascript:'">观 点</a><i></i></li>
 36                     <li><a href="javascript:'">深 度</a><i></i></li>
 37                     <li><a href="javascript:'">作 者</a><i></i></li>
 38                     <li><a href="javascript:'">标 签</a><i></i></li>
 39                     <li><a href="javascript:'">钛爱铂</a><i></i></li>
 40                     <li><a href="javascript:'">我的钛度</a><i></i></li>
 41                 </ul>
 42             </nav>
 43             <div class="top_show clear">
 44                 <div class="fl">
 45                     当前位置：<a href="javascript:'">首 页</a></div>
 46                 <div class="fr">
 47                     热门：<a href="javascript:'">新媒体</a> <a href="javascript:'">一周策划</a> <a href="javascript:'">
 48                         新创业者说</a> <a href="javascript:'">妙史</a> <a href="javascript:'">钛能吐槽</a></div>
 49                 <div class="clear">
 50                 </div>
 51             </div>
 52         </header>
 53         <section id="main">
 54             <div class="box_top">
 55                 <h2>
 56                     "虚拟运营商"英国样板解剖：乐购乐购！</h2>
 57                 <p>
 58                     身处一个移动电话渗透率高达180%以上的成熟市场，美工零售巨头Tesco（乐购）的电信子公司，却通过零售商特有优势实现了持续的逆势增长...</p>
 59                 <div class="img">
 60                     <img src="pics/01.png" />
 61                 </div>
 62                 <div class="mtb4 textr pdlr10">
 63                     标签：<a href="javascript:'">头条</a>,<a href="javascript:'">投稿</a>,<a href="javascript:'">电商</a>,<a
 64                         href="javascript:'">虚拟运营商</a> 评论：（<a href="javascript:'">12</a>） 2013年04月18日8:31
 65                     <a class="fontb" href="javascript:'">【前往头条】</a></div>
 66             </div>
 67             <div class="box_img">
 68                 <ul>
 69                     <li><a href="http://www.tmtpost.com/34495.html">
 70                         <img src="pics/img01.jpg" />
 71                         <span>一个IT奶爸的移动医疗随想</span></a></li>
 72                     <li><a href="http://www.tmtpost.com/34515.html">
 73                         <img src="pics/img02.jpg" />
 74                         <span>知乎安卓版客户端推“一个”模式：慢有慢的理由</span></a></li>
 75                     <li><a href="http://www.tmtpost.com/34276.html">
 76                         <img src="pics/img03.jpg" />
 77                         <span>任正非抵抗危机</span></a></li>
 78                 </ul>
 79                 <ul class="pager">
 80                     <li class="sec"></li>
 81                     <li></li>
 82                     <li></li>
 83                 </ul>
 84             </div>
 85             <section class="article_list">
 86                 <article>
 87                     <i class="icon"><span>0</span></i>
 88                     <img src="pics/ar01.jpg" />
 89                     <h2>
 90                         谷歌眼镜的商业模式：风险转嫁给开发者
 91                     </h2>
 92                     <p>
 93                         谷歌眼镜目前已成科技领域热议的话题，从某种程度上，谷歌眼镜项目的商业模式已经获得初步成功，这个项目在规避风险方面做的极好。
 94                     </p>
 95                     <footer>
 96                         <span class="fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business">
 97                             商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a>
 98                         </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05
 99                             11:11 </span>
100                         <div class="clear">
101                         </div>
102                     </footer>
103                 </article>
104                 <article>
105                     <i class="icon"><span>0</span></i>
106                     <img src="pics/ar02.jpg" />
107                     <h2>
108                         为何众筹模式无法逆袭好莱坞娱乐工业帝国
109                     </h2>
110                     <p>
111                         独立制作、众筹集资，美剧制作者和独立艺术家看似建立起了全新的传媒生态系统，威胁到娱乐产业内容生产的传统模式，但仍无法逆袭，《纸牌屋》和《权利游戏》代表的“大制作”远未终结。
112                     </p>
113                     <footer>
114                         <span class=" fl"><a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business">
115                             商业模式</a>, <a rel="tag" href="http://www.tmtpost.com/tag/%e8%b0%b7%e6%ad%8c">谷歌</a>
116                         </span><span class=" fr"><a href="http://www.tmtpost.com/author/sohu">搜狐IT</a> | 2013-05-05
117                             11:11 </span>
118                         <div class="clear">
119                         </div>
120                     </footer>
121                 </article>
122                 <footer>
123                     <ul class="pager">
124                         <li class="total"><a href="javascript:'">页数:1/68</a></li>
125                         <li><a href="javascript:'">1</a></li>
126                         <li><a href="javascript:'">2</a></li>
127                         <li><a href="javascript:'">3</a></li>
128                         <li><a href="javascript:'">4</a></li>
129                         <li><a href="javascript:'">5</a></li>
130                         <li><a href="javascript:'">6</a></li>
131                         <li><a href="javascript:'">7</a></li>
132                         <li>...</li>
133                         <li><a href="javascript:'">68</a></li>
134                     </ul>
135                 </footer>
136             </section>
137             <div class="clear">
138             </div>
139         </section>
140         <aside id="aside">
141             <div class="box">
142                 <h2 class="header">
143                     特色专栏</h2>
144                 <div class="main por">
145                    
146                     <ul class="list">
147                         <li>
148                             <img src="pics/aside01.png" />
149                             <h3>
150                                 创业者法律课堂--创投法务后花园</h3>
151                             创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li>
152                         <li class="split ">
153                             <h3>
154                                 商场无姐妹，一场忽视“敬业竟...</h3>
155                             肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li>
156                         <li>
157                             <img src="pics/aside02.png" />
158                             <h3>
159                                 创业者法律课堂</h3>
160                             创业者法律课堂由商律师事务所推出，和创业者分享创业法律... </li>
161                         <li class="split ">
162                             <h3>
163                                 商场无姐妹，一场忽视“敬业竟...</h3>
164                             肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。</li>
165                     </ul>
166                     <div class="pager">
167                         <a href="javascript:'"><--上一篇</a> <a href="javascript:'">下一篇--></a>
168                     </div>
169                 </div>
170             </div>
171             <div class="mt15 backwhite textc pdtb10 boxborder">
172                 <a title="移动端的媒体未来" href="/tag/mediafuture">
173                     <img src="pics/event.jpg" />
174                 </a>
175             </div>
176             
177             <div class="box mt15 comment">
178                 <h2 class="header">
179                     经常评论</h2>
180                 <div class="main por">
181                     <ul class="list">
182                         <li class="split ">
183                             <img src="pics/p01.jpg" />
184                             <a href="http://www.tmtpost.com/author/yangjin" rel="nofollow external" class="rc-reviewer">
185                                 葱葱</a> 嘿嘿作者说的很形象，这就是各种圈子里“皇上不急太监急”的写照。不过，观点无价值的问题我不同意，观点不一定“对了”才有价值，我相信从实证延伸出来的探讨，属于社会科学的范畴，而社会科学的研究不是用实验说话的，这个产品死了？就没意义了？反倒在互联网发展的历史上意义重大。社会科学，就是通过一个一个实证去探讨，众多博客就为此做出了贡献。
186                             <div class="end mtb6">
187                                 原文：<a href="http://www.tmtpost.com/34430.html" rel="nofollow" class="rc-post">你的观点是什么，重要吗？</a>
188                             </div>
189                         </li>
190                         <li class="split ">
191                             <img src="pics/p02.jpg" />
192                             <a href="http://www.tmtpost.com/author/yangjin" rel="nofollow external" class="rc-reviewer">
193                                 一个卖脑子的人</a> 企业真正的危机往往来自内部而不是外部，在走向不断成功的路上胜利往往被一场突来的危机打败而走向落寞，根本原因在于企业失去了激情，创新，危机感的企业文化，而被小富即安的文化所代替。推荐朋友们认真阅读此文，审视在此多事之秋时期，我们应如何应对？
194                             <div class="end mtb6">
195                                 原文：<a href="http://www.tmtpost.com/34430.html" rel="nofollow" class="rc-post">任正非抵抗危机</a>
196                             </div>
197                         </li>
198                         
199                     </ul>
200                 </div>
201             </div>
202             <div class="clear">
203             </div>
204         </aside>
205         <div class="clear">
206         </div>
207         <div class="partner">
208             <h3>
209                 合作伙伴</h3>
210             <ul>
211                 <li><a target="_blank" title="新浪科技" href="http://tech.sina.com.cn/">新浪科技</a></li>
212                 <li><a target="_blank" title="腾讯科技" href="http://tech.qq.com/">腾讯科技</a></li>
213                 <li><a target="_blank" title="网易科技" href="http://tech.163.com/">网易科技</a></li>
214                 <li><a target="_blank" title="搜狐IT" href="http://it.sohu.com/">搜狐IT</a></li>
215                 <li><a target="_blank" title="凤凰科技" href="http://tech.ifeng.com/">凤凰科技</a></li>
216                 <li><a target="_blank" title="阿里云" href="http://cnrdn.com/uGj5">阿里云</a></li>
217                 <li><a target="_blank" title="DoNews" href="http://www.donews.com">DoNews</a></li>
218                 <li><a target="_blank" title="经理人分享" href="http://www.managershare.com/">经理人分享</a></li>
219                 <li><a target="_blank" title="创业家" href="http://www.iheima.com">i黑马</a></li>
220                 <li><a target="_blank" title="i天下网商" href="http://i.wshang.com/">i天下网商</a></li>
221                 <li><a target="_blank" title="鲜果网" href="http://www.xianguo.com/">鲜果网</a></li>
222                 <li><a target="_blank" title="中国网科技" href="http://tech.china.com.cn/">中国网科技</a></li>
223                 <li><a target="_blank" title="站长之家" href="http://www.chinaz.com/">站长之家</a></li>
224                 <li><a target="_blank" title="和讯科技" href="http://tech.hexun.com/">和讯科技</a></li>
225                 <li><a target="_blank" title="新华网科技" href="http://www.news.cn/tech/">新华网科技</a></li>
226                 <li><a target="_blank" title="CNET科技资讯" href="http://www.cnetnews.com.cn/">CNET科技资讯</a></li>
227                 <li><a target="_blank" title="财新网" href="http://www.caixin.com/">财新网</a></li>
228                 <li><a target="_blank" title="网易云阅读" href="http://yuedu.163.com/contentcenter">网易云阅读</a></li>
229                 <li><a target="_blank" title="天地互联" href="http://wwwconferencecn">天地互联</a></li>
230                 <li><a target="_blank" title="光明网科技" href="http://it.gmw.cn/">光明网科技</a></li>
231                 <li><a target="_blank" title="通信产业网" href="http://www.ccidcom.com/">通信产业网</a></li>
232                 <li><a target="_blank" href="http://www.itdalao.com">IT大佬网</a></li>
233                 <li><a target="_blank" title="搜课网" href="http://zxx.sooker.com/">搜课网</a></li>
234             </ul>
235         </div>
236     </div>
237     <footer id="footer">
238         <div class="wraper">
239             <a class="aliyun" target="_blank" href="http://cnrdn.com/3pe5">
240                 <img title="阿里云计算" alt="" src="http://www.tmtpost.com/wp-content/themes/newskin/images/ali-logo.gif">
241             </a><a href="/about_tmtpost">关于我们</a> | <a href="/jobs" rel="nofollow">加入我们</a>
242             | <a href="/contact" rel="nofollow">联系我们</a> | <a href="/report" rel="nofollow">寻求报道</a>
243             | <a href="/tougao1" rel="nofollow">投稿通道</a>
244             <p>
245                 Copyright &copy; 2011-2013 <a href="http://www.tmtpost.com/" target="_blank">钛媒体 TMTpost.com</a>.
246                 All Rights Reserved. 京ICP备12042878号 |
247             </p>
248         </div>
249     </footer>
250 </body>
251 </html>

html

结语

今天奋战了一天，居然就形成了这点东西，而且没什么水平，明后天还是需要从无到有的设计三个图，然后实现才能真正达到响应式布局。

如果你觉得这篇文章还不错，请帮忙点击一下推荐，谢谢！

代码下载：https://files.cnblogs.com/yexiaochai/16%E5%B8%83%E5%B1%80.zip

相关阅读:
弹窗多内容，灵活布局计算方式总结
 暖场广告设计方案
 UIStackView上手教程
 多弹窗排序总结
 常用的code snipper
iOS开发常用技能点（持续更新中。。。）
32位和64位系统区别及int字节数
 liunx环境，摄像头无法识别，解决方案
 TCP/IP 笔记 7 Ping
TCP/IP 笔记 6 netstat -s 命令查看每个协议统计数据
原文地址：https://www.cnblogs.com/yexiaochai/p/3079174.html