1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/head.css"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/buttom.css"> 9 <meta name="Keywords" content="机票"> 10 <meta name="Description" content="机票预订"> 11 <style> 12 .zsh_zhongjianbufen 13 { 14 width: 1000px; 15 margin:0 auto; 16 margin-top: 20px; 17 font-size: 12px; 18 font-weight: bold; 19 color: #616161; 20 } 21 .zsh_shangbu 22 { 23 overflow: hidden; 24 } 25 .zsh_shouye 26 { 27 font-size: 14px; 28 color: #3c3c3c; 29 } 30 .zsh_riqidaohang 31 { 32 width: 998px; 33 height: 94px; 34 border: 1px solid #3c3c3c; 35 margin-top: 19px; 36 } 37 .zsh_zuoceriqi 38 { 39 float: left; 40 margin-top: 8px; 41 margin-left: 19px; 42 width: 736px; 43 height: 78px; 44 position: relative; 45 } 46 .zsh_goriqi 47 { 48 float: left; 49 } 50 .zsh_xiaoyuan 51 { 52 float: left; 53 margin-top: 4px; 54 } 55 .zsh_dian 56 { 57 position: absolute; 58 left: 4px; 59 top: 8px; 60 float: left; 61 display: none; 62 } 63 .zsh_dancheng:hover .zsh_dian 64 { 65 display: block; 66 } 67 .zsh_dancheng,.zsh_chufariqi,.zsh_diqu,.zsh_chufachengshi 68 { 69 font-size: 16px; 70 color: #3c3c3c; 71 font-weight: bold; 72 } 73 .zsh_dancheng 74 { 75 float: left; 76 margin-left: 4px; 77 } 78 .zsh_chufariqi 79 { 80 float: left; 81 margin-left: 20px; 82 } 83 .zsh_diqu 84 { 85 float: left; 86 width: 139px; 87 height: 30px; 88 margin-left: 20px; 89 border:1px solid #3c3c3c; 90 } 91 .zsh_chufachengshi 92 { 93 float: left; 94 margin-left: 20px; 95 } 96 .zsh_kuangkuang 97 { 98 width: 211px; 99 height: 28px; 100 border: 1px solid #3c3c3c; 101 float: left; 102 margin-left: 20px; 103 } 104 .zsh_rili 105 { 106 float: left; 107 margin: 4px 9px; 108 padding-right: 9px; 109 } 110 .zsh_shijian 111 { 112 float: left; 113 width: 135px; 114 height: 26px; 115 border: 0px ; 116 } 117 .zsh_shuxian 118 { 119 float: left; 120 margin-left: 9px; 121 margin-right: 19px; 122 height: 28px; 123 width: 1px; 124 background-color: #6e6e6e; 125 } 126 .zsh_time 127 { 128 float: left; 129 margin-left: 20px; 130 width: 103px; 131 height: 28px; 132 border: 1px solid #3c3c3c; 133 } 134 .zsh_gobackriqi 135 { 136 float: left; 137 margin-top: 18px; 138 } 139 .zsh_youceyuding 140 { 141 float:left; 142 margin-left: 19px; 143 margin-top: 21px; 144 width: 205px; 145 height: 36px; 146 line-height: 36px; 147 text-align: center; 148 background-color: #ffa000; 149 color: #ffffff; 150 font-size: 18px; 151 font-weight: bold; 152 border-radius:8px; 153 } 154 .zsh_shousuoend 155 { 156 width: 1000px; 157 height: 38px; 158 background: #ffa000; 159 float: left; 160 margin-top: 20px; 161 } 162 .zsh_beijing,.zsh_taibei,.zsh_sou 163 { 164 font-size: 14px; 165 font-weight: bold; 166 color: #ffffff; 167 } 168 .zsh_beijing 169 { 170 float: left; 171 margin-top: 11px; 172 margin-left: 21px; 173 } 174 .zsh_taibei 175 { 176 float: left; 177 margin-top: 11px; 178 margin-left: 28px; 179 } 180 .zsh_sou 181 { 182 float: left; 183 margin-top: 11px; 184 margin-left: 22px; 185 } 186 .zsh_gojieshao 187 { 188 width: 998px; 189 height: 34px; 190 border-top: 1px dashed #6e6e6e; 191 border-bottom: 1px dashed #6e6e6e; 192 float: left; 193 margin-top: 19px; 194 font-size: 14px; 195 color: #3c3c3c; 196 } 197 .zsh_goway 198 { 199 float: left; 200 line-height: 34px; 201 } 202 .zsh_way 203 { 204 float: left; 205 line-height: 34px; 206 } 207 .zsh_all 208 { 209 float: left; 210 line-height: 34px; 211 margin-left: 14px; 212 } 213 .zsh_zuobu 214 { 215 float: left; 216 width: 703px; 217 font-size: 12px; 218 font-weight: bold; 219 } 220 .zsh_zuoyi 221 { 222 width: 703px; 223 height: 59px; 224 border-bottom: 1px dashed #6e6e6e; 225 float: left; 226 } 227 .zsh_lie1 228 { 229 float: left; 230 margin-top: 16px; 231 } 232 .zsh_nanfang,.zsh_16,.zsh_23 233 { 234 color: #3c3c3c; 235 } 236 .zsh_cs 237 { 238 margin-top: 7px; 239 } 240 .zsh_lie2 241 { 242 float: left; 243 margin-top: 16px; 244 margin-left: 24px; 245 } 246 .zsh_16 247 { 248 padding-left: 15px; 249 } 250 .zsh_shouji 251 { 252 float: left; 253 margin-top: 7px; 254 } 255 .zsh_lie3 256 { 257 float: left; 258 margin-left: 7px; 259 } 260 .zsh_jiantou 261 { 262 margin-top: 39px; 263 float: left; 264 } 265 .zsh_lie4 266 { 267 float: left; 268 margin-left: 7px; 269 margin-top: 16px; 270 } 271 .zsh_23 272 { 273 padding-left: 8px; 274 } 275 .zsh_taoyuan 276 { 277 margin-top: 7px; 278 } 279 .zsh_lie5 280 { 281 float: left; 282 margin-left: 44px; 283 margin-top: 32px; 284 } 285 .zsh_lie6 286 { 287 float: left; 288 margin-left: 44px; 289 margin-top: 32px; 290 } 291 .zsh_lie7 292 { 293 float: left; 294 margin-left: 35px; 295 margin-top: 32px; 296 color: #3c3c3c; 297 } 298 .zsh_lie8 299 { 300 float: left; 301 margin-top: 13px; 302 margin-left: 20px; 303 } 304 .zsh_168 305 { 306 padding-left: 22px; 307 color: #3c3c3c; 308 } 309 .zsh_jijian 310 { 311 margin-top: 7px; 312 } 313 .zsh_lie9 314 { 315 float: left; 316 margin-top: 16px; 317 margin-left: 30px; 318 } 319 .zsh_xuanding 320 { 321 width: 80px; 322 height: 25px; 323 background-color: #ffa000; 324 color: #ffffff; 325 font-size: 14px; 326 border-radius: 8px; 327 font-weight: bold; 328 } 329 .fanye 330 { 331 width: 1000px; 332 float:left; 333 margin-top: 20px; 334 } 335 .shangyiye 336 { 337 float: left; 338 margin-left: 220px; 339 } 340 .shuzi1 341 { 342 float: left; 343 margin-left: 14px; 344 } 345 .shengluehao 346 { 347 float: left; 348 margin-left: 7px; 349 } 350 .shuzi12 351 { 352 float: left; 353 margin-left: 8px; 354 355 } 356 .shuzi13 357 { 358 background-color: #6e6e6e; 359 width: 30px; 360 height: 20px; 361 float: left; 362 margin-left: 11px; 363 color: #ffffff; 364 text-align: center; 365 } 366 .shuzi14 367 { 368 margin-left: 10px; 369 float: left; 370 } 371 .shengluehao2 372 { 373 float: left; 374 margin-left: 9px; 375 } 376 .shuzi40 377 { 378 float: left; 379 margin-left: 9px; 380 } 381 .xiayiye 382 { 383 float: left; 384 margin-left: 12px; 385 } 386 .zsh_fenjie 387 { 388 float: left; 389 margin-top: 19px; 390 width: 703px; 391 height: 1px; 392 background-color: #6e6e6e; 393 margin-bottom: 29px; 394 } 395 .zsh_youbu 396 { 397 float: left; 398 margin-top: 16px; 399 margin-left: 28px; 400 width: 269px; 401 } 402 .zsh_youbushang 403 { 404 width: 269px; 405 height: 336px; 406 float: left; 407 position: relative; 408 } 409 .zsh_yinying 410 { 411 position: absolute; 412 bottom: 0px; 413 left: 0px; 414 } 415 .zsh_kending 416 { 417 position: absolute; 418 left: 32px; 419 top: 298px; 420 color: #ffffff; 421 font-size: 22px; 422 font-weight: bold; 423 } 424 .zsh_youbuxia 425 { 426 margin-top: 20px; 427 } 428 </style> 429 </head> 430 <body> 431 <!-- 头部部分开始 --> 432 <div class="head"> 433 <div class="headcon"> 434 <div class="head1"> 435 <img src="images/ban.png" alt=""> 436 </div> 437 <div class="head2"> 438 <img class="banners phone" src="images/phone.png" alt=""> 439 <span class="banners headboreder yanse400">400-800-8820</span> 440 <a class="banners headboreder" href="###">登陆</a> 441 <a class="banners headboreder" href="###">注册</a> 442 <img class="banners xinglixiang" src="images/xingli.png" alt=""> 443 <span class="banners ">行李箱</span> 444 <input class="banners headinp sousuo" type="text"> 445 <img class="banners sousuo" src="images/sousuo.png" alt=""> 446 </div> 447 <div class="head3"> 448 <img src="images/fangzi.png" alt=""> 449 <a href="###">第一次</a> 450 <a href="###">目的地</a> 451 <a href="###">自定行程</a> 452 <a href="###">游记</a> 453 <a href="###">特产</a> 454 <a href="###">优惠</a> 455 <a href="###">环岛巴士</a> 456 </div> 457 </div> 458 </div> 459 <!-- 头部部分结束 --> 460 <!-- 中间部分开始 --> 461 <div class="zsh_zhongjianbufen"><!-- 中间部分 --> 462 <div class="zsh_shangbu"><!-- 上部分 --> 463 <div class="zsh_shouye"><!-- 首页>预定>机票 --> 464 首页>预定>机票 465 </div> 466 <div class="zsh_riqidaohang"><!-- 日期导航栏 --> 467 <div class="zsh_zuoceriqi"><!-- 左侧日期选择 --> 468 <div class="zsh_goriqi"><!-- 出发日期 --> 469 <img src="images/zsh_小圆.png" alt="小圆" class="zsh_xiaoyuan"> 470 <p class="zsh_dancheng"> 471 单程 472 <img src="images/zsh_点.png" alt="点" class="zsh_dian"> 473 </p> 474 <p class="zsh_chufariqi"> 475 出发城市 476 </p> 477 <select name="地区" id="a" class="zsh_diqu"> 478 <option value="">北京</option> 479 <option value="">台北</option> 480 </select> 481 <p class="zsh_chufachengshi"> 482 出发日期 483 </p> 484 <div class="zsh_kuangkuang"> 485 <img src="images/zsh_日历.png" alt="日历" class="zsh_rili"> 486 <div class="zsh_shuxian"><!-- 竖线 --> 487 </div> 488 <input type="date" name="bday" class="zsh_shijian"> 489 </div> 490 <input type="time" name="time" class="zsh_time"> 491 </div> 492 <div class="zsh_gobackriqi"><!-- 返回日期 --> 493 <img src="images/zsh_小圆.png" alt="小圆" class="zsh_xiaoyuan"> 494 <p class="zsh_dancheng"> 495 单程 496 <img src="images/zsh_点.png" alt="点" class="zsh_dian"> 497 </p> 498 <p class="zsh_chufariqi"> 499 到达城市 500 </p> 501 <select name="地区" id="a" class="zsh_diqu"> 502 <option value="">北京</option> 503 <option value="">台北</option> 504 </select> 505 <p class="zsh_chufachengshi"> 506 返程日期 507 </p> 508 <div class="zsh_kuangkuang"> 509 <img src="images/zsh_日历.png" alt="日历" class="zsh_rili"> 510 <div class="zsh_shuxian"><!-- 竖线 --> 511 </div> 512 <input type="date" name="bday" class="zsh_shijian"> 513 </div> 514 <input type="time" name="time" class="zsh_time"> 515 </div> 516 </div> 517 <div><!-- 右侧预定 --> 518 <input type="button" name="订机票" value="订机票" class="zsh_youceyuding"> 519 </div> 520 </div> 521 <div class="zsh_shousuoend"><!-- 搜索结果导航栏 --> 522 <p class="zsh_beijing"> 523 北京 524 </p> 525 <p class="zsh_taibei"> 526 台北 527 </p> 528 <p class="zsh_sou"> 529 共191个报价信息，搜索结束 530 </p> 531 </div> 532 <div class="zsh_gojieshao"><!-- 去程介绍 --> 533 <p class="zsh_goway"> 534 去程 : 535 </p> 536 <p class="zsh_way"> 537 北京→台北 538 </p> 539 <p class="zsh_all"> 540 11月10日 (191个航班，68个直飞) 541 </p> 542 </div> 543 </div> 544 <div class="zsh_zuobu"><!-- 左部分 --> 545 <div class="zsh_zuoyi"><!-- 左部一行 --> 546 <ul class="zsh_lie1"><!-- 第一列 --> 547 <li class="zsh_nanfang"><!-- 一列一行 --> 548 南方航空 549 </li> 550 <li class="zsh_cs"><!-- 一列二行 --> 551 CS3009 45 552 </li> 553 </ul> 554 <ul class="zsh_lie2"><!-- 第二列 --> 555 <li class="zsh_16"> 556 16:10 557 </li> 558 <li class="zsh_shouji"> 559 首都机场T3 560 </li> 561 </ul> 562 <ul class="zsh_lie3"><!-- 第三列 --> 563 <li class="zsh_jiantou"> 564 → 565 </li> 566 </ul> 567 <ul class="zsh_lie4"><!-- 第四列 --> 568 <li class="zsh_23"> 569 23:25 570 </li> 571 <li class="zsh_taoyuan"> 572 桃园机场 573 </li> 574 </ul> 575 <ul class="zsh_lie5"><!-- 第五列 --> 576 <li> 577 直飞 578 </li> 579 </ul> 580 <ul class="zsh_lie6"><!-- 第六列 --> 581 <li> 582 约7小时 583 </li> 584 </ul> 585 <ul class="zsh_lie7"><!-- 第七列 --> 586 <li> 587 退改签 588 </li> 589 </ul> 590 <ul class="zsh_lie8"><!-- 第八列 --> 591 <li class="zsh_168"> 592 ¥1680起 593 </li> 594 <li class="zsh_jijian"> 595 机建+燃油 ： ¥678 596 </li> 597 </ul> 598 <ul class="zsh_lie9"><!-- 第九列 --> 599 <li> 600 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 601 </li> 602 </ul> 603 </div> 604 <div class="zsh_zuoyi"><!-- 左部二行 --> 605 <ul class="zsh_lie1"><!-- 第一列 --> 606 <li class="zsh_nanfang"><!-- 一列一行 --> 607 南方航空 608 </li> 609 <li class="zsh_cs"><!-- 一列二行 --> 610 CS3009 45 611 </li> 612 </ul> 613 <ul class="zsh_lie2"><!-- 第二列 --> 614 <li class="zsh_16"> 615 16:10 616 </li> 617 <li class="zsh_shouji"> 618 首都机场T3 619 </li> 620 </ul> 621 <ul class="zsh_lie3"><!-- 第三列 --> 622 <li class="zsh_jiantou"> 623 → 624 </li> 625 </ul> 626 <ul class="zsh_lie4"><!-- 第四列 --> 627 <li class="zsh_23"> 628 23:25 629 </li> 630 <li class="zsh_taoyuan"> 631 桃园机场 632 </li> 633 </ul> 634 <ul class="zsh_lie5"><!-- 第五列 --> 635 <li> 636 直飞 637 </li> 638 </ul> 639 <ul class="zsh_lie6"><!-- 第六列 --> 640 <li> 641 约7小时 642 </li> 643 </ul> 644 <ul class="zsh_lie7"><!-- 第七列 --> 645 <li> 646 退改签 647 </li> 648 </ul> 649 <ul class="zsh_lie8"><!-- 第八列 --> 650 <li class="zsh_168"> 651 ¥1680起 652 </li> 653 <li class="zsh_jijian"> 654 机建+燃油 ： ¥678 655 </li> 656 </ul> 657 <ul class="zsh_lie9"><!-- 第九列 --> 658 <li> 659 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 660 </li> 661 </ul> 662 </div> 663 <div class="zsh_zuoyi"><!-- 左部三行 --> 664 <ul class="zsh_lie1"><!-- 第一列 --> 665 <li class="zsh_nanfang"><!-- 一列一行 --> 666 南方航空 667 </li> 668 <li class="zsh_cs"><!-- 一列二行 --> 669 CS3009 45 670 </li> 671 </ul> 672 <ul class="zsh_lie2"><!-- 第二列 --> 673 <li class="zsh_16"> 674 16:10 675 </li> 676 <li class="zsh_shouji"> 677 首都机场T3 678 </li> 679 </ul> 680 <ul class="zsh_lie3"><!-- 第三列 --> 681 <li class="zsh_jiantou"> 682 → 683 </li> 684 </ul> 685 <ul class="zsh_lie4"><!-- 第四列 --> 686 <li class="zsh_23"> 687 23:25 688 </li> 689 <li class="zsh_taoyuan"> 690 桃园机场 691 </li> 692 </ul> 693 <ul class="zsh_lie5"><!-- 第五列 --> 694 <li> 695 直飞 696 </li> 697 </ul> 698 <ul class="zsh_lie6"><!-- 第六列 --> 699 <li> 700 约7小时 701 </li> 702 </ul> 703 <ul class="zsh_lie7"><!-- 第七列 --> 704 <li> 705 退改签 706 </li> 707 </ul> 708 <ul class="zsh_lie8"><!-- 第八列 --> 709 <li class="zsh_168"> 710 ¥1680起 711 </li> 712 <li class="zsh_jijian"> 713 机建+燃油 ： ¥678 714 </li> 715 </ul> 716 <ul class="zsh_lie9"><!-- 第九列 --> 717 <li> 718 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 719 </li> 720 </ul> 721 </div> 722 <div class="zsh_zuoyi"><!-- 左部四行 --> 723 <ul class="zsh_lie1"><!-- 第一列 --> 724 <li class="zsh_nanfang"><!-- 一列一行 --> 725 南方航空 726 </li> 727 <li class="zsh_cs"><!-- 一列二行 --> 728 CS3009 45 729 </li> 730 </ul> 731 <ul class="zsh_lie2"><!-- 第二列 --> 732 <li class="zsh_16"> 733 16:10 734 </li> 735 <li class="zsh_shouji"> 736 首都机场T3 737 </li> 738 </ul> 739 <ul class="zsh_lie3"><!-- 第三列 --> 740 <li class="zsh_jiantou"> 741 → 742 </li> 743 </ul> 744 <ul class="zsh_lie4"><!-- 第四列 --> 745 <li class="zsh_23"> 746 23:25 747 </li> 748 <li class="zsh_taoyuan"> 749 桃园机场 750 </li> 751 </ul> 752 <ul class="zsh_lie5"><!-- 第五列 --> 753 <li> 754 直飞 755 </li> 756 </ul> 757 <ul class="zsh_lie6"><!-- 第六列 --> 758 <li> 759 约7小时 760 </li> 761 </ul> 762 <ul class="zsh_lie7"><!-- 第七列 --> 763 <li> 764 退改签 765 </li> 766 </ul> 767 <ul class="zsh_lie8"><!-- 第八列 --> 768 <li class="zsh_168"> 769 ¥1680起 770 </li> 771 <li class="zsh_jijian"> 772 机建+燃油 ： ¥678 773 </li> 774 </ul> 775 <ul class="zsh_lie9"><!-- 第九列 --> 776 <li> 777 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 778 </li> 779 </ul> 780 </div> 781 <div class="zsh_zuoyi"><!-- 左部五行 --> 782 <ul class="zsh_lie1"><!-- 第一列 --> 783 <li class="zsh_nanfang"><!-- 一列一行 --> 784 南方航空 785 </li> 786 <li class="zsh_cs"><!-- 一列二行 --> 787 CS3009 45 788 </li> 789 </ul> 790 <ul class="zsh_lie2"><!-- 第二列 --> 791 <li class="zsh_16"> 792 16:10 793 </li> 794 <li class="zsh_shouji"> 795 首都机场T3 796 </li> 797 </ul> 798 <ul class="zsh_lie3"><!-- 第三列 --> 799 <li class="zsh_jiantou"> 800 → 801 </li> 802 </ul> 803 <ul class="zsh_lie4"><!-- 第四列 --> 804 <li class="zsh_23"> 805 23:25 806 </li> 807 <li class="zsh_taoyuan"> 808 桃园机场 809 </li> 810 </ul> 811 <ul class="zsh_lie5"><!-- 第五列 --> 812 <li> 813 直飞 814 </li> 815 </ul> 816 <ul class="zsh_lie6"><!-- 第六列 --> 817 <li> 818 约7小时 819 </li> 820 </ul> 821 <ul class="zsh_lie7"><!-- 第七列 --> 822 <li> 823 退改签 824 </li> 825 </ul> 826 <ul class="zsh_lie8"><!-- 第八列 --> 827 <li class="zsh_168"> 828 ¥1680起 829 </li> 830 <li class="zsh_jijian"> 831 机建+燃油 ： ¥678 832 </li> 833 </ul> 834 <ul class="zsh_lie9"><!-- 第九列 --> 835 <li> 836 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 837 </li> 838 </ul> 839 </div> 840 <div class="zsh_zuoyi"><!-- 左部六行 --> 841 <ul class="zsh_lie1"><!-- 第一列 --> 842 <li class="zsh_nanfang"><!-- 一列一行 --> 843 南方航空 844 </li> 845 <li class="zsh_cs"><!-- 一列二行 --> 846 CS3009 45 847 </li> 848 </ul> 849 <ul class="zsh_lie2"><!-- 第二列 --> 850 <li class="zsh_16"> 851 16:10 852 </li> 853 <li class="zsh_shouji"> 854 首都机场T3 855 </li> 856 </ul> 857 <ul class="zsh_lie3"><!-- 第三列 --> 858 <li class="zsh_jiantou"> 859 → 860 </li> 861 </ul> 862 <ul class="zsh_lie4"><!-- 第四列 --> 863 <li class="zsh_23"> 864 23:25 865 </li> 866 <li class="zsh_taoyuan"> 867 桃园机场 868 </li> 869 </ul> 870 <ul class="zsh_lie5"><!-- 第五列 --> 871 <li> 872 直飞 873 </li> 874 </ul> 875 <ul class="zsh_lie6"><!-- 第六列 --> 876 <li> 877 约7小时 878 </li> 879 </ul> 880 <ul class="zsh_lie7"><!-- 第七列 --> 881 <li> 882 退改签 883 </li> 884 </ul> 885 <ul class="zsh_lie8"><!-- 第八列 --> 886 <li class="zsh_168"> 887 ¥1680起 888 </li> 889 <li class="zsh_jijian"> 890 机建+燃油 ： ¥678 891 </li> 892 </ul> 893 <ul class="zsh_lie9"><!-- 第九列 --> 894 <li> 895 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 896 </li> 897 </ul> 898 </div> 899 <div class="zsh_zuoyi"><!-- 左部七行 --> 900 <ul class="zsh_lie1"><!-- 第一列 --> 901 <li class="zsh_nanfang"><!-- 一列一行 --> 902 南方航空 903 </li> 904 <li class="zsh_cs"><!-- 一列二行 --> 905 CS3009 45 906 </li> 907 </ul> 908 <ul class="zsh_lie2"><!-- 第二列 --> 909 <li class="zsh_16"> 910 16:10 911 </li> 912 <li class="zsh_shouji"> 913 首都机场T3 914 </li> 915 </ul> 916 <ul class="zsh_lie3"><!-- 第三列 --> 917 <li class="zsh_jiantou"> 918 → 919 </li> 920 </ul> 921 <ul class="zsh_lie4"><!-- 第四列 --> 922 <li class="zsh_23"> 923 23:25 924 </li> 925 <li class="zsh_taoyuan"> 926 桃园机场 927 </li> 928 </ul> 929 <ul class="zsh_lie5"><!-- 第五列 --> 930 <li> 931 直飞 932 </li> 933 </ul> 934 <ul class="zsh_lie6"><!-- 第六列 --> 935 <li> 936 约7小时 937 </li> 938 </ul> 939 <ul class="zsh_lie7"><!-- 第七列 --> 940 <li> 941 退改签 942 </li> 943 </ul> 944 <ul class="zsh_lie8"><!-- 第八列 --> 945 <li class="zsh_168"> 946 ¥1680起 947 </li> 948 <li class="zsh_jijian"> 949 机建+燃油 ： ¥678 950 </li> 951 </ul> 952 <ul class="zsh_lie9"><!-- 第九列 --> 953 <li> 954 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 955 </li> 956 </ul> 957 </div> 958 <div class="zsh_zuoyi"><!-- 左部八行 --> 959 <ul class="zsh_lie1"><!-- 第一列 --> 960 <li class="zsh_nanfang"><!-- 一列一行 --> 961 南方航空 962 </li> 963 <li class="zsh_cs"><!-- 一列二行 --> 964 CS3009 45 965 </li> 966 </ul> 967 <ul class="zsh_lie2"><!-- 第二列 --> 968 <li class="zsh_16"> 969 16:10 970 </li> 971 <li class="zsh_shouji"> 972 首都机场T3 973 </li> 974 </ul> 975 <ul class="zsh_lie3"><!-- 第三列 --> 976 <li class="zsh_jiantou"> 977 → 978 </li> 979 </ul> 980 <ul class="zsh_lie4"><!-- 第四列 --> 981 <li class="zsh_23"> 982 23:25 983 </li> 984 <li class="zsh_taoyuan"> 985 桃园机场 986 </li> 987 </ul> 988 <ul class="zsh_lie5"><!-- 第五列 --> 989 <li> 990 直飞 991 </li> 992 </ul> 993 <ul class="zsh_lie6"><!-- 第六列 --> 994 <li> 995 约7小时 996 </li> 997 </ul> 998 <ul class="zsh_lie7"><!-- 第七列 --> 999 <li> 1000 退改签 1001 </li> 1002 </ul> 1003 <ul class="zsh_lie8"><!-- 第八列 --> 1004 <li class="zsh_168"> 1005 ¥1680起 1006 </li> 1007 <li class="zsh_jijian"> 1008 机建+燃油 ： ¥678 1009 </li> 1010 </ul> 1011 <ul class="zsh_lie9"><!-- 第九列 --> 1012 <li> 1013 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 1014 </li> 1015 </ul> 1016 </div> 1017 <div class="zsh_zuoyi"><!-- 左部九行 --> 1018 <ul class="zsh_lie1"><!-- 第一列 --> 1019 <li class="zsh_nanfang"><!-- 一列一行 --> 1020 南方航空 1021 </li> 1022 <li class="zsh_cs"><!-- 一列二行 --> 1023 CS3009 45 1024 </li> 1025 </ul> 1026 <ul class="zsh_lie2"><!-- 第二列 --> 1027 <li class="zsh_16"> 1028 16:10 1029 </li> 1030 <li class="zsh_shouji"> 1031 首都机场T3 1032 </li> 1033 </ul> 1034 <ul class="zsh_lie3"><!-- 第三列 --> 1035 <li class="zsh_jiantou"> 1036 → 1037 </li> 1038 </ul> 1039 <ul class="zsh_lie4"><!-- 第四列 --> 1040 <li class="zsh_23"> 1041 23:25 1042 </li> 1043 <li class="zsh_taoyuan"> 1044 桃园机场 1045 </li> 1046 </ul> 1047 <ul class="zsh_lie5"><!-- 第五列 --> 1048 <li> 1049 直飞 1050 </li> 1051 </ul> 1052 <ul class="zsh_lie6"><!-- 第六列 --> 1053 <li> 1054 约7小时 1055 </li> 1056 </ul> 1057 <ul class="zsh_lie7"><!-- 第七列 --> 1058 <li> 1059 退改签 1060 </li> 1061 </ul> 1062 <ul class="zsh_lie8"><!-- 第八列 --> 1063 <li class="zsh_168"> 1064 ¥1680起 1065 </li> 1066 <li class="zsh_jijian"> 1067 机建+燃油 ： ¥678 1068 </li> 1069 </ul> 1070 <ul class="zsh_lie9"><!-- 第九列 --> 1071 <li> 1072 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 1073 </li> 1074 </ul> 1075 </div> 1076 <div class="zsh_zuoyi"><!-- 左部十行 --> 1077 <ul class="zsh_lie1"><!-- 第一列 --> 1078 <li class="zsh_nanfang"><!-- 一列一行 --> 1079 南方航空 1080 </li> 1081 <li class="zsh_cs"><!-- 一列二行 --> 1082 CS3009 45 1083 </li> 1084 </ul> 1085 <ul class="zsh_lie2"><!-- 第二列 --> 1086 <li class="zsh_16"> 1087 16:10 1088 </li> 1089 <li class="zsh_shouji"> 1090 首都机场T3 1091 </li> 1092 </ul> 1093 <ul class="zsh_lie3"><!-- 第三列 --> 1094 <li class="zsh_jiantou"> 1095 → 1096 </li> 1097 </ul> 1098 <ul class="zsh_lie4"><!-- 第四列 --> 1099 <li class="zsh_23"> 1100 23:25 1101 </li> 1102 <li class="zsh_taoyuan"> 1103 桃园机场 1104 </li> 1105 </ul> 1106 <ul class="zsh_lie5"><!-- 第五列 --> 1107 <li> 1108 直飞 1109 </li> 1110 </ul> 1111 <ul class="zsh_lie6"><!-- 第六列 --> 1112 <li> 1113 约7小时 1114 </li> 1115 </ul> 1116 <ul class="zsh_lie7"><!-- 第七列 --> 1117 <li> 1118 退改签 1119 </li> 1120 </ul> 1121 <ul class="zsh_lie8"><!-- 第八列 --> 1122 <li class="zsh_168"> 1123 ¥1680起 1124 </li> 1125 <li class="zsh_jijian"> 1126 机建+燃油 ： ¥678 1127 </li> 1128 </ul> 1129 <ul class="zsh_lie9"><!-- 第九列 --> 1130 <li> 1131 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 1132 </li> 1133 </ul> 1134 </div> 1135 <div class="zsh_zuoyi"><!-- 左部十一行 --> 1136 <ul class="zsh_lie1"><!-- 第一列 --> 1137 <li class="zsh_nanfang"><!-- 一列一行 --> 1138 南方航空 1139 </li> 1140 <li class="zsh_cs"><!-- 一列二行 --> 1141 CS3009 45 1142 </li> 1143 </ul> 1144 <ul class="zsh_lie2"><!-- 第二列 --> 1145 <li class="zsh_16"> 1146 16:10 1147 </li> 1148 <li class="zsh_shouji"> 1149 首都机场T3 1150 </li> 1151 </ul> 1152 <ul class="zsh_lie3"><!-- 第三列 --> 1153 <li class="zsh_jiantou"> 1154 → 1155 </li> 1156 </ul> 1157 <ul class="zsh_lie4"><!-- 第四列 --> 1158 <li class="zsh_23"> 1159 23:25 1160 </li> 1161 <li class="zsh_taoyuan"> 1162 桃园机场 1163 </li> 1164 </ul> 1165 <ul class="zsh_lie5"><!-- 第五列 --> 1166 <li> 1167 直飞 1168 </li> 1169 </ul> 1170 <ul class="zsh_lie6"><!-- 第六列 --> 1171 <li> 1172 约7小时 1173 </li> 1174 </ul> 1175 <ul class="zsh_lie7"><!-- 第七列 --> 1176 <li> 1177 退改签 1178 </li> 1179 </ul> 1180 <ul class="zsh_lie8"><!-- 第八列 --> 1181 <li class="zsh_168"> 1182 ¥1680起 1183 </li> 1184 <li class="zsh_jijian"> 1185 机建+燃油 ： ¥678 1186 </li> 1187 </ul> 1188 <ul class="zsh_lie9"><!-- 第九列 --> 1189 <li> 1190 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 1191 </li> 1192 </ul> 1193 </div> 1194 <div class="zsh_zuoyi"><!-- 左部十二行 --> 1195 <ul class="zsh_lie1"><!-- 第一列 --> 1196 <li class="zsh_nanfang"><!-- 一列一行 --> 1197 南方航空 1198 </li> 1199 <li class="zsh_cs"><!-- 一列二行 --> 1200 CS3009 45 1201 </li> 1202 </ul> 1203 <ul class="zsh_lie2"><!-- 第二列 --> 1204 <li class="zsh_16"> 1205 16:10 1206 </li> 1207 <li class="zsh_shouji"> 1208 首都机场T3 1209 </li> 1210 </ul> 1211 <ul class="zsh_lie3"><!-- 第三列 --> 1212 <li class="zsh_jiantou"> 1213 → 1214 </li> 1215 </ul> 1216 <ul class="zsh_lie4"><!-- 第四列 --> 1217 <li class="zsh_23"> 1218 23:25 1219 </li> 1220 <li class="zsh_taoyuan"> 1221 桃园机场 1222 </li> 1223 </ul> 1224 <ul class="zsh_lie5"><!-- 第五列 --> 1225 <li> 1226 直飞 1227 </li> 1228 </ul> 1229 <ul class="zsh_lie6"><!-- 第六列 --> 1230 <li> 1231 约7小时 1232 </li> 1233 </ul> 1234 <ul class="zsh_lie7"><!-- 第七列 --> 1235 <li> 1236 退改签 1237 </li> 1238 </ul> 1239 <ul class="zsh_lie8"><!-- 第八列 --> 1240 <li class="zsh_168"> 1241 ¥1680起 1242 </li> 1243 <li class="zsh_jijian"> 1244 机建+燃油 ： ¥678 1245 </li> 1246 </ul> 1247 <ul class="zsh_lie9"><!-- 第九列 --> 1248 <li> 1249 <input type="button" name="选定" value="选定" class="zsh_xuanding"> 1250 </li> 1251 </ul> 1252 </div> 1253 <div class="fanye"><!-- 左部十三行-翻页 --> 1254 <span class="shangyiye"> 1255 上一页 1256 </span><!-- 上一页 --> 1257 <span class="shuzi1"> 1258 1 1259 </span><!-- 1 --> 1260 <span class="shengluehao"> 1261 ..... 1262 </span><!-- 省略号 --> 1263 <span class="shuzi12"> 1264 12 1265 </span><!-- 12 --> 1266 <span class="shuzi13"> 1267 13 1268 </span><!-- 13 --> 1269 <span class="shuzi14"><!-- 14 --> 1270 14 1271 </span> 1272 <span class="shengluehao2"><!-- 省略号 --> 1273 ..... 1274 </span> 1275 <span class="shuzi40"><!-- 40 --> 1276 40 1277 </span> 1278 <span class="xiayiye"> <!-- 下一页 --> 1279 下一页 1280 </span> 1281 </div> 1282 <div class="zsh_fenjie"><!-- 左部十四行-分界线 --> 1283 </div> 1284 </div> 1285 <div class="zsh_youbu"><!-- 右部分 --> 1286 <div class="zsh_youbushang"><!-- 右部上 --> 1287 <img src="images/zsh_仰望楼.jpg" alt="仰望楼"> 1288 <img src="images/zsh_阴影.png" alt="阴影" class="zsh_yinying"> 1289 <p class="zsh_kending"> 1290 垦丁临海酒店随心定 1291 </p> 1292 </div> 1293 <div class="zsh_youbushang zsh_youbuxia"><!-- 右部下 --> 1294 <img src="images/zsh_公交车.jpg" alt="公家车"> 1295 <img src="images/zsh_阴影.png" alt="阴影" class="zsh_yinying"> 1296 <p class="zsh_kending"> 1297 一票在手，免费游岛 1298 </p> 1299 </div> 1300 </div> 1301 </div> 1302 <!-- 中间部分结束 --> 1303 <!-- 底部信息栏开始 --> 1304 <div class="dibuxinxi"><!-- 底部信息栏 --> 1305 <div class="xinxishang"><!-- 信息栏上部分 --> 1306 <ul class="diyilie"><!-- 1 --> 1307 <li class="l1">关于遛弯</li> 1308 <li class="l2">公司简介</li> 1309 <li class="l3">联系我们</li> 1310 <li class="l3">诚聘英才</li> 1311 <li class="l3">网站地址</li> 1312 </ul> 1313 <ul class="dierlie"><!-- 2 --> 1314 <li class="l1">帮助中心</li> 1315 <li class="l2">赴台手续</li> 1316 <li class="l3">遛弯玩法</li> 1317 <li class="l3">常见问题</li> 1318 </ul> 1319 <ul class="disanlie"><!-- 3 --> 1320 <li class="l1">网站条款</li> 1321 <li class="l2">服务条款</li> 1322 <li class="l3">免责声明</li> 1323 </ul> 1324 <ul class="disilie"><!-- 4 --> 1325 <li class="l1">关注我们</li> 1326 <li class="l6"><img src="images/微信logo.png" alt=""></li> 1327 </ul> 1328 <ul class="diwulie"><!-- 5 --> 1329 <li class="l1">400 820 8820</li> 1330 <li class="l7">周一至周日</li> 1331 <li class="l7">9:00~20:00</li> 1332 <li class="l7"><img src="images/zsh_在线服务.png" alt=""></li> 1333 </ul> 1334 </div> 1335 <div class="xinxixia"><!-- 信息栏下部分 --> 1336 <div class="dibukuang"> 1337 <p class="pp"> 1338 Copyright © 2013-2014 www.6waner.cn All Right Reserved. 京ICP备11015236号 1339 </p> 1340 </div> 1341 </div> 1342 </div> 1343 </body> 1344 </html>
浏览器截图部分：
代码部分：
1 head.css: 2 * 3 { 4 margin: 0; 5 padding: 0; 6 } 7 .head 8 { 9 border-bottom:4px solid #176fbb; 10 min-width: 1000px; 11 } 12 .headcon 13 { 14 width: 1000px; 15 margin: 0 auto; 16 overflow: hidden; 17 padding-top: 15px; 18 padding-bottom: 9px; 19 } 20 .head1 21 { 22 float: left; 23 } 24 .head2 25 { 26 float: right; 27 } 28 .banners 29 { 30 float: left; 31 margin-right: 14px; 32 font-family: "微软雅黑"; 33 font-size: 14px; 34 color: #505050; 35 text-decoration: none; 36 } 37 .headboreder 38 { 39 border-right: 2px solid #3c3c3c; 40 padding-right: 14px; 41 } 42 .headinp 43 { 44 width: 151px; 45 height: 24px; 46 margin-right: 0px; 47 } 48 .xinglixiang 49 { 50 margin-top: -5px; 51 } 52 .phone 53 { 54 margin-top: -1px; 55 } 56 .sousuo 57 { 58 margin-top: -6px; 59 } 60 .head3 61 { 62 float: left; 63 margin-left: 56px; 64 margin-top: 40px; 65 } 66 .head3 a 67 { 68 font-family: "微软雅黑"; 69 font-size: 18px; 70 color: #3c3c3c; 71 text-decoration: none; 72 margin-left: 38px; 73 }
1 buttom.css: 2 .dibuxinxi 3 { 4 margin-top: 30px; 5 overflow: hidden; 6 width: 100%; 7 min-width: 1000px; 8 background-color:#023c4d; 9 } 10 .xinxishang 11 { 12 width: 1000px; 13 color: #ffffff; 14 overflow: hidden; 15 margin: 0 auto; 16 } 17 .diyilie 18 { 19 float: left; 20 padding-left: 102px; 21 float: left; 22 } 23 .l1 24 { 25 padding-top: 22px; 26 font-size: 18px; 27 font-weight: bold; 28 } 29 .l2 30 { 31 padding-top: 11px; 32 font-size: 14px; 33 } 34 .l3,.l4,.l5 35 { 36 padding-top: 15px; 37 font-size: 14px; 38 } 39 .dierlie 40 { 41 float: left; 42 margin-left: 80px; 43 float: left; 44 } 45 .disanlie 46 { 47 float: left; 48 margin-left: 80px; 49 float: left; 50 } 51 .disilie 52 { 53 float: left; 54 margin-left: 80px; 55 float: left; 56 } 57 .l6 58 { 59 padding-top: 22px; 60 font-size: 14px; 61 } 62 .diwulie 63 { 64 float: left; 65 margin-left: 80px; 66 float: left; 67 } 68 .l7 69 { 70 font-size: 18px; 71 padding-top: 18px; 72 } 73 .xinxixia 74 { 75 border-top:1px solid #ffffff; 76 margin-top: 22px; 77 } 78 .dibukuang 79 { 80 height: 57px; 81 line-height: 57px; 82 width: 1000px; 83 margin: 0 auto; 84 } 85 .pp 86 { 87 text-align: center; 88 color: #ffffff; 89 }
1 reset.css: 2 @charset "utf-8"; 3 /*=========================Reset_start==========================*/ 4 body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option 5 { 6 margin: 0; 7 padding: 0; 8 } 9 html,body 10 { 11 font-family:"微软雅黑","宋体",Arail,Tabhoma; 12 text-align: left; 13 } 14 ul,ol 15 { 16 list-style: none; 17 } 18 img 19 { 20 border: 0 none; 21 } 22 input,select,textarea 23 { 24 outline:0; 25 } 26 textarea 27 { 28 resize:none; 29 overflow: auto; 30 } 31 table 32 { 33 border-collapse: collapse; 34 border-spacing: 0; 35 } 36 th,strong,var,em 37 { 38 font-weight: normal; 39 font-style: normal; 40 } 41 a 42 { 43 text-decoration: none; 44 } 45 46 /*==========================Reset_End===========================*/