抽屉页面设计

╰+哭是因爲堅強的太久メ 2021-12-21 00:19 245阅读 0赞

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