学完Html和css就开始模仿抽屉页面来练手了，还有很多不足之处，后期还会继续修改。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>抽屉新热榜</title> 6 <meta name="keywords" content="抽屉新热榜，资讯，段子，图片，公众场合不宜，科技，新闻，节操，搞笑"> 7 <meta name="description" content="抽屉新热榜,汇聚每日搞笑段子、热门图片、有趣新闻。 8 它将微博、门户、社区、bbs、社交网站等海量内容聚合在一起，通过用户推荐生成最热榜单。看抽屉新热榜，每日热门 9 有趣资讯尽收眼底。"> 10 <link rel="stylesheet" href="chouti_css.css"> 11 </head> 12 <body> 13 14 <div class="head_box"> 15 <div class="head_content"> 16 <a href="#" class="logo"></a> 17 18 <div class="action_menu"> 19 <a href="#" class="tb active">全部</a> 20 <a href="#" class="tb">42区</a> 21 <a href="#" class="tb">段子</a> 22 <a href="#" class="tb">图片</a> 23 <a href="#" class="tb">挨踢1024</a> 24 <a href="#" class="tb">你问我答</a> 25 </div> 26 27 <div class="action_nav"> 28 <a href="#" class="log">注册</a> 29 <a href="#" class="register">登录</a> 30 31 <div class="key_search"> 32 <input type="text" class="search_text"> 33 <a href=""> 34 <span class="icon"></span> 35 </a> 36 </div> 37 </div> 38 </div> 39 </div> 40 41 <div class="main"> 42 <div class="main_content"> 43 <div class="main_content_left"> 44 <div class="main_left_top"> 45 46 <div class="child_nav"> 47 <a href="#" class="hot">最热</a> 48 <a href="#" class="new">发现</a> 49 <a href="#" class="people">人类发布</a> 50 </div> 51 52 <div class="publish_btn">+发布</div> 53 <div class="sort_nav"> 54 <a href="#" class="day_3">3天</a> 55 <a href="#" class="hour_24">24小时</a> 56 <a href="#" class="jishi_now">即时排序</a> 57 </div> 58 </div> 59 60 <div class="news1"> 61 <div class="news1_content"> 62 <div class="news1_part2"> 63 <img src="news_1.jpg" alt="" class="news1_img"> 64 </div> 65 <div class="news1_part1"> 66 <a href="#" class="news1_title">从Eliza到小冰，让交对话机器人的机遇和挑战</a> 67 <a href="#" class="news1_source">-www.jiqizhixin.com 挨踢1024</a> 68 </div> 69 <div class="news1_part3"> 70 <div class="news1_span1"> 71 <span class="news1_span1_1"></span> 72 <span class="news1_span1_2">6</span> 73 </div> 74 75 <div class="news1_span2"> 76 <span class="news1_span2_1"></span> 77 <span class="news1_span2_2">5</span> 78 </div> 79 80 <div class="news1_span3"> 81 <span class="news1_span3_1"></span> 82 <span class="news1_span3_2">私藏</span> 83 </div> 84 85 86 <div class="news1_span4"> 87 <span class="news1_span4_1"></span> 88 <span class="news1_span4_2">大柚子</span> 89 </div> 90 91 <div class="news1_span5"> 92 <span class="news1_span5_1"> 93 <a href="#" class="news1_time"> 94 <b>9分钟前发布</b> 95 </a> 96 <a class="news1_hot">入热榜</a> 97 </span> 98 </div> 99 <div class="news1_span6"> 100 <a>分享到</a> 101 <span class="share-icon"> 102 <a class="icon-sina" title="分享到新浪微博" href="#" ></a> 103 <a class="icon-douban" title="分享到豆瓣" href="#" ></a> 104 <a class="icon-qqzone" title="分享到QQ空间" href="#" ></a> 105 <a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a> 106 <a class="icon-renren" title="分享到人人网" href="#" ></a> 107 </span> 108 </div> 109 </div> 110 </div> 111 </div> 112 <div class="page_num"> 113 <ul> 114 <li><span class="current_page">1</span></li> 115 <li><a href="#" class="page-a">2</a></li> 116 <li><a href="#" class="page-a">3</a></li> 117 <li><a href="#" class="page-a">4</a></li> 118 <li><a href="#" class="page-a">5</a></li> 119 <li><a href="#" class="page-a">6</a></li> 120 <li><a href="#" class="page-a">7</a></li> 121 <li><a href="#" class="page-a">8</a></li> 122 <li><a href="#" class="page-a">9</a></li> 123 <li><a href="#" class="page-a">10</a></li> 124 <li><a href="#" class="page-next">下一页</a></li> 125 </ul> 126 </div> 127 </div> 128 129 <div class="rightcontent"> 130 <div class="h1"> 131 <span class="r1"><a href=""><img src="report.png" alt=""></a></span> 132 <span class="r1 r2"><a href=""><img src="report_children.png" alt=""></a></span> 133 </div> 134 <div class="s1"></div><span class="r1"><a href=""><img src="view.png" alt="">如何避免自己被封号</a></span> 135 <div class="h2"><span class="r1"><a href=""><img src="right.png" alt=""></a></span></div> 136 <div class="all">24小时全部<span class="t10"> TOP 10</span></div> 137 <div class="hot">最热榜</div> 138 </div> 139 </div> 140 141 142 <div class="main_content_bottom"> 143 144 <div class="foot-nav"> 145 <a href="#" target="foot-nav_link">关于我们</a> 146 <span>|</span> 147 <a href="#" target="foot-nav_link">联系我们</a> 148 <span>|</span> 149 <a href="#" target="foot-nav_link">服务条款</a> 150 <span>|</span> 151 <a href="#" target="foot-nav_link">隐私政策</a> 152 <span>|</span> 153 <a href="#" target="foot-nav_link">抽屉新热榜工具</a> 154 <span>|</span> 155 <a href="#" target="foot-nav_link">下载客户端</a> 156 <span>|</span> 157 <a href="#" target="foot-nav_link">意见与反馈</a> 158 <span>|</span> 159 <a href="#" target="foot-nav_link">友情链接</a> 160 <span>|</span> 161 <a href="#" target="foot-nav_link">公告</a> 162 <a href="#"> 163 <img src="ct_rss.gif"> 164 </a> 165 </div> 166 167 <div class="foot-nav2"> 168 169 <a href="#"> 170 <img src="footer1.gif"> 171 </a> 172 <span class="foot_a">旗下站点</span> 173 <span class="foot_a">©2018 chouti.com</span> 174 <a href="#" class="foot_b">京ICP备09053974号-3 京公网安备 110102004562</a> 175 <div class="foot_part2">违法和不良信息举报： 电话：010-58302039 邮箱： 176 <span><a href="#" class="foot_part2_b">jubao@chouti.com</a></span> 177 </div> 178 <div class="foot_part3">版权所有：北京格致璞科技有限公司</div> 179 180 </div> 181 </div> 182 </div> 183 184 </body> 185 </html>
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 body{ 6 font-size: 12px; 7 } 8 9 a{ 10 text-decoration: none; 11 } 12 .head_box{ 13 100%; 14 height: 44px; 15 background-color: #2459a2; 16 position: fixed; 17 top: 0; 18 bottom: 0; 19 } 20 .head_content{ 21 1064px; 22 height: 44px; 23 margin: 0 auto; 24 line-height: 44px; 25 position: relative; 26 /*background-color: #2459a2;*/ 27 } 28 29 .logo{ 30 121px; 31 height: 23px; 32 background: url("logo.png") no-repeat 0 0; 33 float: left; 34 margin-top: 11px; 35 } 36 .action_menu{ 37 float: left; 38 margin-left: 24px; 39 } 40 .action_menu a.tb{ 41 display: inline-block; 42 height: 44px; 43 margin-left: -6px; 44 /*padding: 0 5px 0 5px;*/ 45 text-align: center; 46 color: #c0cddf; 47 padding: 0 13px 0 16px; 48 } 49 .action_menu a.tb:hover{ 50 background-color: #336699; 51 color: white; 52 } 53 .action_menu a.active{ 54 background-color: #336699; 55 color: white; 56 57 } 58 59 .action_nav{ 60 position: absolute; 61 top: 0; 62 right: 150px; 63 } 64 .action_nav a{ 65 float: left; 66 55px; 67 height: 44px; 68 /*background-color: #84a42b;*/ 69 margin-left: -6px; 70 text-align: center; 71 color: white; 72 } 73 .key_search{ 74 float: left; 75 margin-top: 5px; 76 } 77 .key_search .search_text{ 78 float: left; 79 91px; 80 height: 25px; 81 padding: 2px 2px 2px 5px; 82 border: 1px solid #e0e0e0; 83 } 84 .key_search a{ 85 31px; 86 height: 31px; 87 background-color: white; 88 float: left; 89 } 90 .key_search a span{ 91 11px; 92 height: 12px; 93 float: left; 94 background: url("icon.png") no-repeat 0 -197px; 95 margin-top: 9px; 96 margin-left: 11px; 97 } 98 99 .main{ 100 100%; 101 height: 780px; 102 background-color: #ededed; 103 } 104 105 .main_content{ 106 1025px; 107 height: 665px; 108 background-color: #fff; 109 margin: 0 auto; 110 111 } 112 113 .main_content_left{ 114 630px; 115 height: 700px; 116 margin-left: 28px; 117 margin-top: 44px; 118 display: inline-block; 119 } 120 121 .main_left_top{ 122 630px; 123 height: 43px; 124 padding-bottom: 10px; 125 border-bottom: 1px solid #ccdcef; 126 margin-top: 10px; 127 line-height: 43px; 128 } 129 130 .child_nav{ 131 float: left; 132 margin-top: 2px; 133 } 134 135 .child_nav .hot{ 136 60px; 137 height: 26px; 138 line-height: 26px; 139 margin-top: 3px; 140 margin-bottom: 13px; 141 margin-left: 3px; 142 text-align: center; 143 color: #333; 144 background: url("tip.png") no-repeat 0 -299px; 145 /*float: left;*/ 146 font-weight: 700; 147 font-size: 12px; 148 display: inline-block; 149 } 150 151 .child_nav .hot:hover{ 152 background:white; 153 color: #369; 154 } 155 156 .child_nav .new,.child_nav .people{ 157 display: inline-block; 158 60px; 159 height: 26px; 160 line-height: 26px; 161 margin-top: 3px; 162 margin-bottom: 13px; 163 text-align: center; 164 color: #369; 165 /*float: left;*/ 166 font-weight: 700; 167 font-size: 12px; 168 169 } 170 171 .child_nav .hot:hover,.child_nav .new:hover,.child_nav .people:hover{ 172 background: url("tip.png") no-repeat 0 -299px; 173 color: black; 174 } 175 176 .sort_nav{ 177 height: 15px; 178 line-height: 15px; 179 padding-top: 20px; 180 margin-right: 5px; 181 float: right; 182 183 } 184 185 .jishi_now{ 186 float: right; 187 color: #b4b4b4; 188 padding: 0 10px; 189 } 190 191 .day_3{ 192 float: right; 193 padding: 0 10px; 194 color: #390; 195 } 196 197 .hour_24{ 198 float: right; 199 padding: 0 10px; 200 color: #390; 201 } 202 203 .jishi_now:hover,.day_3:hover,.hour_24:hover{ 204 text-decoration: underline; 205 } 206 207 .publish_btn{ 208 120px; 209 height: 32px; 210 line-height: 32px; 211 float: right; 212 text-align: center; 213 font-size: 15px; 214 margin-top: 5px; 215 background-color: #84a42b; 216 border: 1px solid #8aab30; 217 color: white; 218 } 219 220 .news1{ 221 630px; 222 height: 90px; 223 border-bottom: 1px solid #ccdcef; 224 } 225 226 .news1_part1{ 227 /*float: left;*/ 228 567px; 229 } 230 .news1_title{ 231 font-size: 14px; 232 color: #369; 233 float: left; 234 margin-top: 15px; 235 236 } 237 238 .news1_title:hover{ 239 text-decoration: underline; 240 } 241 242 .news1_part2{ 243 float: right; 244 } 245 246 .news1_img{ 247 margin-top: 8px; 248 60px; 249 height: 60px; 250 background-color: #fff; 251 border: 1px solid #ccc; 252 padding: 1px; 253 /*margin-right: 25px;*/ 254 } 255 256 .news1_source{ 257 color: #b4b4b4; 258 margin-left: 7px; 259 margin-top: 18px; 260 float: left; 261 } 262 263 .news1_part3{ 264 float: left; 265 630px; 266 height: 27px; 267 margin-top: -20px; 268 } 269 270 .news1_span1,.news1_span2{ 271 54px; 272 height: 20px; 273 float: left; 274 margin-top: 3px; 275 } 276 277 .news1_span1_1{ 278 20px; 279 height: 20px; 280 float: left; 281 background:url("icon_bottom.png") no-repeat 0 -40px ; 282 } 283 284 .news1_span1_2,.news1_span2_2{ 285 float: left; 286 margin-left: 5px; 287 color: #99aecb; 288 } 289 290 .news1_span2_1{ 291 20px; 292 height: 20px; 293 float: left; 294 background:url("icon_bottom.png") no-repeat 0 -100px ; 295 } 296 297 .news1_span3,.news1_span4{ 298 69px; 299 height: 20px; 300 float: left; 301 margin-top: 3px; 302 } 303 .news1_span3_1{ 304 20px; 305 height: 20px; 306 float: left; 307 background:url("icon_bottom.png") no-repeat 0 -160px ; 308 } 309 310 .news1_span4_1{ 311 20px; 312 height: 20px; 313 float: left; 314 background:url("13.png") no-repeat 0 0 ; 315 margin-top: -4px; 316 border: 1px solid #ccc; 317 background-color: #fff; 318 padding: 1px; 319 } 320 .news1_span5{ 321 height: 20px; 322 float: left; 323 margin-top: 3px; 324 margin-left: 5px; 325 } 326 .news1_time{ 327 color: coral; 328 } 329 330 .news1_hot{ 331 color: #ccc; 332 } 333 334 .news1_span6{ 335 float: left; 336 /*display: none;*/ 337 height: 20px; 338 /*border: 1px solid red;*/ 339 margin-top: 3px; 340 padding-left: 10px; 341 color: #ccc; 342 opacity: 0; 343 } 344 345 .news1_span6:hover{ 346 display: block; 347 opacity: 1; 348 } 349 350 .share-icon a{ 351 16px; 352 height: 13px; 353 display: inline-block; 354 margin-right: 2px; 355 margin-top: 1px; 356 opacity: .3; 357 } 358 359 .icon-sina{ 360 background: url("share_icon.png") no-repeat 0 -90px; 361 } 362 363 .icon-douban{ 364 background: url("share_icon.png") no-repeat 0 -105px; 365 } 366 367 .icon-qqzone{ 368 background: url("share_icon.png") no-repeat 0 -120px; 369 } 370 371 .icon-tenxun{ 372 background: url("share_icon.png") no-repeat 0 -136px; 373 } 374 375 .icon-renren{ 376 background: url("share_icon.png") no-repeat 0 -151px; 377 } 378 379 ul{list-style: none;} 380 381 .page_num{ 382 float: left; 383 display: inline-block; 384 height: 36px; 385 630px; 386 /*border: 1px solid red;*/ 387 margin-top: 20px; 388 } 389 390 .current_page{ 391 float: left; 392 34px; 393 height: 34px; 394 line-height: 34px; 395 /*border: 1px solid blue;*/ 396 margin-left: -30px; 397 text-align: center; 398 } 399 li{ 400 display: inline-block; 401 } 402 403 .page-a{ 404 float: left; 405 34px; 406 height: 34px; 407 408 line-height: 34px; 409 text-align: center; 410 margin-left: 10px; 411 color: #369; 412 border: 1px solid #e1e1e1; 413 } 414 415 .page-next{ 416 float: left; 417 79px; 418 height: 34px; 419 border: 1px solid #e1e1e1; 420 line-height: 34px; 421 text-align: center; 422 margin-left: 10px; 423 } 424 425 .page-a:hover,.page-next:hover{ 426 background-color: #369; 427 color: white; 428 } 429 .rightcontent{ 430 float: right; 431 margin-right: 28px; 432 margin-top: 50px; 433 300px; 434 padding-top: 4px; 435 } 436 .rightcontent.h1.r1{ 437 display: inline-block; 438 } 439 440 .rightcontent.h1.r2{ 441 margin-left: 8px; 442 443 } 444 445 .rightcontent.s1{ 446 margin-left: 0; 447 27px; 448 height: 18px; 449 background: url("right.png") no-repeat 0 0; 450 display: inline-block; 451 margin-top: 10px; 452 margin-right: 5px; 453 } 454 .rightcontent.s1.a{ 455 font-size: 14px; 456 font-weight: bold; 457 color: #369; 458 cursor: pointer; 459 padding-left: 30px; 460 background: url("view.png") no-repeat left center; 461 height: 30px; 462 display: inline-block; 463 464 } 465 .rightcontent a{ 466 color: #369; 467 font-size: 14px; 468 font-weight: bold; 469 text-decoration: none; 470 471 } 472 .rightcontent .h2{ 473 margin-top: 10px; 474 475 } 476 .rightcontent .all{ 477 font-size: 14px; 478 font-weight: 700; 479 display: block; 480 padding-bottom: 10px; 481 color: #333; 482 line-height: 18px; 483 484 } 485 .rightcontent .all .t10{ 486 color: #c30; 487 } 488 .rightcontent.hot{ 489 300px; 490 height: 35px; 491 background-color: #4767b2; 492 color: #f4f4f4; 493 font-size: 12px; 494 text-align: center; 495 line-height: 35px; 496 margin-top: 10px; 497 } 498 .top{ 499 height: 38px; 500 38px; 501 position: fixed; 502 top: 500px; 503 left: 1200px; 504 background: url("images/Back-to-the-top_38_78.png") no-repeat 0 0; 505 } 506 .main_content_bottom{ 507 508 1025px; 509 height: 100px; 510 background-color: #fff; 511 margin: 0 auto; 512 513 514 padding-top: 15px; 515 text-align: center; 516 border-top: 1px solid #ccdcef; 517 } 518 519 .foot-nav a{ 520 color: #369; 521 } 522 .foot-nav a:hover{ 523 text-decoration: underline; 524 } 525 526 .foot_b{ 527 color: #999; 528 } 529 530 .foot_part2_b{ 531 color: #369; 532 } 533 534 .foot_part2_b:hover{ 535 text-decoration: underline; 536 }