抽屉页面设计
Posted finance-it-gao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了抽屉页面设计相关的知识，希望对你有一定的参考价值。
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 atext-decoration:none 12 13 .head-boxbackground-color:#2459a2; 14 height:44px; 15 width:100%; 16 position:fixed; 17 top:0; 18 left:0; 19 right:0 20 21 .head-contentmargin:0 auto; 22 width:1016px; 23 height:44px; 24 position:relative 25 26 .logoheight:23px; 27 width:121px; 28 background:url("logo.png") no-repeat 0 0; 29 margin-top:10.5px; 30 float:left 31 32 .action-menufloat:left; 33 margin-left:20px; 34 line-height:44px 35 36 .action-menu a.tbcolor:#c0cddf; 37 display:inline-block; 38 margin:-3px; 39 padding:0 13px 40 41 .action-menu a.activecolor:#fff; 42 background-color:#204982 43 a.tb:hovercolor:#fff; 44 background-color:#87cefa 45 46 .key-searchfloat:right; 47 margin-top:8px 48 .key-search .search-text,.key-search a.ifloat:left 49 .key-search .search-textwidth:100px; 50 height:28px; 51 margin:0; 52 border:none 53 54 .key-search .icobackground: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.iheight:28px; 62 width:28px; 63 background-color:#f4f4f4; 64 display:inline-block; 65 margin:0 66 67 .action-navposition:absolute; 68 right:150px; 69 top:0px 70 .action-nav acolor:#fff; 71 display:inline-block; 72 margin:0px; 73 padding:11px 13px 74 .action-nav a:hovercolor:#fff; 75 background-color:#87cefa 76 77 .main-content-boxbackground-color:#ededed; 78 width:100%; 79 padding-top:44px; 80 81 .main-contentmargin: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-lfloat:left; 90 width:650px; 91 92 .top-areaborder-bottom:1px solid black; 93 padding-bottom:38px 94 .child-navfloat:left; 95 .child-nav .activebackground:url("new.png") no-repeat 0 -299px; 96 color:black 97 .child-nav adisplay: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 .activecolor:#b4b4b4 109 .sort-navfloat:left; 110 font-size:15px; 111 margin-left:180px; 112 margin-top:4px; 113 .sort-nav acolor:#339900; 114 margin:6px 115 .publish-btnfloat: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 .itemborder-bottom:1px solid black 125 .content-list .news-picfloat:right 126 127 .hand-iconbackground:url("biaoqian.png") no-repeat; 128 display:inline-block; 129 width:18px; 130 height:18px; 131 .recommend .recommend-iconbackground-position:0 -40px; 132 vertical-align:-3px 133 .discuss-iconbackground-position:0 -98px; 134 vertical-align:-3px 135 .collect-iconbackground-position:0 -140px; 136 vertical-align:-3px; 137 .part2 .user-a .tou .xgpvertical-align:-1px 138 .part2 amargin:7px 139 .news-picmargin-top:5px; 140 margin-left:5px 141 .part1margin:12px 5px 5px 5px; 142 color:#b4b4b4 143 .part1 .part1-text .textcolor:#006400; 144 font-size:15.8px; 145 font-weight:500 146 .part1 .part1-text .text:hovercolor:#99aecb; 147 backgroound-color:#369 148 .part2margin:0 0 9px 149 .page-areamargin-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_pagepbdisplay: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 .pagedisplay:inline-block 170 .page-area .ct_pagepb:hovercolor:#fff; 171 background-color:#87cefa 172 .page-area ul li:hovercolor:#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 hrclear: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>
以上是关于抽屉页面设计的主要内容，如果未能解决你的问题，请参考以下文章