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