码迷,mamicode.com
首页 > 其他好文 > 详细

抽屉页面设计

时间:2019-06-04 12:56:16      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:nbsp   出师表   class   font   nba   center   one   下意识   active   

  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>

 

抽屉页面设计

标签:nbsp   出师表   class   font   nba   center   one   下意识   active   

原文地址:https://www.cnblogs.com/Finance-IT-gao/p/10972627.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!