请老师检查作业，终于写完静态。
来源：5-1 课程总结
派大兴兴
2021-11-08 17:58:43
header.site-header .top-bar{
height: 32px;
background-color: #2a2a2a;
min-width: 1152px;
}
header.site-header .top-bar .center-wrap > nav >ul > li{
float: left;
margin-right: 18px;
}
header.site-header .top-bar .center-wrap > nav >ul > li > a{
color: #fff;
font-size: 12px;
line-height: 32px;
}
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu{
padding-right: 14px;
position: relative;
}
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu .arrow{
width: 12px;
height: 12px;
position: absolute;
top: 50%;
margin-top: -6px;
right: 0;
transition: transform .2s linear 0s;
}
header.site-header .top-bar .top-bar-right{
float: right;
width: 225px;
height: 32px;
}
header.site-header .top-bar .top-bar-right a{
color: #fff;
width: 20px;
height: 20px;
margin:6px 16px 6px 0;
line-height: 20px;
float: left;
text-align: center;
}
header.site-header .top-bar .top-bar-right a:nth-child(2){
width: 1px;
height: 18px;
margin: 7px 16px 7px 0;
line-height: 18px;
}
header.site-header .top-bar .top-bar-right a.fz{
font-size: 12px;
width: 24px;
height: 18px;
margin: 7px 16px 7px 0;
line-height: 18px;
}
header.site-header .top-bar .top-bar-right a:last-child{
margin-right: 0;
}
/* 整体鼠标触碰后旋转 */
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu:hover .arrow{
transform: rotate(180deg);
}
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu .arrow b{
width: 6px;
height: 6px;
background-color: #fff;
position: absolute;
top: 2px;
left: 4px;
transform: rotate(45deg);
}
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu .arrow i{
width: 6px;
height: 6px;
background-color: #2a2a2a;
position: absolute;
top: 1px;
left: 4px;
transform: rotate(45deg);
}
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu .pop-box{
position: absolute;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
top: 29px;
padding:6px 8px 6px 8px;
z-index: 9999;
display: none;
}
/* 设置弹出菜单宽度 */
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu .hotel{
width: 64px;
}
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu .shop{
width: 76px;
}
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu .community{
width: 121px;
}
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu:hover .pop-box{
display: block;
}
header.site-header .top-bar ul li.have-menu .pop-box ul li a{
font-size: 12px;
color: #1C1F21;
}
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu .pop-box ul li{
cursor: pointer;
}
header.site-header .top-bar .center-wrap > nav >ul > li.have-menu .pop-box ul li:hover a{
color: #20BD9A;
}
/* 第2列导航 */
header.site-header .main-nav{
height: 40px;
background-color: #20BD9A;
min-width: 1152px;
}
header.site-header .main-nav ul>li>a{
color: white;
font-size: 16px;
line-height: 40px;
}
header.site-header .main-nav ul>li{
float: left;
margin-right: 18px;
position: relative;
}
header.site-header .main-nav ul>li.have-menu{
padding-right: 16px;
}
header.site-header .main-nav ul>li.have-menu::before{
content: '';
width: 0px;
height: 0px;
/* background-color: red; */
position: absolute;
right: 0;
top: 50%;
margin-top: -2.5px;
border: 5px solid transparent;
border-top-color: white;
border-bottom: 0;
transition: transform .2s linear 0s;
}
header.site-header .main-nav ul>li.have-menu:hover::before{
transform: rotate(180deg);
}
header.site-header .main-nav .pop-box{
position: absolute;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
top: 33px;
padding:6px 8px 6px 8px;
z-index: 9999;
display: none;
}
/* 触摸鼠标显示二级菜单 */
header.site-header .main-nav ul>li.have-menu:hover .pop-box{
display: block;
}
header.site-header .main-nav ul>li.have-menu dl dd:hover a{
color: #20BD9A;
}
header.site-header .main-nav .air-port{
width: 150px;
}
header.site-header .main-nav .tour{
width: 96px;
}
header.site-header .main-nav .Local{
width: 162px;
}
header.site-header .main-nav .idt{
width: 112px;
}
header.site-header .main-nav .pop-box dl dt{
color: #1C1F21;
font-size: 14px;
font-weight: bold;
}
header.site-header .main-nav .pop-box dl dd{
text-align: justify;
line-height: 18px;
float: left;
margin-right: 4px;
}
header.site-header .main-nav .pop-box dl dd a{
color: #1C1F21;
font-size: 12px;
}
/* header.site-header .main-nav .pop-box dl dd:nth-child(5){
margin-right: 0;
}
header.site-header .main-nav .pop-box dl dd:last-child{
margin-right: 0;
} */
/* 3列搜索 */
header.site-header .search-nav{
height: 78px;
min-width: 1152px;
}
header.site-header .search-nav .center-wrap>h1{
font-size: 24px;
color: #20BD9A;
line-height: 78px;
float: left;
}
header.site-header .search-nav .center-wrap .search-box{
float: left;
margin: 24px 0 24px 20px;
width: 406px;
}
header.site-header .search-nav .center-wrap>.search-box input{
/* 上右下左 */
border:1px solid #20BD9A;
border-right: 0;
padding-left: 10px;
border-radius: 3px 0 0 3px;
outline: none;
width: 363px;
height: 28px;
}
header.site-header .search-nav .center-wrap .search-box .btn{
width: 32px;
height: 30px;
background-color: #20BD9A;
float: right;
border-radius:0 3px 3px 0;
line-height: 30px;
text-align: center;
color: white;
}
/* 通用特效 */
section .center-wrap img{
transition: transform .5s ease 0s;
}
section .center-wrap img:hover{
transform: scale(1.1);
}
/* banner */
section.banner{
position: relative;
overflow: hidden;
}
section .center-wrap ul li{
overflow: hidden;
cursor: pointer;
}
section .center-wrap ul li .pic-box{
overflow: hidden;
}
section.banner img{
min-width: 1152px;
width: 100%;
/* 白边的处理 */
vertical-align: middle;
}
section.banner .center-wrap{
position: absolute;
top: 0;
left: 50%;
/* 这里的100%高度绝对不能省略，因为如果省略了，它的height就是0 */
/* 那么它的子盒子设置16.6%就没有意义了 */
height: 100%;
margin-left: -576px;
}
section.banner .center-wrap .left-btn{
position: absolute;
left: -38px;
background: url(../images/icons.png) no-repeat -21px -94px;
top: 50%;
width: 28px;
height: 44px;
margin-top: -22px;
}
section.banner .center-wrap .left-btn:hover{
opacity: .8;
}
section.banner .center-wrap .right-btn{
position: absolute;
right: -38px;
background: url(../images/icons.png) no-repeat -21px -29px;
top: 50%;
width: 28px;
height: 44px;
margin-top: -22px;
}
section.banner .center-wrap .right-btn:hover{
opacity: .8;
}
section.banner .center-wrap .banner-nav{
/* 这里的100%高度绝对不能省略，因为如果省略了，它的height就是0 */
/* 那么它的子盒子设置16.6%就没有意义了 */
height: 100%;
}
section.banner .center-wrap .banner-nav ul {
/* 这里的100%高度绝对不能省略，因为如果省略了，它的height就是0 */
/* 那么它的子盒子设置16.6%就没有意义了 */
height: 100%;
}
section.banner .center-wrap .banner-nav>ul>li{
position: relative;
height: 16.66%;
width: 296px;
background: rgba(0, 0, 0, .55);
border-bottom: 1px solid #9e9e9e;
/* box-sizing:border-box属性的作用就是让height属性是盒子的总高度，这种情况：在盒子的高度是百分比写的，但是盒子有边框的时候 */
/* 此时就要让盒子的边框涵盖在height里面，就要使用box-sizing属性 */
box-sizing: border-box;
}
section.banner .center-wrap .banner-nav>ul>li:last-child{
border-bottom: 0;
}
section.banner .center-wrap .banner-nav ul li dl{
position: absolute;
top: 50%;
left:42px;
margin-top: -24px;
height: 48px;
}
section.banner .center-wrap .banner-nav ul li dl::before{
content: '';
position: absolute;
top: 50%;
left: -30px;
margin-top: -12px;
background-image:url('../images/icons.png');
width: 24px;
height: 24px;
}
section.banner .center-wrap .banner-nav ul li dl.hot::before{
background-position: -29px -399px;
}
section.banner .center-wrap .banner-nav ul li dl.hk::before{
background-position: -28px -217px;
}
section.banner .center-wrap .banner-nav ul li dl.jp::before{
background-position: -25px -171px;
/* width:24px;
height: 19px; */
}
section.banner .center-wrap .banner-nav ul li dl.sa::before{
background-position: -28px -262px;
}
section.banner .center-wrap .banner-nav ul li dl.eu::before{
background-position: -29px -351px;
}
section.banner .center-wrap .banner-nav ul li dl.au::before{
background-position: -28px -305px;
}
section.banner .center-wrap .banner-nav ul li dl dt{
font-size: 18px;
line-height: 26px;
color: #fff;
}
section.banner .center-wrap .banner-nav ul li dl dd{
font-size: 14px;
color: #fff;
line-height: 22px;
}
section.banner .center-wrap .banner-nav ul li:hover + .menu{
display: block;
}
/* 弹出menu */
section.banner .center-wrap .banner-nav .menus-box .menu{
/* width: 356px; */
width: 324px;
position: absolute;
height: 100%;
left: 296px;
background:rgba(0, 0, 0, .75);
top: 0;
padding: 16px;
/* 100%减不了padding */
box-sizing: border-box;
display: none;
}
section.banner .center-wrap .banner-nav .menus-box .menu.current{
display: block;
}
section.banner .center-wrap .banner-nav .menus-box .menu dl{
margin-bottom: 12px;
}
section.banner .center-wrap .banner-nav .menus-box .menu dl dt{
font-size: 18px;
font-weight: bold;
color: #fff;
line-height: 24px;
margin-bottom: 4px;
}
section.banner .center-wrap .banner-nav .menus-box .menu dl dd a{
color: white;
font-size: 14px;
line-height: 22px;
}
/* 热门广告 */
aside.hot-ads{
height: 110px;
padding-top: 43px;
padding-bottom: 32px;
}
aside.hot-ads .center-wrap ul li{
float: left;
width: 264px;
height: 110px;
margin-right: 32px;
cursor: pointer;
}
aside.hot-ads .center-wrap ul li a{
width: 100%;
height:100%;
display: inline-block;
}
aside.hot-ads .center-wrap ul li:last-child{
margin-right: 0;
}
/* 新鲜甩尾 */
section.Fresh{
height: 738px;
background: #F7F7F7;
}
/* 公共标题 */
section .title{
/* margin-bottom: 32px; */
}
section .title h2{
float: left;
font-size: 36px;
line-height: 54px;
color: #1C1F21;
font-weight: bold;
margin-top: 40px;
margin-bottom: 32px
}
section .title span{
float: left;
font-size: 12px;
line-height: 18px;
color: #1C1F21;
position: relative;
left: 12px;
top: 68px;
/* margin: 28px 0 0 12px; */
}
section.Fresh .center-wrap ul li{
float: left;
width: 264px;
height: 270px;
margin: 0 32px 32px 0;
background-color: #fff;
}
section.Fresh .center-wrap ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
/* 公共类 */
section .center-wrap ul li a{
font-size: 14px;
color: #1C1F21;
line-height: 22px;
}
section .center-wrap ul li a .pic-box{
width: 264px;
height: 184px;
}
/* 4n表示4的倍数 去掉第4，第8margin*/
section.Fresh .center-wrap ul li:nth-child(4n){
margin-right: 0;
}
section .center-wrap ul li a .word-box{
padding:20px 14px 20px 14px;
}
/* 机酒自由行 */
section.commen{
height: 738px;
background-color: #fff;
}
/* title公共类 start */
section .center-wrap .title nav.rt-nav{
margin:49px 0 49px 0;
float: right;
}
section .center-wrap .title .rt-nav ul li{
float: left;
/* width: 56px; */
height: 22px;
margin-right: 14px;
text-align: center;
}
section .center-wrap .title .rt-nav ul li.current{
border-bottom: 4px solid #20BD9A;
padding-bottom: 2px;
}
section .center-wrap .title .rt-nav ul li.current a{
color: #20BD9A;
}
section .center-wrap .title .rt-nav ul li a{
font-size: 14px;
color: rgba(0,0,0,0.85);
line-height: 22px;
}
section .center-wrap .title .rt-nav ul li:first-child{
margin-right: 16px;
box-shadow: none;
}
section .center-wrap .title .rt-nav ul li:last-child{
margin-right: 0;
}
/* title公共类 end */
/* 机酒自由行下半部分 */
section.commen .center-wrap .bt-card ul li{
width: 264px;
height: 270px;
background-color: #fff;
float: left;
margin-right: 32px;
margin-bottom: 32px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
section.commen .center-wrap .bt-card ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
section.commen .center-wrap .bt-card ul li:nth-child(3),section.commen .center-wrap .bt-card ul li:nth-child(7){
margin-right: 0;
}
section.commen .center-wrap .bt-card ul li.big-grid {
width: 560px;
height: 270px;
}
section.commen .center-wrap .bt-card ul li.big-grid .pic-box{
width: 560px;
height: 270px;
position: relative;
}
section .center-wrap ul li.big-grid .pic-box div.spec{
position: absolute;
width: 508px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
padding: 30px 26px 29px 26px;
bottom: 0;
background: rgba(0, 0, 0, .55);
}
section.commen .center-wrap .bt-card ul li.more-grid{
background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);
}
section .center-wrap ul li .view-more{
padding: 46px 14px;
}
section.commen .center-wrap .bt-card ul li.more-grid:hover .view-more div.iconfont{
animation: bounce .5s 0s infinite alternate;
}
section .center-wrap ul li .view-more div.iconfont{
font-size: 48px;
color: #FFFFFF;
text-align: center;
line-height: 48px;
margin: 28px 94px 36px 94px;
}
/* 定义动画 */
@keyframes bounce {
form{
transform: translateY(-10px);
}
to{
transform: translateY(10px);
}
}
section .center-wrap ul li .view-more p{
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 22px;
}
section .center-wrap ul li .view-more p span{
margin-right: 3px;
}
section .center-wrap li.more-grid a{
color: #FFFFFF;
text-align: center;
}
section.machine .center-wrap .bt-card ul li.def-grid .pic-box{
position: relative;
}
section.machine .center-wrap .bt-card ul li .pic-box .tag{
font-size: 14px;
color: #FFFFFF;
background-color: rgba(0, 0, 0, .60);
text-align: center;
line-height: 22px;
padding: 9px 16px 9px 16px;
position: absolute;
bottom: 0;
left: 0;
}
section.machine .center-wrap .bt-card ul li.big-grid .pic-box .tag{
bottom: 104px;
}
/* 当地玩乐 */
section.local-play{
height: 586px;
background: #F7F7F7;
}
section.local-play .center-wrap .bd .col{
float: left;
width: 364px;
margin-right: 30px;
}
section.local-play .center-wrap .bd .col:last-child{
margin-right: 0;
}
section.local-play .center-wrap .bd .col ul li{
/* float: left; */
height: 120px;
margin: 0 0px 30px 0;
}
section.local-play .center-wrap .bd .col ul li{
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
section.local-play .center-wrap .bd .col ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
section.local-play .center-wrap .bd .col > ul > li.big-grid:hover .view-more .iconfont{
animation: bounce .5s 0s infinite alternate;
}
section.local-play .center-wrap .bd .col ul li:last-child,section.local-play .center-wrap > ul > li:nth-child(3){
margin-right: 0;
}
section.local-play .center-wrap .bd .col > ul > li.big-grid{
height: 270px;
position: relative;
}
section.local-play .center-wrap .bd .col ul li.big-grid .pic-box{
width: 364px;
height: 270px;
}
section.local-play .center-wrap .bd .col ul li.big-grid div.spec{
padding: 21px 17px;
width: 330px;
/* height: 104px; */
}
section.local-play .center-wrap .bd .col ul li.big-grid div.spec .bt-title .bt-left{
float: left;
}
section.local-play .center-wrap .bd .col ul li.big-grid div.spec .bt-title .bt-right{
float: right;
}
section.local-play .center-wrap .bd .col ul li.big-grid div.spec .bt-title .bt-right em{
color: #36DFBA;
}
section.local-play .center-wrap .bd .col ul li.longb-box .pic-box{
width: 120px;
height: 120px;
float: left;
}
section.local-play .center-wrap .bd .col ul li.longb-box .word-box{
padding:27px 18px;
font-size: 14px;
float: right;
width: 208px;
}
section.local-play .center-wrap .bd .col li.big-grid.no-image{
background-image: linear-gradient(180deg, #FF6374 1%, #FF7368 98%);
/* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08); */
}
section.local-play .center-wrap ul li .view-more{
padding:46px 64px 0 64px;
}
section.local-play .center-wrap ul li .view-more a{
color: #fff;
}
section.local-play .center-wrap ul li .classify{
text-align: center;
line-height: 22px;
margin: 0 27px;
}
section.local-play .center-wrap ul li p a,section.local-play .center-wrap ul li.no-image span{
color: #FFFFFF;
font-size: 14px;
}
/* 特色当地体验 */
section.flexp{
height: 456px;
}
section.flexp .center-wrap ul li {
width: 264px;
float: left;
height: 290px;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
box-sizing: border-box;
margin-right: 32px;
}
section.flexp .center-wrap ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
section.flexp .center-wrap ul li:last-child{
margin-right: 0;
}
section.flexp .center-wrap .title h2{
text-align: center;
float: none;
}
section.flexp .center-wrap ul li .word-box .star{
color: #FA6400;
font-size: 16px;
margin-right: 2px;
line-height: 16px;
}
section.flexp .center-wrap ul li .word-box p:first-child{
font-weight: bold;
font-size: 16px;
line-height: 24px;
color: #000;
padding-bottom: 4px;
}
section.flexp .center-wrap ul li .word-box p{
height: 48px;
overflow: hidden;
}
section.flexp .center-wrap ul li .word-box .num{
font-size: 12px;
color: #FA6400;
line-height: 18px;
}
section.flexp .center-wrap ul li .word-box span{
font-size: 12px;
color: #000;
line-height: 18px;
}
section.flexp .center-wrap ul li a .word-box{
padding: 16px 11px;
box-sizing: border-box;
}
/* 最世界·深度旅行 */
section.world{
background: #F7F7F7;
}
section.world .center-wrap .bt-card ul li.more-grid{
background-image: linear-gradient(180deg, #BD5EE8 0%, #832ABB 98%);
}
section.commen .center-wrap ul li.big-grid .pic-box .bt{
position: absolute;
color: #fff;
bottom: -30px;
left: 26px;
font-size: 14px;
line-height: 22px;
transition: bottom .5s ease 0s;
}
section.commen .center-wrap ul li.big-grid .pic-box .circle{
position: absolute;
top: -106px;
left: 50%;
color: #fff;
width: 106px;
height: 106px;
margin-left: -53px;
border: 1px solid #FFFFFF;
border-radius: 50%;
padding-top: 30px;
box-sizing: border-box;
transition: top .5s ease 0s;
}
section.commen .center-wrap ul li.big-grid .pic-box:hover .circle{
top: 62px;
}
section.commen .center-wrap ul li.big-grid .pic-box:hover .bt{
bottom: 30px;
}
section.commen .center-wrap ul li.big-grid .pic-box .circle p{
text-align: center;
font-size: 16px;
}
/* 跟团/半自助游 */
section.group .center-wrap .bt-card ul li.more-grid{
background-image: linear-gradient(180deg, #41D8E9 0%, #3685EA 98%);
}
section.commen .center-wrap .bt-card ul li.big-grid .mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .65);
transition: opacity .5s ease 0s;
opacity: 0;
}
section.commen .center-wrap ul li.big-grid .pic-box:hover .mask{
opacity: 1;
}
/* footer */
footer .tp-half{
height: 220px;
background: #F7F7F7;
}
footer .tp-half ul{
padding-top: 36px;
height: 28px;
}
footer .tp-half .center-wrap ul li {
float: left;
padding:0 26.5px;
border-right: 1px solid #1C1F21;
box-sizing: border-box;
}
footer .tp-half .center-wrap ul li:first-child{
padding-left: 0;
}
footer .tp-half .center-wrap ul li:last-child{
padding-right: 0;
border-right: none;
}
footer .tp-half .center-wrap ul li a{
font-size: 18px;
color: #1C1F21;
line-height: 18px;
}
footer .tp-half div.clearfix{
margin-top: 40px;
}
footer .tp-half dl{
float: left;
margin-right: 30px;
padding-left: 75px;
position: relative;
}
footer .tp-half dl:last-child{
margin-right: 0;
}
footer .tp-half dl dt{
font-size: 16px;
color: #1C1F21;
font-weight: bold;
line-height: 24px;
}
footer .tp-half dl dd{
font-size: 14px;
color: #1C1F21;
line-height: 22px;
width: 289px;
height: 44px;
}
footer .tp-half dl::before{
content: '';
position: absolute;
left: 0;
top: 50%;
margin-top: -30px;
width: 60px;
height: 60px;
background-image: url('../images/icons.png');
}
footer .tp-half .service::before{
background-position: -150px -178px;
}
footer .tp-half .selection::before{
background-position: -150px -104px;
}
footer .tp-half .security::before{
background-position: -150px -31px;
}
footer .bt-half{
background: #1C1F21;
height: 225px;
}
footer .bt-half dl{
height: 46px;
padding-top: 48px;
}
footer .bt-half dl dt{
font-size: 46px;
line-height: 46px;
margin-right: 46px;
color: #fff;
float: left;
}
footer .bt-half dl dd{
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
float: left;
width: 532px;
height: 44px;
}footer .bt-half nav ul{
padding-top: 31px;
}
footer .bt-half nav li{
float: left;
padding: 0 13.5px;
border-right: 1px solid #fff;
}
footer .bt-half nav li:first-child{
padding-left: 0;
}
footer .bt-half nav li:last-child{
padding-right: 0;
border:none;
}
footer .bt-half nav li a{
color: #fff;
font-size: 14px;
line-height: 22px;
}
footer .bt-half .copyright{
font-size: 14px;
color: #FFFFFF;
clear: both;
line-height: 22px;
padding-top: 8px;
}<!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>慕云游商场 - 机票、酒店、旅游攻略</title> <meta name="Keywords"> <link rel="stylesheet" href="css/reset.css"> </link> <link rel="stylesheet" href="css/base.css"> </link> <link rel="stylesheet" href="css/css.css"> </link> </head> <body> <header class="site-header"> <div class="top-bar"> <div class="center-wrap"> <nav> <ul> <li><a href="">目的地</a></li> <li><a href="">锦囊</a></li> <li class="have-menu"> <a href="">社区</a> <em class="arrow"> <b></b> <i></i> </em> <div class="pop-box community"> <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> <em class="arrow"> <b></b> <i></i> </em> <div class="pop-box shop"> <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> <em class="arrow"> <b></b> <i></i> </em> <div class="pop-box hotel"> <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> <div class="top-bar-right"> <a href="" class="iconfont">󰂨</a> <a href="">|</a> <a href="" class="iconfont"></a> <a href="" class="iconfont">󰆯</a> <a href="" class="iconfont">󰄆</a> <a href="" class="iconfont fz">登录</a> <a href="" class="iconfont fz">注册</a> </div> </div> </div> <!-- 2列导航 --> <div class="main-nav"> <div class="center-wrap"> <nav> <ul> <li class="have-menu"> <a href="">机酒自由行</a> <div class="pop-box air-port"> <dl> <dt>全部</dt> <dd><a href="">自由行</a></dd> <dd><a href="">优惠机票</a></dd> <dd><a href="">酒店</a></dd> <dd><a href="">邮轮</a></dd> <dd><a href="">定制游</a></dd> <dd><a href="">马尔代夫</a></dd> <dd><a href="">海岛游</a></dd> </dl> </div> </li> <li><a href="">优惠机票</a></li> <li class="have-menu"> <a href="">跟团游</a> <div class="pop-box tour"> <dl> <dt>全部</dt> <dd><a href="">跟团游</a></dd> <dd><a href="">半自助游</a></dd> </dl> </div> </li> <li class="have-menu"> <a href="">当地玩乐</a> <div class="pop-box Local"> <dl> <dt>全部</dt> <dd><a href="">日游小团</a></dd> <dd><a href="">深度体验</a></dd> <dd><a href="">门票票券</a></dd> <dd><a href="">餐饮美食</a></dd> <dd><a href="">WIFI电话卡</a></dd> <dd><a href="">购物</a></dd> <dd><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="have-menu"> <a href="">深度旅游</a> <div class="pop-box idt"> <dl> <dt>全部</dt> <dd><a href="">CityWalk</a></dd> <dd><a href="">特色长线</a></dd> <dd><a href="">Q-Home</a></dd> </dl> </div> </li> <li><a href="">私人定制</a></li> </ul> </nav> </div> </div> <!-- 3列搜索 --> <div class="search-nav"> <div class="center-wrap"> <h1>慕云游商城</h1> <div class="search-box"> <input type="text"> <a href="" class="btn iconfont">󰂨</a> </div> </div> </div> </header> <!-- banner --> <section class="banner"> <img src="images/banner1.jpg"> <div class="center-wrap"> <a href="" class="left-btn"></a> <a href="" class="right-btn"></a> <nav class="banner-nav"> <ul> <li> <dl class="hot"> <dt>热门出发地</dt> <dd> <em>北京</em> <em>上海</em> <em>广深</em> <em>西南</em> <em>国内其他</em> </dd> </dl> </li> <li> <dl class="hk"> <dt> 港澳台 国内 </dt> <dd> <em>香港</em> <em>澳门</em> <em>台湾</em> <em>国内其他</em> </dd> </dl> </li> <li> <dl class="jp"> <dt>日本 韩国</dt> <dd> <em>东京</em> <em>大阪</em> <em>冲绳</em> <em>北海道</em> <em>福冈</em> </dd> </dl> </li> <li> <dl class="sa"> <dt>东南亚 南亚</dt> <dd> <em>泰国</em> <em>新加坡</em> <em>马来西亚</em> <em>马尔代夫</em> </dd> </dl> </li> <li> <dl class="eu"> <dt>欧洲 美洲</dt> <dd> <em>英国</em> <em>法国</em> <em>美国</em> <em>加拿大</em> </dd> </dl> </li> <li> <dl class="au"> <dt>澳新 中东非</dt> <dd> <em>澳大利亚</em> <em>新西兰</em> <em>迪拜</em> </dd> </dl> </li> </ul> <div class="menus-box"> <div class="menu current"> <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> </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> </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="menu"> <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="menu"> <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="">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="menu"> <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="menu"> <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="menu"> <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> <a href="">金字塔</a> <a href="">纳米比亚</a> </dd> </dl> </div> </div> </nav> </div> </section> <!-- 热门广告 --> <aside class="hot-ads"> <div class="center-wrap"> <ul> <li><a><img src="/images/small01.png"></a></li> <li><a><img src="/images/small02.png"></a></li> <li><a><img src="/images/small03.png"></a></li> <li><a><img src="/images/small04.png"></a></li> </ul> </div> </aside> <!-- 新鲜甩尾 --> <section class="Fresh"> <div class="center-wrap"> <div class="title clearfix"> <h2>新鲜甩尾</h2> <span>每日不可不看的好货</span> </div> <ul> <li> <a href=""> <div class="pic-box"><img src="images/xxsw1.png"></div> <div class="word-box"> 北京直飞马尔代夫6-7天往返含税机票 （首都航空/售完为止）… </div> </a> </li> <li> <a href=""> <div class="pic-box"><img src="images/xxsw2.png"></div> <div class="word-box"> [甩尾狂欢] 北京/天津直飞日本东京/大阪/冲绳/札幌/福冈4-7天往返含… </div> </a> </li> <li> <a href=""> <div class="pic-box"><img src="images/xxsw3.png"></div> <div class="word-box"> [拒签全退][全国25城联运] 北京往返格鲁吉亚+阿塞拜疆7-30天自由行… </div> </a> </li> <li> <a href=""> <div class="pic-box"><img src="images/xxsw4.png"></div> <div class="word-box"> [樱花季] 北京直飞东京/大阪/名古屋/冲绳/札幌/福冈/仙台2-30天往返 </div> </a> </li> <li> <a href=""> <div class="pic-box"><img src="images/xxsw5.png"></div> <div class="word-box"> [品质小团/快速确认] 新西兰福克斯冰川直升机观光+冰川徒步（提供… </div> </a> </li> <li> <a href=""> <div class="pic-box"><img src="images/xxsw6.png"></div> <div class="word-box"> [北欧破冰船] 芬兰+瑞典极地探险号破冰船活动+冰上漂浮+瑞典小… </div> </a> </li> <li> <a href=""> <div class="pic-box"><img src="images/xxsw7.png"></div> <div class="word-box"> [指定班期特惠][全程中文伴游] 摩洛哥全景深度10日游（卡萨进出… </div> </a> </li> <li> <a href=""> <div class="pic-box"><img src="images/xxsw8.png"></div> <div class="word-box"> 马来西亚天空之镜+河口赏鹰+夜游萤火虫+寻找蓝眼泪（马来西亚瓜拉雪… </div> </a> </li> </ul> </div> </section> <!-- 机酒自由行 --> <section class="machine commen"> <div class="center-wrap"> <div class="title clearfix"> <h2>机酒自由行</h2> <span>挑选全球机票、酒店、邮轮等旅行产品</span> <nav class="rt-nav"> <ul> <li class="current"><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> </nav> </div> <div class="bt-card"> <ul> <li class="big-grid"> <a href=""> <div class="pic-box"> <img src="images/jjzyx1.png"> <div class="tag">机票</div> <div class="spec"> <p>[樱花季]天津直飞东京/大阪/名古屋/冲绳/札幌2-30天往返</p> <p>含税机票【甩尾/多团期】</p> </div> </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/jjzyx2.png"> <div class="tag">跟团游</div> </div> <div class="word-box"> 北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/jjzyx3.png"> <div class="tag">机票</div> </div> <div class="word-box"> 北京/天津直飞日本东京/大阪/东阪/福冈/名古屋冲绳/北海道4-7天往返… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/jjzyx4.png"> <div class="tag">机票</div> </div> <div class="word-box"> [樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返… </div> </a> </li> <li class="def-grid"><a href=""> <div class="pic-box"> <img src="images/jjzyx5.png"> <div class="tag">机票</div> </div> <div class="word-box"> 杭州/上海/宁波/义乌直飞越南芽庄/岘港4-6天往返含税机票（20KG行… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/jjzyx6.png"> <div class="tag">机票</div> </div> <div class="word-box"> [赠自由行礼包] 上海/杭州/南京/合肥/宁波/徐州直飞日本东京/大阪… </div> </a> </li> <li class="more-grid"> <div class="view-more"> <a href=""> <p>查看更多</p> <p>机酒自由行产品</p> </a> <a href=""> <div class="iconfont"></div> </a> <p> <a href=""><span>机票</span></a> <span>|</span> <a href=""><span>酒店</span></a> <span>|</span> <a href=""><span>机+酒</span></a> <span>|</span> <a href=""><span>邮轮</span></a> </p> </div> </li> </ul> </div> </div> </section> <!-- 当地玩乐 --> <section class="local-play"> <div class="center-wrap"> <div class="title clearfix"> <h2>当地玩乐</h2> <span>像当地人一样，体验本土的吃喝玩乐</span> <nav class="rt-nav"> <ul> <li class="current"><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> </nav> </div> <div class="bd"> <div class="col"> <ul> <li class="big-grid"> <a href=""> <div class="pic-box"> <img src="images/ddwl1.png"> <div class="spec"> <p>[亲子佳选]泰国清迈夜间动物园/Night Safari（可选接送；导游；长颈鹿餐厅）</p> <div class="bt-title"> <span class="bt-left">城市玩乐</span> <span class="bt-right"><em>199元</em>起</span> </div> </div> </div> </a> </li> <li class="longb-box"> <a href=""> <div class="pic-box"> <img src="images/ddwl5.png"> </div> <div class="word-box"> [樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返… </div> </a> </li> </ul> </div> <div class="col"> <ul> <li class="longb-box"> <a href=""> <div class="pic-box"> <img src="images/ddwl2.png"> </div> <div class="word-box"> [网红新选] 泰国清迈黑白蓝庙一日游清莱黑庙 白庙 蓝庙 温泉驿站中文导游+酒店接送+餐赠小… </div> </a> </li> <li class="longb-box"> <a href=""> <div class="pic-box"> <img src="images/ddwl4.png"> </div> <div class="word-box"> [全岛接送+中文导游] 泰国普吉岛+皇帝岛+珊瑚岛一日游双体帆船海钓 [帆船晚会+浮潜]… </div> </a> </li> <li class="longb-box"> <a href=""> <div class="pic-box"> <img src="images/ddwl6.png"> </div> <div class="word-box"> 享行之旅|泰国苏梅岛一日游 越野车丛林环岛之旅 骑大象纳蒙瀑布 </div> </a> </li> </ul> </div> <div class="col"> <ul> <li class="longb-box"> <a href=""> <div class="pic-box"> <img src="images/ddwl3.png"> </div> <div class="word-box"> [可接急单] 泰国普吉岛西蒙Simon人妖秀门票VIP专座近距离与人妖互动合影… </div> </a> </li> <li class="big-grid no-image"> <div class="view-more"> <a href=""> <p>查看更多</p> <p>机酒自由行产品</p> </a> <a href=""> <div class="iconfont"></div> </a> </div> <div class="classify"> <a href=""><span>WiFi/电话卡</span></a> <span>|</span> <a href=""><span>交通票券</span></a> <span>|</span> <a href=""><span>景点门票</span></a> <span>|</span> <a href=""><span>特色体验</span></a> </div> </li> </ul> </div> </div> </div> </section> <!-- 特色当地体验 --> <section class="flexp"> <div class="center-wrap"> <div class="title clearfix"> <h2>当地玩乐</h2> </div> <div class="bt-card"> <ul> <li> <a href=""> <div class="pic-box"> <img src="images/tsddty1.png"> </div> <div class="word-box"> <p>香港迪士尼乐园门票(一日 / 两日) - 无需换票扫码入园）</p> <p> <em class="star">★</em><em class="num">4.8</em><span>（92833评价)2334.69k 人参加过</span> </p> </div> </a> </li> <li> <a href=""> <div class="pic-box"> <img src="images/tsddty2.png"> </div> <div class="word-box"> <p>罗马金宫剧场人妖</p> <p> <em class="star">★</em><em class="num">4.6</em> <span>（440条评价)900K+ 人参加过</span> </p> </div> </a> </li> <li> <a href=""> <div class="pic-box"> <img src="images/tsddty3.png"> </div> <div class="word-box"> <p>京都和服体验 - 梦馆</p> <p> <em class="star">★</em><em class="num">4.7</em> <span>（4,293条评价)50K+ 人参加过</span> </p> </div> </a> </li> <li> <a href=""> <div class="pic-box"> <img src="images/tsddty4.png"> </div> <div class="word-box"> <p>英国巨石阵 & 温莎城堡 & 巴斯罗马浴场一日游</p> <p> <em class="star">★</em><em class="num">4.5</em> <span>（2,104条评价)20K+ 人参加过</span> </p> </div> </a> </li> </ul> </div> </div> </section> <!-- 最世界·深度旅行 --> <section class="world commen"> <div class="center-wrap"> <div class="title clearfix"> <h2>最世界·深度旅行</h2> <span>摆脱千篇一律的旅行，探索属于自己的世界</span> <nav class="rt-nav"> <ul> <li class="current"><a href="">城市CityWalk</a></li> </ul> </nav> </div> <div class="bt-card"> <ul> <li class="big-grid"> <a href=""> <div class="pic-box"> <div class="mask"></div> <img src="images/yh.png"> <div class="circle"> <p>城市</p> <p>City Walk</p> </div> <div class="bt">【City Walk】大阪浪花の城——美食、动漫和不为人知的大阪人辛秘生活</div> </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/zsj2.png"> </div> <div class="word-box"> [City Walk] 京都伏见稻荷大社日本清酒厂巡礼半日游——赏千本鸟居… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/zsj3.png"> </div> <div class="word-box"> [City Walk] 京都好物—京都达人带你探店、美物、饮茶、艺术、日杂… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/zsj4.png"> </div> <div class="word-box"> [Citywalk] 一日游禅意京都——千年古都的维新之路… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/zsj5.png"> </div> <div class="word-box"> [City Walk] 日本桥— 穿街走巷看东京，感受大城市的市井人情… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/zsj6.png"> </div> <div class="word-box"> [Citywalk] 将军之道—京都绝景之旅(含米其林午餐）… </div> </a> </li> <li class="more-grid"> <div class="view-more"> <a href=""> <p>查看更多</p> <p>深度旅行产品</p> </a> <a href=""> <div class="iconfont"></div> </a> <p> <a href=""><span>日游</span></a> <span>|</span> <a href=""><span>周末</span></a> <span>|</span> <a href=""><span>亲子</span></a> <span>|</span> <a href=""><span>长线</span></a> </p> </div> </li> </ul> </div> </div> </section> <!-- 跟团/半自助游 --> <section class="group commen"> <div class="center-wrap"> <div class="title clearfix"> <h2>跟团/半自助游</h2> <span>旅游需要好的选择，踏实省心</span> <nav class="rt-nav"> <ul> <li class="current"><a href="">半自助游</a></li> <li><a href="">城市CityWalk</a></li> </ul> </nav> </div> <div class="bt-card"> <ul> <li class="big-grid"> <a href=""> <div class="pic-box"> <div class="mask"></div> <img src="images/yh.png"> <p>天津直飞沙巴5-6天半自助游（自由活动+出海两岛游+市区游+多种星级酒店）</p> <div class="circle"> <p>半自</p> <p>助游</p> </div> <div class="bt">天津直飞沙巴5-6天半自助游（自由活动+出海两岛游+市区游+多种星级酒店）</div> </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/gt2.png"> </div> <div class="word-box"> 成都/西安直飞清迈+拜县6-7天半自助游（2-8人纯玩私家小包团+萌妹子… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/gt3.png"> </div> <div class="word-box"> [一价全含] 北京直飞日本东京+大阪+名古屋+京都6/7天深度游（全程三… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/gt4.png"> </div> <div class="word-box"> 天津直飞芽庄5-7天半自助游（优质越南/越捷航空，12天自由行/赠送京… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/gt5.png"> </div> <div class="word-box"> 广州直飞美娜多5-6半自助游（班达尼莫公园+布纳肯浮潜+1-2天自由活动… </div> </a> </li> <li class="def-grid"> <a href=""> <div class="pic-box"> <img src="images/gt6.png"> </div> <div class="word-box"> (免签入境）深圳直飞伊朗德黑兰8天5晚半自助游（含国际往返机票+伊… </div> </a> </li> <li class="more-grid"> <div class="view-more"> <a href=""> <p>查看更多</p> <p>精品跟团/半自助游</p> </a> <a href=""> <div class="iconfont"></div> </a> <p> <a href=""><span>跟团游</span></a> <span>|</span> <a href=""><span>半自助游</span></a> </p> </div> </li> </ul> </div> </div> </section> <!-- footer --> <footer> <div class="tp-half"> <div class="center-wrap"> <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> <li> <a href="">深度旅行</a> </li> </ul> <div class="clearfix"> <dl class="service"> <dt>贴心服务</dt> <dd>我们收集慕云游者的真实诉求，找寻特色旅行目的地，让慕云游者放心出行</dd> </dl> <dl class="selection"> <dt>层层筛选</dt> <dd>对旅游产品供应商严格筛选，资质层层把关 为慕云游者挑选符合需求的旅行产品</dd> </dl> <dl class="security"> <dt>安心陪护</dt> <dd>对慕云游者的购买进行跟踪服务以及质量监控，生效投诉先行赔付，出现问题及时解决</dd> </dl> </div> </div> </div> <div class="bt-half"> <div class="center-wrap"> <div class="slogan clear-fix"> <dl> <dt>慕云游商城</dt> <dd>从一张机票、一家酒店的订购，到一次暖心的接机服务、一张轻松融入当地的交通卡 让我们带你探索这个世界</dd> </dl> </div> <nav class="clear-fix"> <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> </ul> </nav> <div class="copyright"><em>©</em> 2020 xxx.com 京ICP备 12003892号-11 京公网安备11010802030151号 营业执照</div> </div> </div> </footer> </body> </html>
写回答
1回答
-
好帮手慕慕子
2021-11-08
同学你好，真棒！！！，给同学一个大大的赞， 不过，由于提问时粘贴代码的格式问题，导致无法查看同学完整的代码，如下：
同学可以在自己本地浏览器查看代码运行效果，如果没有问题的话，棒棒的，就可以继续往后学习，如果是对哪里有疑问，可以详细描述下，再将对应的代码粘贴过来，老师帮助查看下哦~~
祝学习愉快~
0
相似问题