项目一~Hotel5
浏览器截图：
1 buttom.css: 2 3 .dibuxinxi 4 { 5 margin-top: 30px; 6 overflow: hidden; 7 width: 100%; 8 min-width: 1000px; 9 background-color:#023c4d; 10 } 11 .xinxishang 12 { 13 width: 1000px; 14 color: #ffffff; 15 overflow: hidden; 16 margin: 0 auto; 17 } 18 .diyilie 19 { 20 float: left; 21 padding-left: 102px; 22 float: left; 23 } 24 .l1 25 { 26 padding-top: 22px; 27 font-size: 18px; 28 font-weight: bold; 29 } 30 .l2 31 { 32 padding-top: 11px; 33 font-size: 14px; 34 } 35 .l3,.l4,.l5 36 { 37 padding-top: 15px; 38 font-size: 14px; 39 } 40 .dierlie 41 { 42 float: left; 43 margin-left: 80px; 44 float: left; 45 } 46 .disanlie 47 { 48 float: left; 49 margin-left: 80px; 50 float: left; 51 } 52 .disilie 53 { 54 float: left; 55 margin-left: 80px; 56 float: left; 57 } 58 .l6 59 { 60 padding-top: 22px; 61 font-size: 14px; 62 } 63 .diwulie 64 { 65 float: left; 66 margin-left: 80px; 67 float: left; 68 } 69 .l7 70 { 71 font-size: 18px; 72 padding-top: 18px; 73 } 74 .xinxixia 75 { 76 border-top:1px solid #ffffff; 77 margin-top: 22px; 78 } 79 .dibukuang 80 { 81 height: 57px; 82 line-height: 57px; 83 width: 1000px; 84 margin: 0 auto; 85 } 86 .pp 87 { 88 text-align: center; 89 color: #ffffff; 90 }
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 }
reset.css: @charset "utf-8"; /*=========================Reset_start==========================*/ 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 { margin: 0; padding: 0; } html,body { font-family:"微软雅黑","宋体",Arail,Tabhoma; text-align: left; } ul,ol { list-style: none; } img { border: 0 none; } input,select,textarea { outline:0; } textarea { resize:none; overflow: auto; } table { border-collapse: collapse; border-spacing: 0; } th,strong,var,em { font-weight: normal; font-style: normal; } a { text-decoration: none; } /*==========================Reset_End===========================*/
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 <style> 10 .zsh_liuchengtiao 11 { 12 width: 100%; 13 height: 32px; 14 background-color: #d2d2d2; 15 margin-top: 20px; 16 overflow: hidden; 17 } 18 .zsh_liuchengtiaozhuti 19 { 20 width: 1002px; 21 height: 32px; 22 min-width: 1002px; 23 margin: 0 auto; 24 overflow: hidden; 25 position: relative; 26 } 27 .zsh_huiyou 28 { 29 width: 17px; 30 height: 32px; 31 background: url(images/zsh_灰箭头.jpg) no-repeat; 32 float: left; 33 margin-left: 198px; 34 } 35 .zsh_huangzhong 36 { 37 width: 189px; 38 height: 32px; 39 background: url(images/zsh_黄中.jpg) 0 0 repeat-x; 40 float: left; 41 42 } 43 .zsh_huangyou 44 { 45 width:16px; 46 height: 32px; 47 background: url(images/zsh_黄右.jpg) right top no-repeat; 48 margin-left: 173px; 49 } 50 .zsh_huangzuo 51 { 52 width: 17px; 53 height: 32px; 54 background: url(images/zsh_黄左箭头.jpg) left top no-repeat; 55 float: left; 56 } 57 .zsh_buzhou1 58 { 59 position: absolute; 60 left: 266px; 61 top: 6px; 62 width: 21px; 63 height: 21px; 64 } 65 .sure 66 { 67 line-height: 32px; 68 position: absolute; 69 left: 293px; 70 color: #fff9f4; 71 font-weight: bold; 72 font-size: 16px; 73 } 74 .zsh_buzhou2 75 { 76 position: absolute; 77 left: 459px; 78 top: 6px; 79 width: 21px; 80 height: 21px; 81 } 82 .pay 83 { 84 line-height: 32px; 85 position: absolute; 86 left: 489px; 87 color: #fff9f4; 88 font-weight: bold; 89 font-size: 16px; 90 } 91 .zsh_buzhou3 92 { 93 position: absolute; 94 left: 653px; 95 top: 6px; 96 width: 21px; 97 height: 21px; 98 } 99 .ok 100 { 101 line-height: 32px; 102 position: absolute; 103 left: 682px; 104 color: #fff9f4; 105 font-weight: bold; 106 font-size: 16px; 107 } 108 .zsh_zhongjian 109 { 110 border: 1px solid #3c3c3c; 111 width: 1000px; 112 height: 519px; 113 margin: 0 auto; 114 } 115 .black 116 { 117 width: 100%; 118 height:19px; 119 } 120 .zsh_shangbufen 121 { 122 position: relative; 123 border-bottom: 1px dashed #6e6e6e; 124 height: 72px; 125 width: 959px; 126 float: left; 127 margin-left: 20px; 128 font-size: 16px; 129 font-weight: bold; 130 color: #3c3c3c; 131 } 132 .zsh_kouqian 133 { 134 padding-left: 46px; 135 line-height: 72px; 136 } 137 .zsh_duihao 138 { 139 position: absolute; 140 left: 0px; 141 top: 22px; 142 } 143 .zsh_zuoxinxi 144 { 145 width: 542px; 146 float: left; 147 margin-left: 28px; 148 margin-top: 27px; 149 } 150 .zsh_dingdanhao,.zsh_zongjia 151 { 152 font-size: 16px; 153 font-weight: bold; 154 color: #3c3c3c; 155 text-align: center; 156 } 157 .zsh_zongjia 158 { 159 margin-top: 14px; 160 } 161 .zsh_chakandingdan 162 { 163 margin-left: 216px; 164 margin-top: 20px; 165 } 166 .zsh_quebao 167 { 168 font-size: 12px; 169 font-weight: bold; 170 color: #6e6e6e; 171 margin-top: 19px; 172 } 173 .zsh_heixian 174 { 175 width: 542px; 176 margin-top: 16px; 177 border: 1px solid #6e6e6e; 178 } 179 .zsh_dingdanshouji,.zsh_zhongyao,.zsh_chakanjifen 180 { 181 font-size: 12px; 182 font-weight: bold; 183 color: #6e6e6e; 184 } 185 .zsh_dingdanshouji 186 { 187 margin-top: 16px; 188 } 189 .zsh_zhongyao 190 { 191 margin-top: 11px; 192 } 193 .zsh_chakanjifen 194 { 195 margin-top: 14px; 196 } 197 .zsh_youxinxi 198 { 199 width: 406px; 200 height: 399px; 201 border: 1px solid #3c3c3c; 202 margin-top: 25px; 203 margin-left: 9px; 204 float: left; 205 } 206 .zsh_nindexuanze 207 { 208 height: 37px; 209 background-color: #d2d2d2; 210 line-height: 37px; 211 font-size: 16px; 212 font-weight: bold; 213 color: #3c3c3c; 214 padding-left: 20px; 215 } 216 .zsh_tupianhang 217 { 218 height: 108px; 219 margin-left: 20px; 220 margin-top: 25px; 221 } 222 .zsh_luoxuan 223 { 224 float: left; 225 } 226 .zsh_xilaideng 227 { 228 float: left; 229 margin-left: 30px; 230 font-weight: bold; 231 color: #3c3c3c; 232 } 233 .zsh_sixingban 234 { 235 float: left; 236 margin-left: 30px; 237 margin-top: 14px; 238 } 239 .zsh_xing1 240 { 241 float: left; 242 } 243 .zsh_xing2 244 { 245 float: left; 246 margin-left: 7px; 247 } 248 .zsh_xing3 249 { 250 float: left; 251 margin-left: 7px; 252 } 253 .zsh_xing4 254 { 255 float: left; 256 margin-left: 7px; 257 } 258 .zsh_xing5 259 { 260 float: left; 261 margin-left: 7px; 262 } 263 .zsh_pingdong 264 { 265 margin-top: 33px; 266 margin-left: 30px; 267 float: left; 268 font-weight: bold; 269 color: #3c3c3c; 270 } 271 .zsh_cx 272 { 273 margin-left: 30px; 274 margin-top: 14px; 275 color: #3c3c3c; 276 } 277 .zsh_chuangxing 278 { 279 font-weight: bold; 280 } 281 .zsh_rzsj 282 { 283 margin-left: 30px; 284 margin-top: 15px; 285 color: #3c3c3c; 286 } 287 .zsh_ruzhushijian 288 { 289 font-weight: bold; 290 } 291 .zsh_fw 292 { 293 margin-left: 30px; 294 margin-top: 14px; 295 color: #3c3c3c; 296 } 297 .zsh_fuwu 298 { 299 font-weight: bold; 300 float: left; 301 } 302 .zsh_tigongzaocan 303 { 304 margin-left: 5px; 305 float: left; 306 } 307 .zsh_zaocan 308 { 309 margin-left: 6px; 310 float: left; 311 } 312 .zsh_wuxianwangluo 313 { 314 float: left; 315 margin-left: 4px; 316 } 317 .zsh_wifi 318 { 319 float: left; 320 margin-left: 18px; 321 } 322 .zsh_xinyongka 323 { 324 float: left; 325 margin-left: 16px; 326 } 327 .zsh_xyk 328 { 329 float: left; 330 margin-left: 4px; 331 } 332 .zsh_xuxian 333 { 334 margin-left: 30px; 335 margin-top: 15px; 336 border: 1px dashed #6e6e6e; 337 float: left; 338 width: 343px; 339 } 340 .zsh_rzkf 341 { 342 margin-left: 30px; 343 float: left; 344 345 } 346 .zsh_ruzhu 347 { 348 float: left; 349 margin-top: 21px; 350 } 351 .zsh_kefang 352 { 353 float: left; 354 margin-top: 21px; 355 margin-left: 71px; 356 } 357 .zsh_yfje 358 { 359 margin-top: 14px; 360 margin-left: 30px; 361 float: left; 362 } 363 .zsh_yingfujine 364 { 365 font-weight: bold; 366 color: #3c3c3c; 367 float: left; 368 } 369 .zsh_xiaoxuxian 370 { 371 width: 220px; 372 border: 1px dotted #3c3c3c; 373 float: left; 374 margin-top: 19px; 375 } 376 .zsh_meijin1524 377 { 378 float: left; 379 color: #cc0000; 380 font-weight: bold; 381 } 382 .zsh_pianyila 383 { 384 float: right; 385 font-size: 12px; 386 color: #6e6e6e; 387 margin-right: 40px; 388 } 389 .zsh_youcehui 390 { 391 background: url(images/zsh_右边黑.png) no-repeat; 392 float: left; 393 width: 17px; 394 height: 32px; 395 } 396 </style> 397 </head> 398 <body> 399 <!-- 头部部分 --> 400 <div class="head"> 401 <div class="headcon"> 402 <div class="head1"> 403 <img src="images/ban.png" alt=""> 404 </div> 405 <div class="head2"> 406 <img class="banners phone" src="images/phone.png" alt=""> 407 <span class="banners headboreder yanse400">400-800-8820</span> 408 <a class="banners headboreder" href="###">登陆</a> 409 <a class="banners headboreder" href="###">注册</a> 410 <img class="banners xinglixiang" src="images/xingli.png" alt=""> 411 <span class="banners ">行李箱</span> 412 <input class="banners headinp sousuo" type="text"> 413 <img class="banners sousuo" src="images/sousuo.png" alt=""> 414 </div> 415 <div class="head3"> 416 <img src="images/fangzi.png" alt=""> 417 <a href="###">第一次</a> 418 <a href="###">目的地</a> 419 <a href="###">自定行程</a> 420 <a href="###">游记</a> 421 <a href="###">特产</a> 422 <a href="###">优惠</a> 423 <a href="###">环岛巴士</a> 424 </div> 425 </div> 426 </div> 427 <!-- 头部部分结束 --> 428 <!-- 中间主体部分开始 --> 429 <div class="zsh_liuchengtiao"><!-- 上方流程条 --> 430 <div class="zsh_liuchengtiaozhuti"><!-- 流程条主体 --> 431 <div class="zsh_huiyou"><!-- 左侧灰 --> 432 </div> 433 <div class="zsh_huangzhong"><!-- 步骤1 --> 434 <div class="zsh_huangzuo"> 435 <div class="zsh_huangyou"> 436 <img src="images/zsh_步骤1.png" alt="" class="zsh_buzhou1"> 437 <p class="sure"> 438 确认 439 </p> 440 </div> 441 </div> 442 </div> 443 <div class="zsh_huangzhong"><!-- 步骤2 --> 444 <div class="zsh_huangzuo"> 445 <div class="zsh_huangyou"> 446 <img src="images/zsh_步骤2.png" alt="" class="zsh_buzhou2"> 447 <p class="pay"> 448 支付 449 </p> 450 </div> 451 </div> 452 </div> 453 <div class="zsh_huangzhong"><!-- 步骤3 --> 454 <div class="zsh_huangzuo"> 455 <div class="zsh_huangyou"> 456 <img src="images/zsh_步骤3.png" alt="" class="zsh_buzhou3"> 457 <p class="ok"> 458 完成 459 </p> 460 </div> 461 </div> 462 </div> 463 <div class="zsh_youcehui"><!-- 右侧灰 --> 464 465 </div> 466 </div> 467 </div> 468 <div class="black"><!-- 空白条 --> 469 </div> 470 <div class="zsh_zhongjian"><!-- 中间交易信息 --> 471 <div class="zsh_shangbufen"><!-- 上部分 --> 472 <img src="images/zsh_对号.png" alt="确认对号" class="zsh_duihao"> 473 <div class="zsh_kouqian"> 474 您的订单已成功提交我们操作扣款，订单将在2014-11-20 13:00就给您确认将全额退款至您的付款账户。 475 </div> 476 </div> 477 <div class="zsh_zuoxinxi"><!-- 左边信息 --> 478 <p class="zsh_dingdanhao"> 479 订单号：290572978 480 </p> 481 <p class="zsh_zongjia"> 482 总价：¥1524 483 </p> 484 <img src="images/zsh_查看订单.png" alt="查看订单" class="zsh_chakandingdan"> 485 <p class="zsh_quebao"> 486 请确保您的手机号码填写正确，无效手机号码可能会导致订单取消。 487 </p> 488 <div class="zsh_heixian"> 489 </div> 490 <p class="zsh_dingdanshouji"> 491 订单号已发送至您的手机 :135344******* 492 </p> 493 <p class="zsh_zhongyao"> 494 请记住您的订单号，您也可以通过个人中心的我的订单中查询此订单。 495 </p> 496 <p class="zsh_chakanjifen"> 497 订单实际入住成功点评后每赠送100积分，您可以进入个人中心>我的积分中查看。 498 </p> 499 </div> 500 <div class="zsh_youxinxi"><!-- 右边信息 --> 501 <div class="zsh_nindexuanze"><!-- 您的选择 --> 502 您的选择 503 </div> 504 <div class="zsh_tupianhang"><!-- 图片行 --> 505 <img src="images/zsh_螺旋梯.jpg" alt="螺旋梯" class="zsh_luoxuan"> 506 <p class="zsh_xilaideng"> 507 喜来登酒店 508 </p> 509 <div class="zsh_sixingban"><!-- 四星半 --> 510 <img src="images/zsh_星星.png" alt="星星" class="zsh_xing1"> 511 <img src="images/zsh_星星.png" alt="星星" class="zsh_xing2"> 512 <img src="images/zsh_星星.png" alt="星星" class="zsh_xing3"> 513 <img src="images/zsh_星星.png" alt="星星" class="zsh_xing4"> 514 <img src="images/zsh_星星1.png" alt="星星" class="zsh_xing5"> 515 </div> 516 <p class="zsh_pingdong"> 517 屏东县恒春镇埔顶路55号 518 </p> 519 </div> 520 <div class="zsh_cx"><!-- 床型：大床 --> 521 <span class="zsh_chuangxing"> 522 床型： 523 </span> 524 <span> 525 大床 526 </span> 527 </div> 528 <div class="zsh_rzsj"><!-- 入住时间 --> 529 <span class="zsh_ruzhushijian"> 530 入住时间 : 531 </span> 532 <span> 533 12:00 534 </span> 535 </div> 536 <div class="zsh_fw"><!-- 服务 --> 537 <p class="zsh_fuwu"> 538 服务： 539 </p> 540 <img src="images/zsh_早餐.png" alt="提供早餐" class="zsh_zaocan"> 541 <div class="zsh_tigongzaocan"><!-- 提供早餐 --> 542 提供早餐 543 </div> 544 <img src="images/zsh_WiFi.png" alt="WiFi" class="zsh_wifi"> 545 <div class="zsh_wuxianwangluo"><!-- 无线网络 --> 546 无线网络 547 </div> 548 <img src="images/zsh_信用卡.png" alt="信用卡服务" class="zsh_xinyongka"> 549 <div class="zsh_xyk"><!-- 信用卡服务 --> 550 信用卡服务 551 </div> 552 </div> 553 <div class="zsh_xuxian"><!-- 虚线 --> 554 </div> 555 <div class="zsh_rzkf"><!-- 入住1晚，3间客房 --> 556 <span class="zsh_ruzhu"> 557 入住1晚 558 </span> 559 <span class="zsh_kefang"> 560 3间客房 561 </span> 562 </div> 563 <div class="zsh_yfje"><!-- 应付金额 --> 564 <p class="zsh_yingfujine"> 565 应付金额 566 </p> 567 <p class="zsh_xiaoxuxian"></p> 568 <p class="zsh_meijin1524"> 569 ¥1524 570 </p> 571 </div> 572 <div class="zsh_pianyila"><!-- 右下角508一晚 --> 573 ¥508/晚 574 </div> 575 </div> 576 </div> 577 <!-- 中间主体部分结束 --> 578 <!-- 底部信息栏开始 --> 579 <div class="dibuxinxi"><!-- 底部信息栏 --> 580 <div class="xinxishang"><!-- 信息栏上部分 --> 581 <ul class="diyilie"><!-- 1 --> 582 <li class="l1">关于遛弯</li> 583 <li class="l2">公司简介</li> 584 <li class="l3">联系我们</li> 585 <li class="l3">诚聘英才</li> 586 <li class="l3">网站地址</li> 587 </ul> 588 <ul class="dierlie"><!-- 2 --> 589 <li class="l1">帮助中心</li> 590 <li class="l2">赴台手续</li> 591 <li class="l3">遛弯玩法</li> 592 <li class="l3">常见问题</li> 593 </ul> 594 <ul class="disanlie"><!-- 3 --> 595 <li class="l1">网站条款</li> 596 <li class="l2">服务条款</li> 597 <li class="l3">免责声明</li> 598 </ul> 599 <ul class="disilie"><!-- 4 --> 600 <li class="l1">关注我们</li> 601 <li class="l6"><img src="images/zsh_微信logo.png" alt=""></li> 602 </ul> 603 <ul class="diwulie"><!-- 5 --> 604 <li class="l1">400 820 8820</li> 605 <li class="l7">周一至周日</li> 606 <li class="l7">9:00~20:00</li> 607 <li class="l7"><img src="images/zsh_在线服务.png" alt=""></li> 608 </ul> 609 </div> 610 <div class="xinxixia"><!-- 信息栏下部分 --> 611 <div class="dibukuang"> 612 <p class="pp"> 613 Copyright © 2013-2014 www.6waner.cn All Right Reserved. 京ICP备11015236号 614 </p> 615 </div> 616 </div> 617 </div> 618 </body> 619 </html>
