1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>抽屉</title>
6 <style>
7
8 *{margin:0;
9 padding:0}
10
11 a{text-decoration:none}
12
13 .head-box{background-color:#2459a2;
14 height:44px;
15 width:100%;
16 position:fixed;
17 top:0;
18 left:0;
19 right:0}
20
21 .head-content{margin:0 auto;
22 width:1016px;
23 height:44px;
24 position:relative}
25
26 .logo{height:23px;
27 width:121px;
28 background:url("logo.png") no-repeat 0 0;
29 margin-top:10.5px;
30 float:left}
31
32 .action-menu{float:left;
33 margin-left:20px;
34 line-height:44px}
35
36 .action-menu a.tb{color:#c0cddf;
37 display:inline-block;
38 margin:-3px;
39 padding:0 13px}
40
41 .action-menu a.active{color:#fff;
42 background-color:#204982}
43 a.tb:hover{color:#fff;
44 background-color:#87cefa}
45
46 .key-search{float:right;
47 margin-top:8px}
48 .key-search .search-text,.key-search a.i{float:left}
49 .key-search .search-text{width:100px;
50 height:28px;
51 margin:0;
52 border:none}
53
54 .key-search .ico{background:url("sou.png") no-repeat 0 -195px;
55 display:inline-block;
56 height:15px;
57 width:15px;
58 margin-top:8px;
59 margin-left:8px
60 }
61 .key-search a.i{height:28px;
62 width:28px;
63 background-color:#f4f4f4;
64 display:inline-block;
65 margin:0}
66
67 .action-nav{position:absolute;
68 right:150px;
69 top:0px}
70 .action-nav a{color:#fff;
71 display:inline-block;
72 margin:0px;
73 padding:11px 13px}
74 .action-nav a:hover{color:#fff;
75 background-color:#87cefa}
76
77 .main-content-box{background-color:#ededed;
78 width:100%;
79 padding-top:44px;
80 }
81 .main-content{margin:0 auto;
82 background-color:#fff;
83 width:960px;
84 height:auto;
85 min-height:700px;
86 padding:12px 28px 60px 28px;
87 }
88
89 .content-l{float:left;
90 width:650px;}
91
92 .top-area{border-bottom:1px solid black;
93 padding-bottom:38px}
94 .child-nav{float:left;}
95 .child-nav .active{background:url("new.png") no-repeat 0 -299px;
96 color:black}
97 .child-nav a{display:inline-block;
98 width:60px;
99 height:26px;
100 line-height:26px;
101 text-align:center;
102 font-weight:600;
103 font-size:15px;
104 color:#336699;
105 margin-top:2px;
106 margin-right:4px;
107 }
108 .sort-nav .active{color:#b4b4b4}
109 .sort-nav{float:left;
110 font-size:15px;
111 margin-left:180px;
112 margin-top:4px;}
113 .sort-nav a{color:#339900;
114 margin:6px}
115 .publish-btn{float:right;
116 display:inline-block;
117 width:80px;
118 height:30px;
119 color:#fff;
120 background-color:#84a42b;
121 line-height:30px;
122 text-align:center}
123
124 .content-list .item{border-bottom:1px solid black}
125 .content-list .news-pic{float:right}
126
127 .hand-icon{background:url("biaoqian.png") no-repeat;
128 display:inline-block;
129 width:18px;
130 height:18px;}
131 .recommend .recommend-icon{background-position:0 -40px;
132 vertical-align:-3px}
133 .discuss-icon{background-position:0 -98px;
134 vertical-align:-3px}
135 .collect-icon{background-position:0 -140px;
136 vertical-align:-3px;}
137 .part2 .user-a .tou .xgp{vertical-align:-1px}
138 .part2 a{margin:7px}
139 .news-pic{margin-top:5px;
140 margin-left:5px}
141 .part1{margin:12px 5px 5px 5px;
142 color:#b4b4b4}
143 .part1 .part1-text .text{color:#006400;
144 font-size:15.8px;
145 font-weight:500}
146 .part1 .part1-text .text:hover{color:#99aecb;
147 backgroound-color:#369}
148 .part2{margin:0 0 9px}
149 .page-area{margin-top:8px}
150 .page-area ul li{
151 display:inline-block;
152 border:1px solid #e1e1e1;
153 height:34px;
154 width:34px;
155 line-height:34px;
156 text-align:center;
157 color:#369;
158 margin:5px;
159 border-radius:20%
160 }
161 .page-area .ct_pagepb{display:inline-block;
162 border:1px solid #e1e1e1;
163 height:34px;
164 width:80px;
165 line-height:34px;
166 text-align:center;
167 color:#369;
168 margin:5px}
169 .page-area .page{display:inline-block}
170 .page-area .ct_pagepb:hover{color:#fff;
171 background-color:#87cefa}
172 .page-area ul li:hover{color:#fff;
173 background-color:#87cefa}
174 .footer-box{
175 background-color:#fff;
176 width:960px;
177 height:auto;
178 margin:15px;
179 text-align:center
180 }
181 hr{clear:both;
182 margin-top:880px
183 }
184 </style>
185 </head>
186
187 <body>
188
189 <div class="head-box">
190 <div class="head-content">
191
192 <a href="https://dig.chouti.com/" class="logo"></a>
193
194 <div class="action-menu">
195 <a href="#" class="tb active" >全部</a>
196 <a href="#" class="tb" >42区</a>
197 <a href="#" class="tb" >段子</a>
198 <a href="#" class="tb" >图片</a>
199 <a href="#" class="tb" >挨踢1024</a>
200 <a href="#" class="tb" >你问我答</a>
201 </div>
202
203 <div class="action-nav">
204 <a href="#" class="register-btn">注册</a>
205 <a href="#" class="login-btn">登录</a>
206 </div>
207
208 <div class="key-search">
209 <form action="/" method="post">
210 <input type="text" class="search-text" autocomplete="off">
211 <a href="#" class="i">
212 <span class="ico"></span>
213 </a>
214 </form>
215 </div>
216
217 </div>
218 </div>
219
220 <div class="main-content-box">
221 <div class="main-content">
222 <div class="content-l">
223 <div class="top-area">
224 <div class="child-nav">
225 <a href="#" class="new active">最新</a>
226 <a href="#" class="hot">最热</a>
227 <a href="#" class="person">人类发布</a>
228 </div>
229 <a href="#" class="publish-btn">
230 <span class="n2">+</span>
231 <span class="n2">发布</span>
232 </a>
233 <div class="sort-nav">
234 <a href="#" class="sort active">即时排序</a>
235 <a href="#" class="24h">24小时</a>
236 <a href="#" class="3day">3天</a>
237 </div>
238 </div>
239 <div class="content-list">
240 <div class="item">
241 <div class="news-pic">
242 <img src="nba.jpg" alt="抽屉新热榜" width="70px" height="70px">
243 </div>
244 <div class="news-content">
245 <div class="part1">
246 <div class="part1-text">
247 <a class="text" href="#">
248 <span>【NBA快讯】北京时间6月3日上午8点，NBA总决赛，勇士将继续在客场挑战多伦多猛龙，目前猛龙在总决赛中，总比分1-0领先，勇士能否扳回一城呢?据NBA资深评论员高江平预测，金州勇士将以109-104在客场击败多伦多猛龙。</span><br/>
249 </a>
250 </div>
251 <div class="part1-lianjie">-mp.weixin.qq.com 挨踢1024</div>
252 </div>
253 <div class="part2">
254 <a href="#" class="recommend" title="推荐">
255 <span class="hand-icon recommend-icon"></span>
256 <b>10w+</b>
257 </a>
258 <a href="#" class="discuss" title="评论">
259 <span class="hand-icon discuss-icon"></span>
260 <b>1w+</b>
261 </a>
262 <a href="#" class="collect" title="加入私藏">
263 <span class="hand-icon collect-icon"></span>
264 <b>私藏</b>
265 </a>
266 <a href="#" class="user-a">
267 <span class="tou">
268 <img class="xgp" src="tang.png" width="15px" height="15px"></span>
269 <b>高江平</b>
270 </span>
271 </a>
272 <a href="#" class="time">
273 <b>2019/06/02 06:07</b>
274 </a>
275 </div>
276 </div>
277 </div>
278 </div>
279 <div class="content-list">
280 <div class="item">
281 <div class="news-pic">
282 <img src="lu.jpg" alt="抽屉新热榜" width="70px" height="70px">
283 </div>
284 <div class="news-content">
285 <div class="part1">
286 <div class="part1-text">
287 <a class="text" href="#">
288 <span>【不管怎样选段-特雷沙修女】如果有一天你找到了平静和幸福，他们可能会嫉妒你。不管怎样，你还是要平静，还是要幸福，还是要快乐。</span><br/>
289 <span>【不管怎样选段-特雷沙修女】你多年来营造的东西有人在一夜之间将它摧毁。不管怎样，你不要停止去营造它。</span><br/>
290 </a>
291 </div>
292 <div class="part1-lianjie">-mp.weixin.qq.com 挨踢1024</div>
293 </div>
294 <div class="part2">
295 <a href="#" class="recommend" title="推荐">
296 <span class="hand-icon recommend-icon"></span>
297 <b>999</b>
298 </a>
299 <a href="#" class="discuss" title="评论">
300 <span class="hand-icon discuss-icon"></span>
301 <b>999</b>
302 </a>
303 <a href="#" class="collect" title="加入私藏">
304 <span class="hand-icon collect-icon"></span>
305 <b>私藏</b>
306 </a>
307 <a href="#" class="user-a">
308 <span class="tou">
309 <img class="xgp" src="touxiang.jpg" width="15px" height="15px"></span>
310 <b>高露</b>
311 </span>
312 </a>
313 <a href="#" class="time">
314 <b>1分钟前</b>
315 </a>
316 </div>
317 </div>
318 </div>
319 </div>
320 <div class="content-list">
321 <div class="item">
322 <div class="news-pic">
323 <img src="gaolu.jpg" alt="抽屉新热榜" width="70px" height="70px">
324 </div>
325 <div class="news-content">
326 <div class="part1">
327 <div class="part1-text">
328 <a class="text" href="#">
329 <span>【罗素语录】对爱情的渴望，对知识的追求，对人类苦难不可遏制的同情心，这三种纯洁而无比强烈的激情支配着我的一生。这三种激情，就像飓风一样，在深深的苦海上，肆意地把我吹来吹去，吹到濒临绝望的边缘。
330 《我为什么而活着》</span><br/>
331 <span>【罗素语录】如果一听到一种与你相左的意见就发怒，这表明，你已经下意识地感觉到你那种看法没有充分理由。如果某个人硬要说二加二等于五，你只会感到怜悯而不是愤怒。
332 《如何避免愚蠢的见识》</span><br/>
333 </a>
334 </div>
335 <div class="part1-lianjie">-mp.weixin.qq.com 挨踢1024</div>
336 </div>
337 <div class="part2">
338 <a href="#" class="recommend" title="推荐">
339 <span class="hand-icon recommend-icon"></span>
340 <b>666</b>
341 </a>
342 <a href="#" class="discuss" title="评论">
343 <span class="hand-icon discuss-icon"></span>
344 <b>789</b>
345 </a>
346 <a href="#" class="collect" title="加入私藏">
347 <span class="hand-icon collect-icon"></span>
348 <b>私藏</b>
349 </a>
350 <a href="#" class="user-a">
351 <span class="tou">
352 <img class="xgp" src="touxiang.jpg" width="15px" height="15px"></span>
353 <b>好的孤独</b>
354 </span>
355 </a>
356 <a href="#" class="time">
357 <b>52分钟前</b>
358 </a>
359 </div>
360 </div>
361 </div>
362 </div>
363 <div class="content-list">
364 <div class="item">
365 <div class="news-pic">
366 <img src="kongming.jpg" alt="抽屉新热榜" width="70px" height="70px">
367 </div>
368 <div class="news-content">
369 <div class="part1">
370 <div class="part1-text">
371 <a class="text" href="#">[出师表]先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体，陟罚臧否，不宜异同......</a>
372 </div>
373 <div class="part1-lianjie">-mp.weixin.qq.com 挨踢1024</div>
374 </div>
375 <div class="part2">
376 <a href="#" class="recommend" title="推荐">
377 <span class="hand-icon recommend-icon"></span>
378 <b>77</b>
379 </a>
380 <a href="#" class="discuss" title="评论">
381 <span class="hand-icon discuss-icon"></span>
382 <b>77</b>
383 </a>
384 <a href="#" class="collect" title="加入私藏">
385 <span class="hand-icon collect-icon"></span>
386 <b>私藏</b>
387 </a>
388 <a href="#" class="user-a">
389 <span class="tou">
390 <img class="xgp" src="touxiang.jpg" width="15px" height="15px"></span>
391 <b>海</b>
392 </span>
393 </a>
394 <a href="#" class="time">
395 <b>2小时前</b>
396 </a>
397 </div>
398 </div>
399 </div>
400 </div>
401 <div class="content-list">
402 <div class="item">
403 <div class="news-pic">
404 <img src="xinpian.png" alt="抽屉新热榜" width="70px" height="70px">
405 </div>
406 <div class="news-content">
407 <div class="part1">
408 <div class="part1-text">
409 <a class="text" href="#">【芯片】很多人简单地认为买不到好设备导致我们芯片技术薄弱。而行业人士认为生产芯片仅仅是产业链中的一环。让我们通过一段EDA（自动化电路设计计算机辅助软件）历史上的传奇案例，来一窥芯片产业的复杂和荡气回肠。</a>
410 </div>
411 <div class="part1-lianjie">-mp.weixin.qq.com 挨踢1024</div>
412 </div>
413 <div class="part2">
414 <a href="#" class="recommend" title="推荐">
415 <span class="hand-icon recommend-icon"></span>
416 <b>4</b>
417 </a>
418 <a href="#" class="discuss" title="评论">
419 <span class="hand-icon discuss-icon"></span>
420 <b>7</b>
421 </a>
422 <a href="#" class="collect" title="加入私藏">
423 <span class="hand-icon collect-icon"></span>
424 <b>私藏</b>
425 </a>
426 <a href="#" class="user-a">
427 <span class="tou">
428 <img class="xgp" src="touxiang.jpg" width="15px" height="15px"></span>
429 <b>西瓜皮</b>
430 </span>
431 </a>
432 <a href="#" class="time">
433 <b>1天前</b>
434 </a>
435 </div>
436 </div>
437 </div>
438 </div>
439 <div id="page-area" class="page-area">
440 <ul class="page">
441 <li><span class="ct_pagepw">1</span></li>
442 <li><a href="#" class="ct_pagepa">2</a></li>
443 <li><a href="#" class="ct_pagepa">3</a></li>
444 <li><a href="#" class="ct_pagepa">4</a></li>
445 <li><a href="#" class="ct_pagepa">5</a></li>
446 <li><a href="#" class="ct_pagepa">6</a></li>
447 <li><a href="#" class="ct_pagepa">7</a></li>
448 <li><a href="#" class="ct_pagepa">8</a></li>
449 <li><a href="#" class="ct_pagepa">9</a></li>
450 <li><a href="#" class="ct_pagepa">10</a></li>
451 </ul>
452 <a href="#" class="ct_pagepb">下一页</a>
453 </div>
454 </div><br/>
455
456 <hr>
457 <div class="footer-box">
458 <div class="foot-nav">
459 <a href="#" target="_blank">关于我们</a>
460 <span>|</span>
461 <a href="#" target="_blank">联系我们</a>
462 <span>|</span>
463 <a href="#" target="_blank">服务条款</a>
464 <span>|</span>
465 <a href="#" target="_blank">隐私政策</a>
466 <span>|</span>
467 <a href="#" target="_blank">抽屉新热榜工具</a>
468 <span>|</span>
469 <a href="#" target="_blank">下载客户端</a>
470 <span>|</span>
471 <a href="#" target="_blank">意见与反馈</a>
472 <span>|</span>
473 <a href="#" target="_blank">友情链接</a>
474 <span>|</span>
475 <a href="#" target="_blank">公告</a>
476 <span>|</span>
477 </div>
478 <div class="foot-nav2">
479 <img class="feet_e" src="" width="36px" height="14px">
480 <span class="foot_d">旗下站点</span>
481 <span class="foot_d">@2016chouti.com</span>
482 <a target="_blank" href="#" class="foot_b">京ICP备09053974号-3 京公网安备 11010251201</a>
483 <div style="margin-top:6px;">版权所有:山西财经大学高江平工作室</div>
484 </div>
485 </div>
486 </div>
487 </div>
488
489
490
491
492
493 </body>
494 </html>
原文地址：https://www.cnblogs.com/Finance-IT-gao/p/10972627.html
时间： 2024-11-05 17:24:49