使用HTML和CSS实现以下页面：
- 抽屉首页
- 个人博客首页
- 小米官网首页
- 登录注册页面
一、抽屉首页
1.实现目标：https://dig.chouti.com/
2.代码：
HTML：
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>抽屉首页</title> 7 <link rel="stylesheet" href="chouti.css"> 8 </head> 9 <body> 10 11 <a name="start"></a> 12 13 <div class="head-box"> 14 <div class="head-content"> 15 <a href="#" class="logo"></a> 16 17 <div class="action-menu"> 18 <a href="#" class="tb active">全部</a><a href="#" class="tb">42区</a> 19 <a href="#" class="tb">段子</a> 20 <a href="#" class="tb">图片</a> 21 <a href="#" class="tb">挨踢1024</a> 22 <a href="#" class="tb">你问我答</a> 23 <a href="#" class="tb">视频</a> 24 </div> 25 26 <div class="key-search"> 27 <form action=""> 28 <input type="text" class="search-text"> 29 <a href="" class="i"> 30 <span class="icon"> 31 32 </span> 33 </a> 34 </form> 35 </div> 36 37 <div class="action-nav"> 38 <a href="#" class="register">注册</a> 39 <a href="#" class="login">登录</a> 40 </div> 41 </div> 42 </div> 43 44 <div class="main-content-box"> 45 <div class="main-content"> 46 <div class="content-L"> 47 <!-- 置顶区域 --> 48 <div class="top-area" style="margin-bottom: 0;"> 49 <div class="child-nav"> 50 <a href="#" class="active">最热</a> 51 <a href="#" class="newbtn">发现</a> 52 <a href="#" class="personbtn">人类发布</a> 53 </div> 54 55 <div class="sort-nav"> 56 <a href="#" class="active hotbtn" id="sort-nav-btn">即时排序</a> 57 <a href="#" class="newbtn" id="sort24-nav-btn">24小时</a> 58 <a href="#" class="newbtn" id="sort3-nav-btn">3天</a> 59 </div> 60 61 <a href="#" class="publish-btn"> 62 <span class="n2">+ 发布</span> 63 </a> 64 </div> 65 66 <!-- 内容区域 --> 67 <div class="content-list"> 68 <div class="item"> 69 <!--新闻图片--> 70 <div class="news-pic"> 71 <img src="img/news_img.jpg" alt="新闻图片"> 72 </div> 73 <!--新闻内容--> 74 <div class="news-content"> 75 <!--part1: 标题--> 76 <div class="part1"> 77 <a href="#" class="show-content"> 78 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句 79 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话 80 </a> 81 <span class="content-source">-www.guancha.cn</span> 82 <a href="#" class="n2"> 83 <span class="content-kind">42区</span> 84 </a> 85 </div> 86 <!--part2: 图标--> 87 <div class="part2"> 88 <a href="#" class="recommend a-icon" title="推荐"> 89 <span class="hand-icon icon-recommend"></span> 90 <b>4</b> 91 </a> 92 <a href="#" class="discuss a-icon" title="讨论"> 93 <span class="hand-icon icon-discuss"></span> 94 <b>5</b> 95 </a> 96 <a href="#" class="collect a-icon" title="加入私藏"> 97 <span class="hand-icon icon-collect"></span> 98 <b>私藏</b> 99 </a> 100 <a href="#" class="user-a a-icon"> 101 <span> 102 <img src="img/user.jpg" alt=""> 103 </span> 104 <b>张三</b> 105 </a> 106 <span class="left time-into"> 107 <a href="#" class="time-a"> 108 <b>十分钟前</b> 109 </a> 110 <i>入热榜</i> 111 </span> 112 <span class="share-site-to"> 113 <i>分享到</i> 114 <span class="share-icon"> 115 <a class="icon-sina" href="#" title="分享到新浪微博"></a> 116 <a class="icon-douban" href="#" title="分享到豆瓣"></a> 117 <a class="icon-qqzone" href="#" title="分享到QQ空间"></a> 118 <a class="icon-renren" href="#" title="分享到人人网"></a> 119 </span> 120 </span> 121 </div> 122 </div> 123 124 125 </div> 126 <div class="item"> 127 <!--新闻图片--> 128 <div class="news-pic"> 129 <img src="img/news_img.jpg" alt="新闻图片"> 130 </div> 131 <!--新闻内容--> 132 <div class="news-content"> 133 <!--part1: 标题--> 134 <div class="part1"> 135 <a href="#" class="show-content"> 136 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句 137 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话 138 </a> 139 <span class="content-source">-www.guancha.cn</span> 140 <a href="#" class="n2"> 141 <span class="content-kind">42区</span> 142 </a> 143 </div> 144 <!--part2: 图标--> 145 <div class="part2"> 146 <a href="#" class="recommend a-icon" title="推荐"> 147 <span class="hand-icon icon-recommend"></span> 148 <b>4</b> 149 </a> 150 <a href="#" class="discuss a-icon" title="讨论"> 151 <span class="hand-icon icon-discuss"></span> 152 <b>5</b> 153 </a> 154 <a href="#" class="collect a-icon" title="加入私藏"> 155 <span class="hand-icon icon-collect"></span> 156 <b>私藏</b> 157 </a> 158 <a href="#" class="user-a a-icon"> 159 <span> 160 <img src="img/user.jpg" alt=""> 161 </span> 162 <b>张三</b> 163 </a> 164 <span class="left time-into"> 165 <a href="#" class="time-a"> 166 <b>十分钟前</b> 167 </a> 168 <i>入热榜</i> 169 </span> 170 <span class="share-site-to"> 171 <i>分享到</i> 172 <span class="share-icon"> 173 <a class="icon-sina" href="#" title="分享到新浪微博"></a> 174 <a class="icon-douban" href="#" title="分享到豆瓣"></a> 175 <a class="icon-qqzone" href="#" title="分享到QQ空间"></a> 176 <a class="icon-renren" href="#" title="分享到人人网"></a> 177 </span> 178 </span> 179 </div> 180 </div> 181 182 183 </div> 184 <div class="item"> 185 <!--新闻图片--> 186 <div class="news-pic"> 187 <img src="img/news_img.jpg" alt="新闻图片"> 188 </div> 189 <!--新闻内容--> 190 <div class="news-content"> 191 <!--part1: 标题--> 192 <div class="part1"> 193 <a href="#" class="show-content"> 194 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句 195 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话 196 </a> 197 <span class="content-source">-www.guancha.cn</span> 198 <a href="#" class="n2"> 199 <span class="content-kind">42区</span> 200 </a> 201 </div> 202 <!--part2: 图标--> 203 <div class="part2"> 204 <a href="#" class="recommend a-icon" title="推荐"> 205 <span class="hand-icon icon-recommend"></span> 206 <b>4</b> 207 </a> 208 <a href="#" class="discuss a-icon" title="讨论"> 209 <span class="hand-icon icon-discuss"></span> 210 <b>5</b> 211 </a> 212 <a href="#" class="collect a-icon" title="加入私藏"> 213 <span class="hand-icon icon-collect"></span> 214 <b>私藏</b> 215 </a> 216 <a href="#" class="user-a a-icon"> 217 <span> 218 <img src="img/user.jpg" alt=""> 219 </span> 220 <b>张三</b> 221 </a> 222 <span class="left time-into"> 223 <a href="#" class="time-a"> 224 <b>十分钟前</b> 225 </a> 226 <i>入热榜</i> 227 </span> 228 <span class="share-site-to"> 229 <i>分享到</i> 230 <span class="share-icon"> 231 <a class="icon-sina" href="#" title="分享到新浪微博"></a> 232 <a class="icon-douban" href="#" title="分享到豆瓣"></a> 233 <a class="icon-qqzone" href="#" title="分享到QQ空间"></a> 234 <a class="icon-renren" href="#" title="分享到人人网"></a> 235 </span> 236 </span> 237 </div> 238 </div> 239 240 241 </div> 242 <div class="item"> 243 <!--新闻图片--> 244 <div class="news-pic"> 245 <img src="img/news_img.jpg" alt="新闻图片"> 246 </div> 247 <!--新闻内容--> 248 <div class="news-content"> 249 <!--part1: 标题--> 250 <div class="part1"> 251 <a href="#" class="show-content"> 252 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句 253 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话 254 </a> 255 <span class="content-source">-www.guancha.cn</span> 256 <a href="#" class="n2"> 257 <span class="content-kind">42区</span> 258 </a> 259 </div> 260 <!--part2: 图标--> 261 <div class="part2"> 262 <a href="#" class="recommend a-icon" title="推荐"> 263 <span class="hand-icon icon-recommend"></span> 264 <b>4</b> 265 </a> 266 <a href="#" class="discuss a-icon" title="讨论"> 267 <span class="hand-icon icon-discuss"></span> 268 <b>5</b> 269 </a> 270 <a href="#" class="collect a-icon" title="加入私藏"> 271 <span class="hand-icon icon-collect"></span> 272 <b>私藏</b> 273 </a> 274 <a href="#" class="user-a a-icon"> 275 <span> 276 <img src="img/user.jpg" alt=""> 277 </span> 278 <b>张三</b> 279 </a> 280 <span class="left time-into"> 281 <a href="#" class="time-a"> 282 <b>十分钟前</b> 283 </a> 284 <i>入热榜</i> 285 </span> 286 <span class="share-site-to"> 287 <i>分享到</i> 288 <span class="share-icon"> 289 <a class="icon-sina" href="#" title="分享到新浪微博"></a> 290 <a class="icon-douban" href="#" title="分享到豆瓣"></a> 291 <a class="icon-qqzone" href="#" title="分享到QQ空间"></a> 292 <a class="icon-renren" href="#" title="分享到人人网"></a> 293 </span> 294 </span> 295 </div> 296 </div> 297 298 299 </div> 300 <div class="item"> 301 <!--新闻图片--> 302 <div class="news-pic"> 303 <img src="img/news_img.jpg" alt="新闻图片"> 304 </div> 305 <!--新闻内容--> 306 <div class="news-content"> 307 <!--part1: 标题--> 308 <div class="part1"> 309 <a href="#" class="show-content"> 310 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句 311 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话 312 </a> 313 <span class="content-source">-www.guancha.cn</span> 314 <a href="#" class="n2"> 315 <span class="content-kind">42区</span> 316 </a> 317 </div> 318 <!--part2: 图标--> 319 <div class="part2"> 320 <a href="#" class="recommend a-icon" title="推荐"> 321 <span class="hand-icon icon-recommend"></span> 322 <b>4</b> 323 </a> 324 <a href="#" class="discuss a-icon" title="讨论"> 325 <span class="hand-icon icon-discuss"></span> 326 <b>5</b> 327 </a> 328 <a href="#" class="collect a-icon" title="加入私藏"> 329 <span class="hand-icon icon-collect"></span> 330 <b>私藏</b> 331 </a> 332 <a href="#" class="user-a a-icon"> 333 <span> 334 <img src="img/user.jpg" alt=""> 335 </span> 336 <b>张三</b> 337 </a> 338 <span class="left time-into"> 339 <a href="#" class="time-a"> 340 <b>十分钟前</b> 341 </a> 342 <i>入热榜</i> 343 </span> 344 <span class="share-site-to"> 345 <i>分享到</i> 346 <span class="share-icon"> 347 <a class="icon-sina" href="#" title="分享到新浪微博"></a> 348 <a class="icon-douban" href="#" title="分享到豆瓣"></a> 349 <a class="icon-qqzone" href="#" title="分享到QQ空间"></a> 350 <a class="icon-renren" href="#" title="分享到人人网"></a> 351 </span> 352 </span> 353 </div> 354 </div> 355 356 357 </div> 358 <div class="item"> 359 <!--新闻图片--> 360 <div class="news-pic"> 361 <img src="img/news_img.jpg" alt="新闻图片"> 362 </div> 363 <!--新闻内容--> 364 <div class="news-content"> 365 <!--part1: 标题--> 366 <div class="part1"> 367 <a href="#" class="show-content"> 368 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句 369 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话 370 </a> 371 <span class="content-source">-www.guancha.cn</span> 372 <a href="#" class="n2"> 373 <span class="content-kind">42区</span> 374 </a> 375 </div> 376 <!--part2: 图标--> 377 <div class="part2"> 378 <a href="#" class="recommend a-icon" title="推荐"> 379 <span class="hand-icon icon-recommend"></span> 380 <b>4</b> 381 </a> 382 <a href="#" class="discuss a-icon" title="讨论"> 383 <span class="hand-icon icon-discuss"></span> 384 <b>5</b> 385 </a> 386 <a href="#" class="collect a-icon" title="加入私藏"> 387 <span class="hand-icon icon-collect"></span> 388 <b>私藏</b> 389 </a> 390 <a href="#" class="user-a a-icon"> 391 <span> 392 <img src="img/user.jpg" alt=""> 393 </span> 394 <b>张三</b> 395 </a> 396 <span class="left time-into"> 397 <a href="#" class="time-a"> 398 <b>十分钟前</b> 399 </a> 400 <i>入热榜</i> 401 </span> 402 <span class="share-site-to"> 403 <i>分享到</i> 404 <span class="share-icon"> 405 <a class="icon-sina" href="#" title="分享到新浪微博"></a> 406 <a class="icon-douban" href="#" title="分享到豆瓣"></a> 407 <a class="icon-qqzone" href="#" title="分享到QQ空间"></a> 408 <a class="icon-renren" href="#" title="分享到人人网"></a> 409 </span> 410 </span> 411 </div> 412 </div> 413 414 415 </div> 416 <div class="item"> 417 <!--新闻图片--> 418 <div class="news-pic"> 419 <img src="img/news_img.jpg" alt="新闻图片"> 420 </div> 421 <!--新闻内容--> 422 <div class="news-content"> 423 <!--part1: 标题--> 424 <div class="part1"> 425 <a href="#" class="show-content"> 426 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句 427 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话 428 </a> 429 <span class="content-source">-www.guancha.cn</span> 430 <a href="#" class="n2"> 431 <span class="content-kind">42区</span> 432 </a> 433 </div> 434 <!--part2: 图标--> 435 <div class="part2"> 436 <a href="#" class="recommend a-icon" title="推荐"> 437 <span class="hand-icon icon-recommend"></span> 438 <b>4</b> 439 </a> 440 <a href="#" class="discuss a-icon" title="讨论"> 441 <span class="hand-icon icon-discuss"></span> 442 <b>5</b> 443 </a> 444 <a href="#" class="collect a-icon" title="加入私藏"> 445 <span class="hand-icon icon-collect"></span> 446 <b>私藏</b> 447 </a> 448 <a href="#" class="user-a a-icon"> 449 <span> 450 <img src="img/user.jpg" alt=""> 451 </span> 452 <b>张三</b> 453 </a> 454 <span class="left time-into"> 455 <a href="#" class="time-a"> 456 <b>十分钟前</b> 457 </a> 458 <i>入热榜</i> 459 </span> 460 <span class="share-site-to"> 461 <i>分享到</i> 462 <span class="share-icon"> 463 <a class="icon-sina" href="#" title="分享到新浪微博"></a> 464 <a class="icon-douban" href="#" title="分享到豆瓣"></a> 465 <a class="icon-qqzone" href="#" title="分享到QQ空间"></a> 466 <a class="icon-renren" href="#" title="分享到人人网"></a> 467 </span> 468 </span> 469 </div> 470 </div> 471 472 473 </div> 474 <div class="item"> 475 <!--新闻图片--> 476 <div class="news-pic"> 477 <img src="img/news_img.jpg" alt="新闻图片"> 478 </div> 479 <!--新闻内容--> 480 <div class="news-content"> 481 <!--part1: 标题--> 482 <div class="part1"> 483 <a href="#" class="show-content"> 484 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句 485 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话 486 </a> 487 <span class="content-source">-www.guancha.cn</span> 488 <a href="#" class="n2"> 489 <span class="content-kind">42区</span> 490 </a> 491 </div> 492 <!--part2: 图标--> 493 <div class="part2"> 494 <a href="#" class="recommend a-icon" title="推荐"> 495 <span class="hand-icon icon-recommend"></span> 496 <b>4</b> 497 </a> 498 <a href="#" class="discuss a-icon" title="讨论"> 499 <span class="hand-icon icon-discuss"></span> 500 <b>5</b> 501 </a> 502 <a href="#" class="collect a-icon" title="加入私藏"> 503 <span class="hand-icon icon-collect"></span> 504 <b>私藏</b> 505 </a> 506 <a href="#" class="user-a a-icon"> 507 <span> 508 <img src="img/user.jpg" alt=""> 509 </span> 510 <b>张三</b> 511 </a> 512 <span class="left time-into"> 513 <a href="#" class="time-a"> 514 <b>十分钟前</b> 515 </a> 516 <i>入热榜</i> 517 </span> 518 <span class="share-site-to"> 519 <i>分享到</i> 520 <span class="share-icon"> 521 <a class="icon-sina" href="#" title="分享到新浪微博"></a> 522 <a class="icon-douban" href="#" title="分享到豆瓣"></a> 523 <a class="icon-qqzone" href="#" title="分享到QQ空间"></a> 524 <a class="icon-renren" href="#" title="分享到人人网"></a> 525 </span> 526 </span> 527 </div> 528 </div> 529 530 531 </div> 532 <div class="item"> 533 <!--新闻图片--> 534 <div class="news-pic"> 535 <img src="img/news_img.jpg" alt="新闻图片"> 536 </div> 537 <!--新闻内容--> 538 <div class="news-content"> 539 <!--part1: 标题--> 540 <div class="part1"> 541 <a href="#" class="show-content"> 542 【小布什演讲引用丘吉尔名言】小布什在一场晚宴的演讲中引用了丘吉尔一句 543 名言,但是很多研究丘吉尔的专家表示丘吉尔并没有说过这句话 544 </a> 545 <span class="content-source">-www.guancha.cn</span> 546 <a href="#" class="n2"> 547 <span class="content-kind">42区</span> 548 </a> 549 </div> 550 <!--part2: 图标--> 551 <div class="part2"> 552 <a href="#" class="recommend a-icon" title="推荐"> 553 <span class="hand-icon icon-recommend"></span> 554 <b>4</b> 555 </a> 556 <a href="#" class="discuss a-icon" title="讨论"> 557 <span class="hand-icon icon-discuss"></span> 558 <b>5</b> 559 </a> 560 <a href="#" class="collect a-icon" title="加入私藏"> 561 <span class="hand-icon icon-collect"></span> 562 <b>私藏</b> 563 </a> 564 <a href="#" class="user-a a-icon"> 565 <span> 566 <img src="img/user.jpg" alt=""> 567 </span> 568 <b>张三</b> 569 </a> 570 <span class="left time-into"> 571 <a href="#" class="time-a"> 572 <b>十分钟前</b> 573 </a> 574 <i>入热榜</i> 575 </span> 576 <span class="share-site-to"> 577 <i>分享到</i> 578 <span class="share-icon"> 579 <a class="icon-sina" href="#" title="分享到新浪微博"></a> 580 <a class="icon-douban" href="#" title="分享到豆瓣"></a> 581 <a class="icon-qqzone" href="#" title="分享到QQ空间"></a> 582 <a class="icon-renren" href="#" title="分享到人人网"></a> 583 </span> 584 </span> 585 </div> 586 </div> 587 588 589 </div> 590 </div> 591 592 <!-- 页码区域 --> 593 <div id="page-area" class="page-area"> 594 <div id="pages"> 595 <ul> 596 <li><span class="current_page">1</span></li> 597 <li><a href="#" class="page-a">2</a></li> 598 <li><a href="#" class="page-a">3</a></li> 599 <li><a href="#" class="page-a">4</a></li> 600 <li><a href="#" class="page-a">5</a></li> 601 <li><a href="#" class="page-a">6</a></li> 602 <li><a href="#" class="page-a">7</a></li> 603 <li><a href="#" class="page-a">8</a></li> 604 <li><a href="#" class="page-a">9</a></li> 605 <li><a href="#" class="page-a">10</a></li> 606 <li><a href="#" class="page-a page-next">下一页</a></li> 607 </ul> 608 </div> 609 </div> 610 611 </div> 612 613 <div class="content-R"></div> 614 615 <div class="footer-box"> 616 <div class="foot-nav"> 617 <a href="">关于我们</a><span>|</span> 618 <a href="">联系我们</a><span>|</span> 619 <a href="">服务条款</a><span>|</span> 620 <a href="">隐私政策</a><span>|</span> 621 <a href="">抽屉新热榜工具</a><span>|</span> 622 <a href="">下载客户端</a><span>|</span> 623 <a href="">意见与反馈</a><span>|</span> 624 <a href="">友情链接</a><span>|</span> 625 <a href="">公告</a> 626 </div> 627 <div class="foot-nav2"> 628 <span class="foot_d">旗下站点</span> 629 <span class="foot_a">©2018chouti.com</span> 630 <a target="_blank" href="http://www.miibeian.gov.cn/" class="foot_b">京ICP备09053974号-3 京公网安备 631 110102004562</a> 632 <div style="margin-top:6px;"> 633 <span class="foot_d">违法和不良信息举报：</span> 634 <span class="foot_a">电话：010-58302039 </span> 635 <span class="foot_a" style="margin-left: 15px;">邮箱：<a style="color: #369;margin-right: 10px;" 636 href="mailto:jubao@chouti.com">jubao@chouti.com</a> </span> 637 </div> 638 <div style="margin-top:6px;">版权所有：北京格致璞科技有限公司</div> 639 </div> 640 </div> 641 </div> 642 </div> 643 644 <a href="#start" title="回到顶部" class="icon-main" style="display: block;"></a> 645 646 </body> 647 </html>