您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iProcess 课程 角色 咨询 工具 讲座 Modeler   Code  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
 
     
   
 订阅
  捐助
探索HTML5第二弹(下)
 
作者:叶小钗 来源:博客园 发布于: 2015-05-05
1812 次浏览     评价:      
 

响应式布局(上),让我们一起来响应式布局吧

前言

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

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

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

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

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

Media Query(媒介查询)

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

<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-width: 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-width: 1000px) and (max-width: 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-width: 1000px) and (max-width: 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布局我的博客页!

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

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

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

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

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

开始响应式布局

/*在窗口尺寸在400-799时候我们做一点变化*/
2 @media screen and (min-width: 1px) and (max-width: 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 }

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

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

 * { transition: all 1s;}

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

预览地址

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

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

深入研究一把

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

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

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

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

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

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

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

百分比布局

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

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

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

<!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-width: 960px) and (max-width: 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 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>
111 | 2013-05-05 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>

代码少了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; }

<!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-width: 800px) and (max-width: 959px){
10 .wraper { width: 100%; }
11 .box_img li{ display: inline-block; width: 200px;}
12 }
13
14 @media screen and (min-width: 360px) and (max-width: 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 <input type="text" placeholder="请输入关键字" class="noborder" />
30 <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 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">
97 <a rel="tag" href="http://www.tmtpost.com/tag/structure-of-business">商业模式</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"> 商业模式</a>,
115 <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"></a>
241 <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>

结语

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

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


   
1812 次浏览  评价: 差  订阅 捐助
 
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
 
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
 
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
 

十天学会DIV+CSS(WEB标准)
HTML 5的革新:结构之美
介绍27款经典的CSS框架
35个有创意的404错误页面
最容易犯的13个JavaScript错误
设计易理解和操作的网站
更多...   


设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码
单元测试、重构及持续集成
软件开发过程指南


东软集团 代码重构
某金融软件服务商 技术文档
中达电通 设计模式原理与实践
法国电信 技术文档编写与管理
西门子 嵌入式设计模式
中新大东方人寿 技术文档编写
更多...   
 
 
 

 
 
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号