-
Notifications
You must be signed in to change notification settings - Fork 41
/
demo0.8_pc.html
214 lines (182 loc) · 8.18 KB
/
demo0.8_pc.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" >
<title>这不是个Demo页</title>
<link rel="stylesheet" href="css/normal_0.8.css">
</head>
<body>
<div id="pagewrap">
<header class="header">
<hgroup>
<h1 class="site-logo">这不是一个Demo页面<i class="betaIcon">beta</i></h1>
<h3>现在是手机当电脑用，电脑当电视机用，电视机当摆设</h3>
</hgroup>
<nav>
<ul id="main-nav" class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a></li>
<li><a href="#">联系我们</a></li>
<div class="search">
<input type="text" placeholder="你妹夫的二奶" />
<button type="button"><i class="icon icon-search"></i></button>
</div>
</ul>
</nav>
</header>
<div class="content">
<section id="slider"><img src="images/slider_p.png"></section>
<section class="articles">
<article class="article">
<div class="img">
<img src="images/img1.jpg" />
<div class="tips">
<div class="date">2015/07/18</div><i class="triangle"></i>
</div>
</div>
<div class="author"><img src="images/face08.jpg"></div>
<div class="title">墨西哥专家称"世界末日"是对玛雅历法解读错误</div>
<div class="nums">
<div class="rectangle">
<span><i class="icon icon-heart" title="喜欢"></i>(461)</span>
<span><i class="icon icon-share" title="分享"></i>(106)</span>
<span><i class="icon icon-comment" title="评论"></i>(15)</span>
</div>
<i class="trangleLB"></i>
</div>
<i class="hr"></i>
<div class="desc">墨西哥-- 关注“失落的文明” 大量被“世界末日说”吸引的游客赶到墨西哥尤卡坦半岛等玛雅文明曾经存在的地区参观旅游。 墨西哥国立自治大学教授丹尼尔・弗洛雷斯称，关于玛雅人“世界末日”的说法是对玛雅人历法的错误解读。他表示，玛雅人曾经在天文学领域取得了很高的造诣...</div>
</article>
<article class="article">
<div class="img">
<img src="images/img3.jpg" />
<div class="tips">
<div class="date">2015/07/21</div><i class="triangle"></i>
</div>
</div>
<div class="author"><img src="images/face07.jpg"></div>
<div class="title">女孩子为什么更喜欢大屏手机？</div>
<div class="nums">
<div class="rectangle">
<span><i class="icon icon-heart" title="喜欢"></i>(331)</span>
<span><i class="icon icon-share" title="分享"></i>(96)</span>
<span><i class="icon icon-comment" title="评论"></i>(64)</span>
</div>
<i class="trangleLB"></i>
</div>
<i class="hr"></i>
<div class="desc">自从去年9月份三星上市了GALAXY Note i9220，这款手机开创了手机跨界平板的先河。不仅让业界为之震惊，并且这款手机也得到了很多用户的喜欢。随之而来的是，各种各样的大屏手机被不同的手机厂家引入市场。2015年，这种趋势依旧。 今年在Android平台上发生了关键性的转变，在四核手机登场并迅速普及之后，Android设备也开始在屏幕上下起了功夫...</div>
</article>
<article class="article">
<div class="img">
<img src="images/img4.jpg" />
<div class="tips">
<div class="date">2015/07/18</div><i class="triangle"></i>
</div>
</div>
<div class="author"><img src="images/face02.jpg"></div>
<div class="title">西安将进入4G网络时代 下载1部高清电影仅1分钟</div>
<div class="nums">
<div class="rectangle">
<span><i class="icon icon-heart" title="喜欢"></i>(602)</span>
<span><i class="icon icon-share" title="分享"></i>(241)</span>
<span><i class="icon icon-comment" title="评论"></i>(30)</span>
</div>
<i class="trangleLB"></i>
</div>
<i class="hr"></i>
<div class="desc">左为3G网络下载，右为4G网络下载。 西部网讯(记者 吴大伟)“再过不久，西安市民也将体验到一分钟下载一部电影的快感了。”中国移动陕西分公司的相关负责人介绍说。 4G网络有多快？一分钟下载一部高清电影！ 在网上找到一个好看的视频，打开它，然后.....</div>
</article>
<article class="article">
<div class="img">
<img src="images/img5.jpg" />
<div class="tips">
<div class="date">2015/07/10</div><i class="triangle"></i>
</div>
</div>
<div class="author"><img src="images/face04.jpg"></div>
<div class="title">游戏迷的感动！看任天堂主机的手柄发展史</div>
<div class="nums">
<div class="rectangle">
<span><i class="icon icon-heart" title="喜欢"></i>(161)</span>
<span><i class="icon icon-share" title="分享"></i>(97)</span>
<span><i class="icon icon-comment" title="评论"></i>(22)</span>
</div>
<i class="trangleLB"></i>
</div>
<i class="hr"></i>
<div class="desc">从小时候我们最爱玩的FC红白机到当下最新最时尚的Wii U，掐指算算，任天堂在主机开发上已经走了近二十个年头，而作为玩家玩游戏的基本控制设备，配套手柄的造型与功用特征也在不停的变化：FC手柄的方方正，N64手柄的引入摇杆，Wii手柄的双截棍体感……在下面这段由国外玩家制作的创意动画中...</div>
</article>
</section>
</div>
<aside class="sidebar">
<section class="widget">
<div class="title">分类文章</div>
<ul class="folder">
<li>小明吃饭没(11)</li>
<li>测漏(30)</li>
<li>鸡蛋(9)</li>
<li>阉割你妹夫(136)</li>
</ul>
</section>
<section class="widget ">
<div class="title">Faces</div>
<ul class="faces clearfix">
<li><img src="images/face01.jpg" alt="我是你妹"></li>
<li><img src="images/face02.jpg" alt="遇见"></li>
<li><img src="images/face03.jpg" alt="大叔叔"></li>
<li><img src="images/face04.jpg" alt="银蛋"></li>
<li><img src="images/face05.jpg" alt="小黄"></li>
<li><img src="images/face06.jpg" alt="菊花开的那天"></li>
<li><img src="images/face07.jpg" alt="Yui"></li>
<li><img src="images/face08.jpg" alt="Sunday"></li>
<li><img src="images/face09.jpg" alt="蓝Ting"></li>
<li><img src="images/face10.jpg" alt="格调"></li>
<li><img src="images/face11.jpg" alt="叶盈碧"></li>
<li><img src="images/face12.jpg" alt="男孩爱女孩"></li>
<li><img src="images/face13.jpg" alt="Waidy"></li>
<li><img src="images/face14.jpg" alt="晨斯"></li>
<li><img src="images/face15.jpg" alt="熊猫奶酪"></li>
</ul>
</section>
<section class="widget">
<div class="title">最新吐槽</div>
<ul class="comment">
<li><img src="images/face16.jpg" >
<p class="desc" title="那天我遇到个女孩，又在那天我能再遇到她...">
<span class="name">叫我哥</span>
<span>那天我遇到个女孩，又在那天我能再遇到她...</span></p>
</li>
<li><img src="images/face02.jpg" >
<p class="desc"><span class="name">遇见</span><span>那个女生不是我吧</span></p>
</li>
<li><img src="images/face05.jpg" >
<p class="desc"><span class="name">小黄</span><span>一二楼结婚吧</span></p>
</li>
<li><img src="images/face10.jpg" >
<p class="desc"><span class="name">格调</span><span>祝一二楼是大叔猪扒</span></p>
</li>
</ul>
</section>
</aside>
<footer id="footer">
<p>内容样式和图片参考<a href="http://themify.me/" target="new1">WordPress模版</a> |
文本内容来自<a href="http://www.yuemee.com/" target="new2">阅米网</a></p>
<div class="info">
<span>Copyright © 1998 - 2015 WilliamTank. All Rights Reserved</sapn>
<a href="#">联系我们</a>
<a href="#">侵权投诉</a>
</div>
<p>这是一个Demo页面</p>
</footer>
</div>
</body>
<script>
console.log('document.body.clientWidth --', document.body.clientWidth);
console.log('window.innerWidth --', window.innerWidth);
console.log('screen.width --', screen.width);
console.log('scale --',window.innerWidth/document.body.clientWidth);
</script>
</html>