请老师帮我看下代码有没有需要改的
要麻烦老师花点时间看下，看看做到这个阶段代码有什么地方不够的。谢谢了。（鞠躬）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/css.css"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/base.css"></head><body> <header class="site-head"> <!-- 顶部黑色导航 --> <div class="topbar"> <div class="center-wrap"> <nav class="shortcut-links"> <ul> <li> <a href="">目的地</a> </li> <li> <a href="">锦囊</a> </li> <li class="have-menu"> <a href="">社区</a> <p class="arrow"> <span class="arrow-box1"></span> </p> <div class="commlist"> <ul> <li><a href="#">旅行论坛</a></li> <li><a href="#">旅行专栏</a></li> <li><a href="#">旅行问答</a></li> <li><a href="#">旅行生活分享平台</a></li> <li><a href="#">JNE旅行生活美学</a></li> <li><a href="#">Biu伴（原结伴同游)</a></li> <li><a href="#">负责任的旅行</a></li> <li><a href="#">特别策划</a></li> </ul> </div> </li> <li> <a href="">行程助手</a> </li> <li class="have-menu"> <a href="">商城 </a> <p class="arrow"> <span class="arrow-box1"></span> </p> <div class="commlist shopping"> <ul> <li><a href="#">机酒自由行</a></li> <li><a href="#">当地玩乐</a></li> <li><a href="#">签证</a></li> <li><a href="#">保险</a></li> <li><a href="#">租车自驾</a></li> <li><a href="#">邮轮</a></li> <li><a href="#">河轮</a></li> <li><a href="#">私人订制</a></li> <li><a href="#">欧洲铁路</a></li> </ul> </div> </li> <li class="have-menu"> <a href="">酒店·民宿</a> <p class="arrow"> <span class="arrow-box1"></span> </p> <div class="commlist public"> <ul> <li><a href="#">酒店</a></li> <li><a href="#">爱彼迎</a></li> <li><a href="#">华人旅馆</a></li> </ul> </div> </li> <li> <a href="">特价酒店</a> </li> </ul> </nav> <nav class="topbar-right iconfont"> <a href="#"></a> <span>|</span> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#">登录</a> <a href="#">注册</a> </nav> </div> </div> <!-- 顶部绿色导航 --> <nav class="main-nav "> <div class="main-nav-box center-wrap"> <ul> <li class="main-downicon"><a href="#">机酒自由行</a> <p class="main-downicon-arrow"> <span class="main-downicon-arrowbox2"></span> </p> <div class="main-downicon-list jijiu"> <dl> <dt> <a href="#">全部</a> </dt> <dd> <a href="#">自由行</a> <a href="#">优惠机票</a> <a href="#">酒店</a> <a href="#">邮轮</a> <a href="#">定制游</a> <a href="#">马尔代夫</a> <a href="#">海岛游</a> </dd> </dl> </div> </li> <li><a href="#">优惠机票</a></li> <li class="main-downicon"><a href="#">跟团游</a> <p class="main-downicon-arrow"> <span class="main-downicon-arrowbox2"></span> </p> <div class="main-downicon-list gengtuan"> <dl> <dt> <a href="#">全部</a> </dt> <dd> <a href="#">跟团游</a> <a href="#">半自助游</a> </dd> </dl> </div> </li> <li><a href="#">酒店</a></li> <li class="main-downicon"><a href="#">当地玩乐</a> <p class="main-downicon-arrow"> <span class="main-downicon-arrowbox2"></span> </p> <div class="main-downicon-list dangdiwanle"> <dl> <dt> <a href="#">全部</a> </dt> <dd><a href="#">日游小团</a> <a href="#">深度体验</a> <a href="#">门票票券 </a> <a href="#">餐饮美食</a> <a href="#">WIFI电话卡</a> <a href="#">购物</a> <a href="#">交通票券</a> </dd> </dl> </div> </li> <li><a href="#">签证</a></li> <li><a href="#">游轮</a></li> <li><a href="#">河轮</a></li> <li><a href="#">保险</a></li> <li><a href="#">租车自驾</a></li> <li class="main-downicon"><a href="#">深度旅游</a> <p class="main-downicon-arrow"> <span class="main-downicon-arrowbox2"></span> </p> <div class="main-downicon-list sdulvyou"> <dl> <dt> <a href="#">全部</a> </dt> <dd><a href="#">CityWalk</a> <a href="#">特色长线</a> <a href="#">Q-Home</a> </dd> </dl> </div> </li> <li><a href="#">私人定制</a></li> </ul> </div> </nav> <div class="logo-nav"> <div class="logo-nav-box center-wrap"> <h1 class="logo">慕云游商城</h1> <div class="input-box"> <input type="text" placeholder="旅游/酒店/民宿"> <a class="iconfont" href="#"></a> </div> </div> </div> </header> <!-- banner轮播图 --> <section class="bannerbox"> <img class="bigbanner" src="images/轮播banner2@2x.jpg" alt=""> <div class="center-wrap bannercenter"> <a href="#" class="banner-left-icon"></a> <a href="#" class="banner-right-icon"></a> <div class="banner-rightlist"> <ul> <li class="block"> <dl> <dt>热门出发地</dt> <dd> <span> 北京</span> <span> 上海</span> <span> 广深</span> <span> 西南</span> <span> 国内其他</span> </dd> </dl> <div class=" banner-icon"></div> <div class=" banner-icon right-icon"></div> </li> <li> <dl> <dt>港澳台 国内</dt> <dd> <span> 香港</span> <span> 澳门</span> <span> 台湾</span> <span> 国内其他</span> </dd> </dl> <div class=" banner-icon"></div> </li> <li> <dl> <dt>日本 韩国</dt> <dd> <span> 东京</span> <span> 大版</span> <span> 冲绳</span> <span> 北海道</span> <span> 福冈</span> </dd> </dl> <div class=" banner-icon"></div> </li> <li> <dl> <dt>东南亚 南亚</dt> <dd> <span> 泰国</span> <span> 新加坡</span> <span> 马来西亚</span> <span> 马尔代夫</span> </dd> </dl> <div class=" banner-icon"></div> </li> <li> <dl> <dt>欧洲 美洲</dt> <dd> <span> 英国</span> <span> 法国</span> <span> 美国</span> <span> 加拿大</span> </dd> </dl> <div class=" banner-icon"></div> </li> <li> <dl> <dt>澳新 中东非</dt> <dd> <span> 澳大利亚</span> <span> 新西兰</span> <span> 迪拜</span> </dd> </dl> <div class=" banner-icon"></div> </li> </ul> </div> <div class="banner-hiddenlist"> <dl> <dt>港澳台</dt> <dd> <a href="#">香港</a> <a href="#">澳门</a> <a href="#">台北</a> <a href="#">高雄</a> <a href="#">香港迪士尼</a> <a href="#">香港海洋公园</a> <a href="#">交通接驳</a> <a href="#">澳门塔</a> <a href="#">新濠天地水舞间</a> <a href="#">澳门豪华自助</a> <a href="#">台北101</a> <a href="#">台湾美食</a> </dd> </dl> <dl> <dt>国内热门城市</dt> <dd> <a href="#">三亚</a> <a href="#">东北雪乡</a> <a href="#">大理</a> <a href="#">丽江</a> <a href="#">昆明</a> <a href="#">西双版纳</a> <a href="#">拉萨</a> <a href="#">成都</a> <a href="#">重庆</a> <a href="#">长白山</a> <a href="#">厦门</a> <a href="#">长沙</a> <a href="#">桂林</a> <a href="#">北京</a> <a href="#">西安</a> <a href="#">敦煌</a> <a href="#">杭州</a> <a href="#">上海</a> <a href="#">无锡</a> <a href="#">南京</a> <a href="#">广州</a> <a href="#">黄山</a> <a href="#">莫干山</a> <a href="#">新疆</a> <a href="#">北海</a> <a href="#">九华山</a> <a href="#">太原</a> <a href="#">张家口</a> </dd> </dl> <dl> <dt>国内热门景点</dt> <dd> <a href="#">北京故宫</a> <a href="#">东北滑雪</a> <a href="#">恭王府</a> <a href="#">长城</a> <a href="#">青城山大熊猫基地</a> <a href="#">峨眉山</a> <a href="#">都江堰</a> <a href="#">长恨歌表演</a> <a href="#">兵马俑</a> <a href="#">大唐芙蓉园</a> <a href="#">三亚日游</a> <a href="#">厦门鼓浪屿</a> <a href="#">千岛湖</a> <a href="#">呼伦贝尔草原</a> <a href="#">希拉穆仁草原</a> <a href="#">大理日游</a> <a href="#">杭州</a> <a href="#">重庆两江夜游船票</a> </dd> </dl> </div> <div class="banner-hiddenlist"> <dl> <dt>港澳台</dt> <dd> <a href="#">香港</a> <a href="#">澳门</a> <a href="#">台北</a> <a href="#">高雄</a> <a href="#">香港迪士尼</a> <a href="#">香港海洋公园</a> <a href="#">交通接驳</a> <a href="#">澳门塔</a> <a href="#">新濠天地水舞间</a> <a href="#">澳门豪华自助</a> <a href="#">台北101</a> <a href="#">台湾美食</a> </dd> </dl> </div> <div class="banner-hiddenlist"> <dl> <dt>日本</dt> <dd> <a href="#">东京</a> <a href="#">大阪</a> <a href="#">冲绳</a> <a href="#">北海道</a> <a href="#">札幌</a> <a href="#">京都</a> <a href="#">名古屋</a> <a href="#">福冈</a> <a href="#">长崎</a> <a href="#">鹿儿岛</a> <a href="#">JR Pass</a> <a href="#">米其林餐厅</a> <a href="#">东京迪士尼</a> <a href="#">大阪环球影城</a> <a href="#">冲绳一日游</a> <a href="#">City Walk</a> <a href="#">西瓜卡</a> <a href="#">京都日游</a> <a href="#">和服体验</a> <a href="#">包车服务</a> <a href="#">富士山日游</a> </dd> </dl> </div> <div class="banner-hiddenlist"> <dl> <dt>泰新马</dt> <dd> <a href="#">普吉岛</a> <a href="#">清迈</a> <a href="#">曼谷</a> <a href="#">苏梅岛</a> <a href="#">甲米</a> <a href="#">芭堤雅</a> <a href="#">拜县</a> <a href="#">新加坡</a> <a href="#">马来西亚</a> <a href="#">沙巴</a> <a href="#">吉隆坡</a> <a href="#">皇帝岛</a> <a href="#">泰国人妖</a> <a href="#">泰国丛林飞跃</a> <a href="#">泰国spa按摩</a> <a href="#">清迈夜间动物园</a> <a href="#">泰拳表演清莱一日游</a> <a href="#">新加坡环球影城</a> <a href="#">新加坡日游</a> <a href="#">新加坡滨海湾花园</a> <a href="#">沙巴美人鱼岛</a> <a href="#">沙巴红树林萤火虫</a> </dd> </dl> <dl> <dt>东南亚</dt> <dd> <a href="#">巴厘岛</a> <a href="#">长滩岛</a> <a href="#">马尼拉</a> <a href="#">薄荷岛</a> <a href="#">美娜多芽庄</a> <a href="#">岘港</a> <a href="#">富国岛</a> <a href="#">柬埔寨</a> <a href="#">缅甸</a> <a href="#">老挝</a> <a href="#">文莱</a> <a href="#">蓝梦岛</a> <a href="#">巴厘岛SPA</a> <a href="#">网红漂浮下午茶</a> <a href="#">珍珠岛游乐园</a> <a href="#">富国岛浮潜海钓</a> <a href="#">吴哥窟</a> <a href="#">西哈努克</a> </dd> </dl> <dl> <dt>南亚 西亚</dt> <dd> <a href="#">马尔代夫</a> <a href="#">斯里兰卡</a> <a href="#">印度</a> <a href="#">尼泊尔</a> <a href="#">格鲁吉亚阿塞拜疆</a> <a href="#">亚美尼亚</a> </dd> </dl> </div> <div class="banner-hiddenlist"> <dl> <dt>欧洲</dt> <dd> <a href="#">法国</a> <a href="#">意大利</a> <a href="#">土耳其</a> <a href="#">俄罗斯</a> <a href="#">西班牙</a> <a href="#">瑞士</a> <a href="#">英国</a> <a href="#">希腊</a> <a href="#">荷兰</a> <a href="#">德国</a> <a href="#">捷克</a> <a href="#">葡萄牙</a> <a href="#">奥地利</a> <a href="#">瑞典</a> <a href="#">丹麦</a> <a href="#">挪威</a> <a href="#">冰岛</a> <a href="#">芬兰</a> <a href="#">罗瓦涅米</a> <a href="#">奥斯陆</a> <a href="#">雷克雅未克</a> <a href="#">因特拉肯</a> <a href="#">巴塞罗那</a> <a href="#">伦敦</a> <a href="#">巴黎</a> <a href="#">塞纳河</a> <a href="#">慕尼黑</a> <a href="#">普罗旺斯</a> <a href="#">温莎日游</a> <a href="#">巴黎迪斯尼</a> <a href="#">伊斯坦布</a> <a href="#">尔阿尔罕布拉宫</a> <a href="#">唐顿庄园</a> <a href="#">埃菲尔铁塔</a> <a href="#">凡尔赛宫</a> <a href="#">北欧破冰船</a> <a href="#">极光之旅</a> <a href="#">英国天空岛</a> </dd> </dl> <dl> <dt>美洲</dt> <dd> <a href="#">美国</a> <a href="#">加拿大</a> <a href="#">墨西哥</a> <a href="#">巴西</a> <a href="#">阿根廷</a> <a href="#">智利</a> <a href="#">秘鲁</a> <a href="#">玻利维亚</a> <a href="#">洛杉矶</a> <a href="#">纽约</a> <a href="#">拉斯维加斯</a> <a href="#">旧金山</a> <a href="#">圣地亚哥芝加哥</a> <a href="#">西雅图</a> <a href="#">华盛顿</a> <a href="#">奥兰多</a> <a href="#">夏威夷</a> <a href="#">塞班岛</a> <a href="#">关岛</a> <a href="#">环球影城</a> <a href="#">迪士尼</a> <a href="#">演出票</a> <a href="#">尼亚加拉大瀑布</a> <a href="#">帝国大厦</a> <a href="#">奥特莱斯</a> <a href="#">黄石国家公园</a> <a href="#">纽约大都会博物馆</a> <a href="#">美国大峡谷西峡</a> <a href="#">拉斯维加斯摩天轮</a> <a href="#">羚羊峡谷+马蹄湾</a> </dd> </dl> </div> <div class="banner-hiddenlist"> <dl> <dt>澳新 南太平洋</dt> <dd> <a href="#">墨尔本</a> <a href="#">悉尼</a> <a href="#">黄金海岸</a> <a href="#">凯恩斯</a> <a href="#">布里斯班奥克兰</a> <a href="#">斐济</a> <a href="#">珀斯</a> <a href="#">圣灵群岛</a> <a href="#">大堡礁</a> <a href="#">墨尔本之星</a> <a href="#">悉尼热气球</a> <a href="#">水上飞机</a> <a href="#">海港大桥</a> <a href="#">皇后镇霍比特人村</a> <a href="#">怀托莫萤火虫洞</a> <a href="#">米尔福德峡湾</a> <a href="#">新西兰滑雪</a> <a href="#">瓦纳卡</a> </dd> </dl> <dl> <dt>中东非</dt> <dd> <a href="#">迪拜</a> <a href="#">摩洛哥</a> <a href="#">毛里求斯</a> <a href="#">埃及</a> <a href="#">塞舌尔</a> <a href="#">马达加斯加</a> <a href="#">以色列</a> <a href="#">肯尼亚</a> <a href="#">南非</a> <a href="#">伊朗 约旦</a> <a href="#">突尼斯 迪拜</a> <a href="#">塔法拉利主题公园</a> <a href="#">迪拜七星帆船酒店用餐</a> <a href="#">夜游迪拜河</a> <a href="#">亚特兰蒂斯水上乐园</a> <a href="#">动物大迁徙</a> <a href="#">撒哈拉沙漠</a> <a href="#">金字塔</a> <a href="#">纳米比亚</a> </dd> </dl> </div> </div> </section> <!-- 热门广告 --> <section class="center-wrap hot-adv"> <ul> <li><a href="#"><img src="images/small01.png" alt=""></li></a> <li><a href="#"><img src="images/small02.png" alt=""></li></a> <li><a href="#"><img src="images/small03.png" alt=""></li></a> <li><a href="#"><img src="images/small04.png" alt=""></li></a> </ul> </section> <!-- 新鲜甩尾 --> <section class="xxsw content-part"> <div class="center-wrap xxswbox"> <div class="jjzyx-titlebox"> <div class="jjzyx-title"> <h2>新鲜甩尾</h2><span>每日不可不看的好货</span> </div> </div> <ul> <li> <a href="#"> <div class="xxsw-img"><img src="images/新鲜甩尾配图01.png" alt=""></div> <div class="xxsw-font">北京直飞马尔代夫6-7天往返含税机票(首都航空/售完为止)…</div> </a> </li> <li> <a href="#"> <div class="xxsw-img"><img src="images/新鲜甩尾配图02.png" alt=""></div> <div class="xxsw-font">[甩尾狂欢] 北京/天津直飞日本东京/大阪/冲绳/札幌/福冈4-7天往返含…</div> </a> </li> <li> <a href="#"> <div class="xxsw-img"><img src="images/新鲜甩尾配图03.png" alt=""></div> <div class="xxsw-font">[拒签全退][全国25城联运] 北京往返格鲁吉亚+阿塞拜疆7-30天自由行…</div> </a> </li> <li> <a href="#"> <div class="xxsw-img"><img src="images/新鲜甩尾配图04.png" alt=""></div> <div class="xxsw-font">[樱花季] 北京直飞东京/大阪/名古屋/冲绳/札幌/福冈/仙台2-30天往返</div> </a> </li> <li> <a href="#"> <div class="xxsw-img"><img src="images/新鲜甩尾配图05.png" alt=""></div> <div class="xxsw-font">[品质小团/快速确认] 新西兰福克斯冰川直升机观光+冰川徒步（提供…</div> </a> </li> <li> <a href="#"> <div class="xxsw-img"><img src="images/新鲜甩尾配图06.png" alt=""></div> <div class="xxsw-font">[北欧破冰船] 芬兰+瑞典极地探险号破冰船活动+冰上漂浮+瑞典小…</div> </a> </li> <li> <a href="#"> <div class="xxsw-img"><img src="images/新鲜甩尾配图07.png" alt=""></div> <div class="xxsw-font">[指定班期特惠][全程中文伴游] 摩洛哥全景深度10日游（卡萨进出…</div> </a> </li> <li> <a href="#"> <div class="xxsw-img"><img src="images/新鲜甩尾配图08.png" alt=""></div> <div class="xxsw-font">马来西亚天空之镜+河口赏鹰+夜游萤火虫+寻找蓝眼泪（马来西亚瓜拉雪…</div> </a> </li> </ul> </div> </section> <!-- jjzyx --> <section class="jjzyx content-part"> <div class="center-wrap jjzyxbox"> <div class="jjzyx-titlebox"> <div class="jjzyx-title"> <h2>机酒自由行</h2> <span>挑选全球机票、酒店、邮轮等旅行产品</span> </div> <div class="jjzyx-nav"> <ul> <li><a href="#">近期好货</a></li> <li><a href="#">新品汇聚</a></li> <li><a href="#">定制游</a></li> <li><a href="#">国内推荐</a></li> <li><a href="#">优惠机票</a></li> <li><a href="#">热门海岛</a></li> <li><a href="#">热卖签证</a></li> </ul> </div> </div> <div class="jjzyx-imglist"> <ul> <li> <a href="#"> <div class="jjzyximg"><img src="images/机酒配图01.png" alt=""> <div class="jjzyx-tag jjzyx-first-tag">机票</div> </div> <div class="jjzyx-img-font"> [樱花季]天津直飞东京/大阪/名古屋/冲绳/札幌2-30天往返<br>含税机票【甩尾/多团期 </div> </a> </li> <li> <a href="#"> <div class="jjzyximg"><img src="images/机酒配图02.png" alt=""> <div class="jjzyx-tag">跟团游</div> </div> <div> 北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票(赠送旅游意外险… </div> </a> </li> <li> <a href="#"> <div class="jjzyximg"><img src="images/机酒配图03.png" alt=""> <div class="jjzyx-tag">机票</div> </div> <div> 北京/天津直飞日本东京/大阪/东阪/福冈/名古屋冲绳/北海道4-7天往返… </div> </a> </li> <li> <a href="#"> <div class="jjzyximg"><img src="images/机酒配图04.png" alt=""> <div class="jjzyx-tag">机票</div> </div> <div> [樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返… </div> </a> </li> <li> <a href="#"> <div class="jjzyximg"><img src="images/机酒配图05.png" alt=""> <div class="jjzyx-tag">机票</div> </div> <div> 杭州/上海/宁波/义乌直飞越南芽庄/岘港4-6天往返含税机票(20KG行… </div> </a> </li> <li> <a href="#"> <div class="jjzyximg"><img src="images/机酒配图06.png" alt=""> <div class="jjzyx-tag">机票</div> </div> <div> [赠自由行礼包] 上海/杭州/南京/合肥/宁波/徐州直飞日本东京/大阪… </div> </a> </li> <li class="morelist"> <p><a href="#">查看更多<br>机酒自由行产品</a></p> <a href="#"><span class="iconfont"></span></a> <ul> <li><a href="#">机票</li></a> <li><a href="#">酒店</li></a> <li><a href="#">机+酒</li></a> <li><a href="#">邮轮</li></a> </ul> </li> </ul> </div> </div> </section></body></html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 | /* 公共H2 */.content-part h2{ font-size: 36px; color: #1C1F21; font-weight: bold;}.content-part span{ font-size: 12px; color: #000; float: left; position: absolute; top:25px;}.site-head{ min-width: 1152px; height: 150px;}.site-head .topbar{ min-width: 1152px; background-color: #000; height: 32px; line-height: 32px;}.site-head .topbar a{ color: #fff;}.site-head .topbar .center-wrap .shortcut-links{ float: left;} .site-head .topbar .center-wrap .shortcut-links>ul>li{ float: left; margin-right: 18px;}.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu{ padding-right: 12px; position: relative;}.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu>div.commlist{ width: 121px; height: 168px; background-color: #fff; position: absolute; box-shadow: 0 4px 8px 0 ; z-index: 999999; display: none; transition: opacity 1s linear 0s; padding:4px 4px;}.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu>div.commlist>ul>li{ margin-left:8px; line-height: 18px;}.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu>div.commlist>ul>li>a{ color: #1C1F21; font-size: 12px;}.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu>div.commlist>ul>li:hover{ background-color: aqua;}.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu>div.shopping{ width: 76px; height: 174px;}.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu>div.public{ width: 64px; height: 66px;}.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu:hover .commlist{ display: block;}.site-head .topbar .center-wrap>.topbar-right{ float: right; width: 225px; height: 20px;}.site-head .topbar .center-wrap>.topbar-right>a,.site-head .topbar .center-wrap>.topbar-right>span{ margin-right:10px; font-size: 16px; color: #fff;}.site-head .topbar .center-wrap>.topbar-right>a:last-child{ margin-right:0;}/* .site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu::before{ content: ''; width: 12px; height: 12px; right:0px; top:50%; margin-top:-6px; position: absolute; background: url('/慕云游/images/顶部下拉图标01.png') no-repeat center center; }.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu:hover::before{ background: url('/慕云游/images/顶部下拉图标02.png') no-repeat center center;} */.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .arrow{ width: 12px; height: 12px; background-color: rgb(253, 253, 253); position: absolute; top:50%; right:0; margin-top:-6px; transform: rotate(45deg) scale(.5); transition: transform .3s linear 0s;}.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .arrow .arrow-box1{ width: 10px; height: 10px; position: absolute; display: block; background-color: rgb(5, 5, 5); transform:scale(1.1); }.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu:hover .arrow{ transform: rotate(225deg) scale(.5);}/* 主导航条 绿色*/.site-head .main-nav{ height: 40px; background-color: #20BD9A;}.site-head .main-nav .main-nav-box{ }.site-head .main-nav .main-nav-box>ul>li{ float: left; line-height: 40px; margin-right:18px; font-size: 16px;}.site-head .main-nav .main-nav-box>ul>li.main-downicon .main-downicon-list{ background-color: #fff; position: absolute; z-index: 999999; top:35px; box-shadow: 0 4px 8px 0; padding:6px 8px; display: none;}.site-head .main-nav .main-nav-box>ul>li.main-downicon .main-downicon-list>dl>dt{ line-height: 22px;}.site-head .main-nav .main-nav-box>ul>li.main-downicon .main-downicon-list>dl>dt>a{ font-size: 14px; color: #1C1F21; font-weight: bold;}.site-head .main-nav .main-nav-box>ul>li.main-downicon .main-downicon-list>dl>dd>a{ font-size: 12px; color: #1C1F21; line-height: 18px; float: left; margin-right:4px;}.site-head .main-nav .main-nav-box>ul>li.main-downicon .main-downicon-list>dl>dd>a:hover{ background-color: orange;}/* 每个菜单宽度 */.site-head .main-nav .main-nav-box>ul>li.main-downicon .main-downicon-list.jijiu{ width: 154px;}.site-head .main-nav .main-nav-box>ul>li.main-downicon .main-downicon-list.gengtuan{ width: 106px;}.site-head .main-nav .main-nav-box>ul>li.main-downicon .main-downicon-list.dangdiwanle{ width: 172px;}.site-head .main-nav .main-nav-box>ul>li.main-downicon .main-downicon-list.sdulvyou{ width: 118px;}.site-head .main-nav .main-nav-box>ul>li.main-downicon:hover .main-downicon-list{ display: block;}.site-head .main-nav .main-nav-box>ul>li.main-downicon{ padding-right: 16px; position: relative;}.site-head .main-nav .main-nav-box>ul>li>a{ color: #fff;}.site-head .main-nav .main-nav-box>ul>li>.main-downicon-arrow{ position: absolute; top:19px; right:5px; border:3px solid transparent; border-top-color: #fff; border-bottom: none; transform: rotate(0deg); transition: transform .3s linear 0s;}.site-head .main-nav .main-nav-box>ul>li.main-downicon:hover .main-downicon-arrow{ transform: rotate(180deg);}/* .site-head .main-nav .main-nav-box>ul>li::before{ content: ""; width: 16px; height: 16px; position: absolute; top:50%; margin-top:-8px; right:0; background: url(../images/顶部导航图标02.png) no-repeat center center; transition: transform .3s linear 0s;}.site-head .main-nav .main-nav-box>ul>li:hover::before{ transform: rotate(180deg);} *//* logo部分 */.site-head .logo-nav .logo-nav-box{ height: 78px;}.site-head .logo-nav .logo-nav-box>.logo,.input-box{ float: left;}.site-head .logo-nav .logo-nav-box>.logo{ margin-right: 20px; font-size: 24px; color:#20BD9A; line-height: 78px; font-weight: bold;}.site-head .logo-nav .logo-nav-box>.input-box{ width: 405px; line-height: 78px; position: relative; }.site-head .logo-nav .logo-nav-box>.input-box>input{ width: 405px; border: 1px solid #20BD9A; border-radius:4px; outline: none; text-indent: .5em;}.site-head .logo-nav .logo-nav-box>.input-box>a{ width: 32px; height: 24px; position: absolute; top:50%; margin-top:-13px; right:-2px; border-radius: 0px 4px 4px 0px; background-color: #20BD9A; text-align: center; line-height: 24px; color:#fff;}/* .site-head .logo-nav .logo-nav-box>.input-box>a::before{ content: ''; width: 32px; height: 24px; position: absolute; top:50%; margin-top:-13px; right:-2px; border-radius: 0px 4px 4px 0px; color: #fff; background: url(../images/放大镜.png) no-repeat #20BD9A center center;} *//* banner 轮播图 */.bannerbox{ position: relative;}.bannerbox .bigbanner{ width: 100%; min-width: 1152px; vertical-align: middle;}.bannerbox .bannercenter{ width: 1152px; height: 100%; position: absolute; left:50%; margin-left:-576px; top:0;}.bannerbox .banner-left-icon,.banner-right-icon{ width: 32px; height: 44px; position: absolute; top:50%; margin-top:-22px;}.bannerbox .banner-left-icon{ left:-42px; background: url(../images/icons.png) no-repeat -17px -94px;}.bannerbox .banner-right-icon{ right:-42px; background: url(../images/icons.png) no-repeat -17px -29px;}.bannerbox .banner-left-icon:hover,.bannerbox .banner-right-icon:hover{ opacity: .8;}.bannerbox .bannercenter .banner-rightlist{ height: 100%;}.bannerbox .bannercenter .banner-rightlist>ul{ height: 100%;}.bannerbox .bannercenter .banner-rightlist>ul>li{ width: 260px; height: 16.66%; background-color: rgba(0, 0, 0, .5); border-bottom:1px solid rgba(255, 255, 255, 0); padding-left:36px; position: relative; box-sizing:border-box;}.bannerbox .bannercenter .banner-rightlist>ul>li::before{ content: ''; width: 24px; height: 24px; position: absolute; right:0; top:50%; margin-top:-12px; background: url(../images/顶部下拉图标01@2x.png) no-repeat center center; transform: rotate(-90deg);}.bannerbox .bannercenter .banner-rightlist>ul>li>.banner-icon{ width: 24px; height: 24px; position: absolute; left:8px; top:50%; margin-top:-12px; background: url(../images/icons.png) no-repeat -29px -399px;}.bannerbox .bannercenter .banner-rightlist>ul>li:nth-child(2) .banner-icon{ background: url(../images/icons.png) no-repeat -29px -216px;}.bannerbox .bannercenter .banner-rightlist>ul>li:nth-child(3) .banner-icon{ background: url(../images/icons.png) no-repeat -29px -170px;}.bannerbox .bannercenter .banner-rightlist>ul>li:nth-child(4) .banner-icon{ background: url(../images/icons.png) no-repeat -29px -260px;}.bannerbox .bannercenter .banner-rightlist>ul>li:nth-child(5) .banner-icon{ background: url(../images/icons.png) no-repeat -29px -345px;}.bannerbox .bannercenter .banner-rightlist>ul>li:nth-child(6) .banner-icon{ background: url(../images/icons.png) no-repeat -29px -302px;}.bannerbox .bannercenter .banner-rightlist>ul>li>dl{ position: absolute; height: 48px; top:50%; margin-top:-24px;}.bannerbox .bannercenter .banner-rightlist>ul>li>dl>dt{ font-size: 18px; color: #fff;}.bannerbox .bannercenter .banner-rightlist>ul>li>dl>dd{ font-size: 14px; color: #fff; margin-right: 6px;}.bannerbox .bannercenter .banner-hiddenlist{ width: 324px; height: 100%; background-color: rgba(0, 0, 0, 0.8); position: absolute; top:0px; left:260px; padding:16px; box-sizing: border-box; /* display: none; */}.bannerbox .bannercenter .banner-hiddenlist>dl{ margin-bottom:11px;}.bannerbox .bannercenter .banner-hiddenlist>dl>dt{ font-size: 16px; color: #fff; line-height: 24px; }.bannerbox .bannercenter .banner-hiddenlist>dl>dd>a{ font-size: 13px; color: #fff; line-height: 22px;}.bannerbox .bannercenter .banner-rightlist>ul>li:hover{ background-color: rgba(0, 0, 0, 0.8);}/* 广告四个小图片 */.hot-adv{ height: 174px;}.hot-adv>ul>li{ width: 264px; height: 110px; float: left; margin-right: 32px; margin-top:32px;}.hot-adv>ul>li:last-child{ margin-right:0;}/* 新鲜甩尾 */.xxsw{ background-color: #F7F7F7; height: 738px;}.xxsw .xxswbox{ height: 658px; padding:40px 0;}.xxsw .xxswbox .jjzyx-titlebox{ height: 54px; position: relative;}.xxsw .xxswbox .jjzyx-titlebox .jjzyx-title{ float: left;}.xxsw .xxswbox h2{ margin-right:12px; float: left;}.xxsw .xxswbox>ul>li{ float: left; width: 264px; height: 270px; margin-right:32px; margin-top: 32px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.10);}.xxsw .xxswbox>ul>li:hover{ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.50);}.xxsw .xxswbox>ul>li:nth-child(4),.xxsw .xxswbox>ul>li:nth-child(8){ margin-right: 0;}.xxsw .xxswbox>ul>li>a>div.xxsw-font{ font-size: 14px; color: #1C1F21; margin:20px 13px 22px 15px;}/* 机酒自由行 */.jjzyx{ height: 738px; }.jjzyx .jjzyxbox{ padding:40px 0; height: 658px;}.jjzyx .jjzyxbox .jjzyx-titlebox{ height: 54px; position: relative;}.jjzyx .jjzyxbox .jjzyx-titlebox .jjzyx-title{ float: left;}.jjzyx .jjzyxbox .jjzyx-titlebox .jjzyx-title>h2{ margin-bottom: 32px; margin-right:12px; float: left;}.jjzyx .jjzyxbox .jjzyx-nav{ float: right;}.jjzyx .jjzyxbox .jjzyx-nav>ul>li{ float: left; margin-left: 16px;}.jjzyx .jjzyxbox .jjzyx-nav>ul>li>a{ font-size: 14px; color:#000;}.jjzyx .jjzyxbox .jjzyx-nav>ul>li>a:hover{ color:#20BD9A; border-bottom: 4px solid #20BD9A ; }.jjzyx .jjzyxbox .jjzyx-imglist{ height: 572px; float: left;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li{ width: 264px; height: 270px; float: left; margin-right: 32px; margin-bottom: 32px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.10); position: relative;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li:nth-child(3),.jjzyx .jjzyxbox .jjzyx-imglist>ul>li:nth-child(7){ margin-right: 0px;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li:first-child{ width: 560px;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li>a>.jjzyximg>.jjzyx-tag{ width: 74px; height: 40px; position: absolute; left:0; bottom:86px; text-align: center; line-height: 40px; background-color: rgba(0,0,0,0.55); color:#fff; font-size: 14px;}.jjzyx .jjzyxbox .jjzyx-imglist>ul:first-child>li>a>.jjzyximg>.jjzyx-first-tag{ bottom:103px;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li>a:first-child>.jjzyx-img-font{ position: absolute; height: 43px; width: 508px; bottom:0; background-color: rgba(0,0,0,0.55); color:#fff; font-size: 14px; padding:30px 26px 30px 26px;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li>a>div:nth-child(2){ position: absolute; height: 44px; width: 236px; padding:20px 14px 22px 14px; color: #1C1F21; font-size: 14px;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li:hover{ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.50);}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li.morelist{ background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%); padding-top:46px; box-sizing: border-box; position: relative;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li.morelist>p{ text-align: center;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li.morelist>p>a{ font-size: 14px; color: #fff;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li.morelist>a>span{ position: absolute; width: 48px; height: 48px; font-size: 48px; top: 50%; margin-top:-24px; left:50%; margin-left:-24px; color:#fff; transform:translateY(5px)}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li.morelist>a>span:hover{ animation:topdown .5s linear 0s infinite alternate-reverse;}@keyframes topdown{ from{ transform: translateY(-5px); } to{ transform: translateY(5px); }}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li.morelist>ul{ position: absolute; top:202px; width: 236px; height: 22px; left:50%; margin-left:-95px;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li.morelist>ul>li{ float: left; border-right: 1px solid #fff; padding:0 5px;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li.morelist>ul>li>a{ color:#fff;}.jjzyx .jjzyxbox .jjzyx-imglist>ul>li.morelist>ul>li:last-child{ border-right: none;} |
我能否用<br>标签来分割需要换行的文字？
9
收起
正在回答
1回答
同学你好，代码有如下问题：
1、如下结构标签嵌套错误：
修改如下：
2、如下结构划分不清晰：
它们分别属于“一级菜单”、“二级菜单”，因此建议区分一下：
此处文字换行，不建议使用br标签。因为实际开发中，这些内容都是动态变化的，无法做到每次改动内容都手动换行：
建议让其自动换行。
当前阶段重点要关注是否有语法错误、结构是否清晰、代码是否适当简化，同学这样就可以了。
祝学习愉快！
-
慕仙7313728 #1
你好老师，一级和二级这样改行不行？类名也改了一下，类名是不是不建议很长
这个部分鼠标移动到哪个li就显示哪个菜单是不是要到JS部分才会教？？我想用CSS试下，没成功。把每个菜单都放到对应li高度又会有问题。超过字符了，只能截图了
2022-04-26 16:39:13 -
解答如下：
1、这样改，也不是太好。
2、类名太长容易写错、也会拖慢代码书写速度，但是会比短类名表达的意思更清晰，所以类名长度要适当。同学这个类名不算太长，不用调整。
3、鼠标移入一级菜单显示二级菜单，可以用css实现。具体实现方式可参考如下习题：
https://class.imooc.com/lesson/2117#mid=51757
问答区有老师给的demo：
4、js和css是两种实现方式，它们的html结构会有区别，css方式同学可以参考上述习题。
js方式，可以参考如下形式：
暂时了解即可，后面会领着大家用js实现。
2022-04-26 17:40:39
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧