跟着老师敲了一遍后自己又敲了一遍，老师们帮我看看问题，有个问题就是更多渐变色那里向右小箭头我加了帧动画怎么没效果？自己没排查出来
来源：5-1 课程总结
卷毛奋斗中
2022-03-31 15:40:44
<!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">
<meta name="keywords" content="机票，酒店，签证，出国，自由行">
<meta name="Description" content="慕云游有十多年的项目开发经验，为客户提供优质的旅游服务">
<title>慕云游机票、酒店旅游攻略</title>
<!-- 页面重置链接 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 页面公共样式链接 -->
<link rel="stylesheet" href="./css/base.css">
<!-- css外链样式 -->
<link rel="stylesheet" href="./css/css.css">
</head>
<body>
<!-- 网页的头部区域 -->
<div class="sit-head">
<div class="top-bar ">
<div class="center-wrap">
<nav class="r-left">
<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="menu sqmenu">
<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>
<div class="arrow">
<b></b>
<i></i>
</div>
<div class="menu scmenu">
<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>
<div class="arrow">
<b></b>
<i></i>
</div>
<div class="menu jjmsmenu">
<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="r-right">
<a href="" class="iconfont"></a>
<span>|</span>
<a href="" class="iconfont"></a>
<a href="" class="iconfont"></a>
<a href="" class="iconfont"></a>
<a href="">登录</a>
<a href="">注册</a>
</div>
</div>
</div>
<!-- 主导航区域 -->
<div class="main-top">
<div class="center-wrap">
<nav class="main-link">
<ul>
<li class="have-menu jjzyxmenu">
<a href="">机酒自由行</a>
<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>
</dd>
</dl>
</div>
</li>
<li>
<a href="">优惠机票</a>
</li>
<li class="have-menu gtymenu">
<a href="">跟团游</a>
<div class="menu">
<dl>
<dt>全部</dt>
<dd>
<a href="">跟团游</a>
<a href="">半自助游</a>
</dd>
</dl>
</div>
</li>
<li>
<a href="">酒店</a>
</li>
<li class="have-menu ddwlmenu">
<a href="">当地玩乐</a>
<div class="menu">
<dl>
<dt>全部</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="have-menu sdlxmenu">
<a href="">深度旅游</a>
<div class="menu">
<dl>
<dt>全部</dt>
<dd>
<a href="">CityWalk</a>
<a href="">特色长线</a>
<a href="">Q-Home</a>
</dd>
</dl>
</div>
</li>
<li>
<a href="">私人定制</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- 搜索区域部分 -->
<div class="soso-box clearfix">
<div class="center-wrap">
<div class="logo">
<a href="">
<h2>慕云游商城</h2>
</a>
</div>
<div class="soso">
<input type="text" placeholder="请输入要去的旅游景点">
<button>
<a href="" class="iconfont"></a>
</button>
</div>
</div>
</div>
</div>
<!-- banner区域 -->
<section class="banner">
<a href="">
<img src="./images/banner1.jpg" alt="">
</a>
<div class="center-wrap">
<a href="" class="leftbtn"></a>
<a href="" class="rightbtn"></a>
<nav class="banner-nav">
<ul class="clearfix">
<li>
<dl class="hot">
<dt>热门出发地</dt>
<dd>
<em>北京</em>
<em>上海</em>
<em>广深</em>
<em>西南</em>
<em>其他地区</em>
</dd>
</dl>
<a href="" class="arrow iconfont"></a>
</li>
<li>
<dl class="at">
<dt>港澳台 国内</dt>
<dd>
<em>香港</em>
<em>澳门</em>
<em>台湾</em>
<em>国内其他</em>
</dd>
</dl>
<a href="" class="arrow iconfont"></a>
</li>
<li>
<dl class="jp">
<dt>日本 韩国</dt>
<dd>
<em>东京</em>
<em>大阪</em>
<em>冲绳</em>
<em>北海道</em>
<em>福冈</em>
</dd>
</dl>
<a href="" class="arrow iconfont"></a>
</li>
<li>
<dl class="au">
<dt>东南亚 南亚</dt>
<dd>
<em>泰国</em>
<em>新加坡</em>
<em>马来西亚</em>
<em>马尔代夫</em>
</dd>
</dl>
<a href="" class="arrow iconfont"></a>
</li>
<li>
<dl class="eu">
<dt>欧洲 美洲</dt>
<dd>
<em>英国</em>
<em>法国</em>
<em>美国</em>
<em>加拿大</em>
</dd>
</dl>
<a href="" class="arrow iconfont"></a>
</li>
<li>
<dl class="ax">
<dt>澳新 中东非</dt>
<dd>
<em>澳大利亚</em>
<em>新西兰</em>
<em>迪拜</em>
</dd>
</dl>
<a href="" class="arrow iconfont"></a>
</li>
</ul>
<div class="menus-box">
<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="">台北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>
</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="">台北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>
</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="">台北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>
</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 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="">台北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>
</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="">台北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>
</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="">台北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>
</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>
</nav>
</div>
</section>
<!-- 热门推荐 -->
<section class="hot-menu clearfix">
<div class="center-wrap">
<ul>
<li>
<a href="">
<img src="./images/small01.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./images/small02.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./images/small03.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./images/small04.png" alt="">
</a>
</li>
</ul>
</div>
</section>
<!-- 新鲜甩尾 -->
<section class="xxsw content-part">
<div class="center-wrap">
<div class="hd clearfix">
<div class="login">
<h2>新鲜甩尾</h2>
</div>
<div class="login-title">
<em>每日不可不看的好货</em>
</div>
</div>
<div class="bd">
<ul>
<li>
<a href="">
<div class="picbox">
<img src="./images/xxsw1.png" alt="">
</div>
<p class="x-wz">北京直飞马尔代夫6-7天往返含税机票（首都航空/售完为止）…</p>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="./images/xxsw2.png" alt="">
</div>
<p class="x-wz">[甩尾狂欢] 北京/天津直飞日本东京/大阪/冲绳/札幌/福冈4-7天往返含…</p>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="./images/xxsw3.png" alt="">
</div>
<p class="x-wz">[拒签全退][全国25城联运] 北京往返格鲁吉亚+阿塞拜疆7-30天自由行…</p>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="./images/xxsw4.png" alt="">
</div>
<p class="x-wz">[樱花季] 北京直飞东京/大阪/名古屋/冲绳/札幌/福冈/仙台2-30天往返</p>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="./images/xxsw5.png" alt="">
</div>
<p class="x-wz">[品质小团/快速确认] 新西兰福克斯冰川直升机观光+冰川徒步（提供…</p>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="./images/xxsw6.png" alt="">
</div>
<p class="x-wz">[北欧破冰船] 芬兰+瑞典极地探险号破冰船活动+冰上漂浮+瑞典小…</p>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="./images/xxsw7.png" alt="">
</div>
<p class="x-wz">[指定班期特惠][全程中文伴游] 摩洛哥全景深度10日游（卡萨进出…</p>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="./images/xxsw1.png" alt="">
</div>
<p class="x-wz">马来西亚天空之镜+河口赏鹰+夜游萤火虫+寻找蓝眼泪（马来西亚瓜拉雪…</p>
</a>
</li>
</ul>
</div>
</div>
</section>
<!-- 机酒自由行部分 -->
<section class="jjzyx content-part">
<div class="center-wrap">
<div class="hd clearfix">
<div class="login">
<h2>机酒自由行</h2>
</div>
<div class="login-title">
<em>每日不可不看的好货</em>
</div>
<nav class="jj-nav clearfix">
<ul>
<li class="current">近期好货</li>
<li>新品汇聚</li>
<li>定制游</li>
<li>国内推荐</li>
<li>优惠机票</li>
<li>热门海岛</li>
<li>热卖签证</li>
</ul>
</nav>
</div>
<div class="bd">
<div class="col big-grid">
<a href="">
<img src="./images/jjzyx1.png" alt="">
<em class="d-text">[樱花季]天津直飞东京/大阪/名古屋/冲绳/札幌2-30天往返
含税机票【甩尾/多团期】
</em>
<span class="ticket">机票<span />
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/jjzyx2.png" alt="">
<span class="ticket ticket-jp">跟团游<span />
</div>
<p class="jj-wz">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/jjzyx3.png" alt="">
<span class="ticket ticket-jp">机票<span />
</div>
<p class="jj-wz">
北京/天津直飞日本东京/大阪/东阪/福冈/名古屋冲绳/北海道4-7天往返…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/jjzyx4.png" alt="">
<span class="ticket ticket-jp">机票<span />
</div>
<p class="jj-wz">
[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/jjzyx5.png" alt="">
<span class="ticket ticket-jp">机票<span />
</div>
<p class="jj-wz">
杭州/上海/宁波/义乌直飞越南芽庄/岘港4-6天往返含税机票（20KG行…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/jjzyx6.png" alt="">
<span class="ticket ticket-jp">机票<span />
</div>
<p class="jj-wz">
[赠自由行礼包] 上海/杭州/南京/合肥/宁波/徐州直飞日本东京/大阪…
</p>
</a>
</div>
<div class="col more-grid">
<a href="">
<div class="more">
<p>查看更多</p>
<p>机酒自由行产品</p>
</div>
<span class="iconfont"></span>
<nav class="arrow-jt clearfix">
<ul>
<li>机票</li>
<li>酒店</li>
<li>机+酒</li>
<li>邮轮</li>
</ul>
</nav>
</a>
</div>
</div>
</div>
</section>
<!-- 当地玩乐部分 -->
<section class="ddwl content-part">
<div class="center-wrap">
<div class="hd clearfix">
<div class="login">
<h2>当地玩乐</h2>
</div>
<div class="login-title">
<em>像当地人一样，体验本土的吃喝玩乐</em>
</div>
<nav class="jj-nav clearfix">
<ul>
<li class="current">国内</li>
<li>日本</li>
<li>瑞士</li>
<li>新西兰</li>
<li>澳大利亚</li>
<li>柬埔寨</li>
<li>泰国</li>
</ul>
</nav>
</div>
<div class="bd clearfix">
<div class="ddwlmenu">
<a href="">
<div class="big-pro">
<img src="./images/ddwl1.png" alt="">
<div class="big-pro-text">
<p class="qzjx">[亲子佳选]泰国清迈夜间动物园/Night Safari（可选接送；导游；长颈鹿餐厅）</p>
<div class="big-pro-under">
<p class="under-left">城市玩乐</p>
<p class="under-right">
<strong>199</strong>元起
</p>
</div>
</div>
</div>
<div class="small-pro small-one clearfix">
<div class="img">
<img src="./images/ddwl2.png" alt="">
</div>
<span>[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…</span>
</div>
</a>
</div>
<div class="ddwlmenu">
<a href="">
<div class="small-pro clearfix">
<div class="img">
<img src="./images/ddwl3.png" alt="">
</div>
<span>[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…</span>
</div>
<div class="small-pro clearfix">
<div class="img">
<img src="./images/ddwl4.png" alt="">
</div>
<span>[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…</span>
</div>
<div class="small-pro clearfix">
<div class="img">
<img src="./images/ddwl5.png" alt="">
</div>
<span>[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…</span>
</div>
</a>
</div>
<div class="ddwlmenu">
<a href="">
<div class="small-pro clearfix">
<div class="img">
<img src="./images/ddwl6.png" alt="">
</div>
<span>[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…</span>
</div>
<!-- 按钮部分 -->
<div class="col more-grid">
<a href="">
<div class="more">
<p>查看更多</p>
<p>当地玩乐产品</p>
</div>
<span class="iconfont"></span>
<nav class="arrow-jt clearfix">
<ul>
<li>WiFi/电话卡</li>
<li>交通票券</li>
<li>景点门票</li>
<li>特色体验</li>
</ul>
</nav>
</a>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--特色当地体验 -->
<section class="tsddty content-part">
<div class="center-wrap">
<div class="hd">
<h2>特色当地体验</h2>
</div>
<div class="bd">
<div class="tsddty-col">
<a href="">
<div class="picbox">
<img src="./images/tsddty1.png" alt="">
</div>
<div class="tsddty-under">
<p>香港迪士尼乐园门票(一日 / 两日) - 无需换票扫码入园）</p>
<div class="join">
<p class="score-left">★4.8</p>
<p class="score-right">（92833评价)2334.69k 人参加过</p>
</div>
</div>
</a>
</div>
<div class="tsddty-col">
<a href="">
<div class="picbox">
<img src="./images/tsddty2.png" alt="">
</div>
<div class="tsddty-under">
<p>罗马金宫剧场人妖秀</p>
<div class="join">
<p class="score-left">★4.8</p>
<p class="score-right">（92833评价)2334.69k 人参加过</p>
</div>
</div>
</a>
</div>
<div class="tsddty-col">
<a href="">
<div class="picbox">
<img src="./images/tsddty3.png" alt="">
</div>
<div class="tsddty-under">
<p>京都和服体验 - 梦馆</p>
<div class="join">
<p class="score-left">★4.8</p>
<p class="score-right">（92833评价)2334.69k 人参加过</p>
</div>
</div>
</a>
</div>
<div class="tsddty-col">
<a href="">
<div class="picbox">
<img src="./images/tsddty4.png" alt="">
</div>
<div class="tsddty-under">
<p>英国巨石阵 & 温莎城堡 & 巴斯罗马浴场一日游</p>
<div class="join">
<p class="score-left">★4.8</p>
<p class="score-right">（92833评价)2334.69k 人参加过</p>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- 最世界深度旅行 -->
<section class="zsjsdlx content-part clearfix">
<div class="center-wrap">
<div class="hd clearfix">
<div class="login">
<h2>最世界·深度旅行</h2>
</div>
<div class="login-title">
<em>摆脱千篇一律的旅行，探索属于自己的世界</em>
</div>
<nav class="jj-nav clearfix">
<ul>
<li class="current">城市CityWalk</li>
</ul>
</nav>
</div>
<div class="bd">
<div class="col big-grid">
<a href="">
<div class="mask"></div>
<div class="cicle">
<p>城市</p>
<p>CityWalk</p>
</div>
<p class="big-text">
【City Walk】大阪浪花の城——美食、动漫和不为人知的大阪人辛秘生活
</p>
<img src="./images/yh.png" alt="">
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/zsj2.png" alt="">
</div>
<p class="jj-wz">
[City Walk] 京都伏见稻荷大社日本清酒厂巡礼半日游——赏千本鸟居…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/zsj3.png" alt="">
</div>
<p class="jj-wz">
[City Walk] 京都好物—京都达人带你探店、美物、饮茶、艺术、日杂…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/zsj4.png" alt="">
</div>
<p class="jj-wz">
[Citywalk] 一日游禅意京都——千年古都的维新之路…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/zsj5.png" alt="">
</div>
<p class="jj-wz">
[City Walk] 日本桥— 穿街走巷看东京，感受大城市的市井人情…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/zsj6.png" alt="">
</div>
<p class="jj-wz">
[Citywalk] 将军之道—京都绝景之旅(含米其林午餐）…
</p>
</a>
</div>
<div class="col more-grid">
<a href="">
<div class="more">
<p>查看更多</p>
<p>深度旅行产品</p>
</div>
<span class="iconfont"></span>
<nav class="arrow-jt clearfix">
<ul>
<li>日游</li>
<li>周末</li>
<li>亲子</li>
<li>长线</li>
</ul>
</nav>
</a>
</div>
</div>
</div>
</section>
<!-- 跟团/半自助游 -->
<section class="gt content-part clearfix">
<div class="center-wrap">
<div class="hd clearfix">
<div class="login">
<h2>跟团/半自助游</h2>
</div>
<div class="login-title">
<em>摆脱千篇一律的旅行，探索属于自己的世界</em>
</div>
<nav class="jj-nav clearfix">
<ul>
<li class="current">半自助游</li>
<li>城市CityWalk</li>
</ul>
</nav>
</div>
<div class="bd">
<div class="col big-grid">
<a href="">
<div class="mask"></div>
<div class="cicle">
<p>半自</p>
<p>助游</p>
</div>
<p class="big-text">
天津直飞沙巴5-6天半自助游（自由活动+出海两岛游+市区游+多种星级酒店）
</p>
<img src="./images/yh.png" alt="">
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/gt2.png" alt="">
</div>
<p class="jj-wz">
成都/西安直飞清迈+拜县6-7天半自助游（2-8人纯玩私家小包团+萌妹子…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/gt3.png" alt="">
</div>
<p class="jj-wz">
[一价全含] 北京直飞日本东京+大阪+名古屋+京都6/7天深度游（全程三…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/gt4.png" alt="">
</div>
<p class="jj-wz">
天津直飞芽庄5-7天半自助游（优质越南/越捷航空，12天自由行/赠送京…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/gt5.png" alt="">
</div>
<p class="jj-wz">
广州直飞美娜多5-6半自助游（班达尼莫公园+布纳肯浮潜+1-2天自由活动…
</p>
</a>
</div>
<div class="col">
<a href="">
<div class="jjxyx-img">
<img src="./images/gt6.png" alt="">
</div>
<p class="jj-wz">
(免签入境）深圳直飞伊朗德黑兰8天5晚半自助游（含国际往返机票+伊…
</p>
</a>
</div>
<div class="col more-grid">
<a href="">
<div class="more">
<p>查看更多</p>
<p>精品跟团/半自助游</p>
</div>
<span class="iconfont"></span>
<nav class="arrow-jt clearfix">
<ul>
<li>跟团游</li>
<li>半自助游</li>
</ul>
</nav>
</a>
</div>
</div>
</div>
</section>
<!-- 页面底部 -->
<footer>
<div class="part1">
<div class="center-wrap">
<nav>
<ul class="clearfix">
<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>
</nav>
<div class="services clearfix">
<dl class="txfw">
<dt>贴心服务</dt>
<dd>我们收集慕云游者的真实诉求，找寻特色旅行目的地，让慕云游者放心出行</dd>
</dl>
<dl class="ccsx">
<dt>层层筛选</dt>
<dd>对旅游产品供应商严格筛选，资质层层把关
为慕云游者挑选符合需求的旅行产品
</dd>
</dl>
<dl class="axph">
<dt>安心陪护</dt>
<dd>对慕云游者的购买进行跟踪服务以及质量监控，生效投诉先行赔付，出现问题及时解决</dd>
</dl>
</div>
</div>
</div>
<!--part2 部分 -->
<div class="part2">
<div class="center-wrap clearfix">
<div class="hd clearfix">
<div class="logos">
<h2>慕云游商城</h2>
</div>
<div class="login">
从一张机票、一家酒店的订购，到一次暖心的接机服务、一张轻松融入当地的交通卡
让我们带你探索这个世界
</div>
</div>
<nav class="clearfix">
<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>
<span>©2020 imooc.com 京ICP备 12003892号-11 京公网安备11010802030151号 营业执照</span>
</div>
</div>
<!-- 小箭头部分 -->
<a href="" class="jt iconfont"></a>
</footer>
</body>
</html>
/* 头部导航区域 */
.sit-head {
min-width: 1152px;
height: 150px;
}
/* 顶部导航区域 */
.sit-head .top-bar {
min-width: 1152px;
height: 32px;
background-color: #2A2A2A;
}
/* 顶部导航左边的区域 */
.sit-head .top-bar {
display: flex;
}
.sit-head .top-bar .r-left > ul > li {
float: left;
margin-right: 18px;
line-height: 32px;
}
.sit-head .top-bar .r-left > ul > li:last-child {
margin-right: 0;
}
.sit-head .top-bar .r-left > ul > li a {
color: #fff;
font-size: 14px;
}
.sit-head .top-bar .r-left > ul > li.have-menu {
padding-left: 12px;
position: relative;
}
.sit-head .top-bar .r-left > ul > li.have-menu .arrow {
position: absolute;
right: -12px;
top: 11px;
width: 12px;
height: 12px;
transition: transform .4s ease 0s;
}
/* 顶部导航栏二级菜单 */
.sit-head .top-bar .have-menu .menu {
position: absolute;
left: 10px;
top: 32px;
width: 121px;
z-index: 9999;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
background-color: #fff;
line-height: 18px;
padding: 6px 4px 18px 8px;
box-sizing: border-box;
/* 隐藏 */
display: none;
}
/* 分别给不同的二级菜单设置宽度 */
.sit-head .top-bar .center-wrap .r-left .have-menu .sqmenu {
width: 121px;
}
.sit-head .top-bar .center-wrap .r-left .have-menu .scmenu {
width: 76px;
left: -1px;
}
.sit-head .top-bar .center-wrap .r-left .have-menu .jjmsmenu {
width: 64px;
}
.sit-head .top-bar .have-menu > a:hover {
color: #20BD9A;
}
.sit-head .top-bar .have-menu:hover .menu {
display: block;
}
.sit-head .top-bar .have-menu:hover .menu > ul > li > a:hover {
color: orange;
}
.sit-head .top-bar .have-menu .menu > ul > li a {
color: #1C1F21;
font-size: 12px;
}
/* 鼠标聚焦的时候小箭头会翻转 */
.sit-head .top-bar .r-left > ul > li.have-menu:hover .arrow {
transform: rotate(180deg);
}
.sit-head .top-bar .r-left > ul > li.have-menu .arrow b {
position: absolute;
width: 6px;
height: 6px;
left: 2px;
top: 2px;
background-color: #fff;
transform: rotate(45deg);
}
.sit-head .top-bar .r-left > ul > li.have-menu .arrow i {
position: absolute;
width: 6px;
height: 6px;
left: 2px;
top: 1px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
/* 右边的小图标的内容 */
.sit-head .top-bar .r-right {
float: right;
display: flex;
justify-content: space-between;
align-items: center;
line-height: 32px;
}
.sit-head .top-bar .r-right a, .sit-head .top-bar .r-right span {
color: #fff;
margin-left: 16px;
}
/* 主导航区域 */
.sit-head .main-top {
height: 40px;
background-color: #20BD9A;
display: flex;
}
.sit-head .main-top .center-wrap .main-link > ul > li {
float: left;
margin-right: 18px;
font-size: 16px;
line-height: 40px;
}
.sit-head .main-top .center-wrap .main-link > ul > li:last-child {
margin-right: 0;
}
.sit-head .main-top .center-wrap .main-link > ul > li a {
color: #fff;
}
.sit-head .main-top .center-wrap .main-link .have-menu {
padding-right: 16px;
position: relative;
}
.sit-head .main-top .center-wrap .main-link .have-menu::before {
position: absolute;
right: -3px;
top: 18px;
content: '';
width: 0;
height: 0;
border: 5px solid transparent;
border-top: 5px solid #fff;
border-bottom: 0;
transition: transform .6s ease 0s;
}
.sit-head .main-top .center-wrap .main-link .have-menu:hover::before {
transform: rotate(180deg);
}
/* 第二个导航栏的二级菜单 */
.sit-head .main-top .center-wrap .main-link .have-menu .menu > dl{
background-color: #fff;
position: absolute;
left: 0;
top: 35px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
padding: 6px 8px;
box-sizing: border-box;
z-index: 9999;
}
.sit-head .main-top .center-wrap .main-link .have-menu .menu dl dt {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #1C1F21;
line-height: 30px;
}
.sit-head .main-top .center-wrap .main-link .have-menu .menu dd {
line-height: 20px;
}
.sit-head .main-top .center-wrap .main-link .have-menu .menu dd a {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #1C1F21;
}
/* 二级菜单隐藏 */
.sit-head .main-top .center-wrap .main-link .have-menu .menu {
display: none;
}
/* 分别设置二级菜单的宽度 */
.sit-head .main-top .center-wrap .main-link .have-menu.jjzyxmenu .menu > dl{
width: 165px;
}
.sit-head .main-top .center-wrap .main-link .have-menu.gtymenu .menu > dl{
width: 106px;
}
.sit-head .main-top .center-wrap .main-link .have-menu.ddwlmenu .menu > dl{
width: 172px;
}
.sit-head .main-top .center-wrap .main-link .have-menu.sdlxmenu .menu > dl{
width: 120px;
}
.sit-head .main-top .center-wrap .main-link .have-menu:hover .menu {
display: block;
}
/* 当鼠标移入的时候 */
.sit-head .main-top .center-wrap .main-link .have-menu .menu dd a:hover {
color: orange;
}
/* 导航栏搜索区域 */
.soso-box {
height: 78px;
padding: 21px 0;
box-sizing: border-box;
}
.soso-box .logo h2 {
float: left;
font-family: PingFangSC-Medium;
font-size: 24px;
color: #20BD9A;
margin-right: 20px;
}
.soso-box .soso input {
float: left;
width: 370px;
height: 30px;
border: 1px solid #20BD9A;
padding-left: 10px;
box-sizing: border-box;
outline: none;
font-size: 12px;
border-radius: 4px 0 0 4px;
}
.soso-box .soso button {
display: block;
width: 32px;
height: 30px;
background-color: #20BD9A;
border: 0;
border-radius: 0 4px 4px 0;
}
.soso-box .soso button a {
color: #fff;
font-weight: bold;
}
/* banner区域 */
.banner {
position: relative;
}
.banner img {
min-width: 1152px;
width: 100%;
vertical-align: middle;
}
.banner .center-wrap .banner-nav {
position: absolute;
width: 1152px;
height: 100%;
left: 50%;
margin-left: -576px;
top: 0;
}
.banner .center-wrap .banner-nav ul {
height: 100%;
}
.banner .center-wrap .banner-nav ul li {
width: 296px;
height: 16.66%;
background-color: rgba(0,0,0,0.5);
}
/*小按钮 */
.banner .center-wrap .leftbtn {
position: absolute;
width: 28px;
height: 44px;
top: 50%;
left: 218px;
background:url(../images/icons.png) -21px -94px;
}
.banner .center-wrap .rightbtn {
position: absolute;
width: 28px;
height: 44px;
top: 50%;
right: 218px;
background:url(../images/icons.png) -21px -29px;
}
.banner .center-wrap .leftbtn:hover, .banner .center-wrap .rightbtn:hover {
opacity: .8;
}
.banner .center-wrap .banner-nav ul li {
border-bottom: 1px solid #9e9e9e;
}
.banner .center-wrap .banner-nav ul li dl {
padding: 16px 0 11px 40px;
position: relative;
}
.banner .center-wrap .banner-nav ul li dl::before {
content: '';
position: absolute;
left: 10px;
top: 30px;
width: 20px;
height: 20px;
background:url(../images/icons.png);
}
/* 小图标制作 */
.banner .center-wrap .banner-nav ul li dl.hot::before {
background-position: -30px -400px;
}
.banner .center-wrap .banner-nav ul li dl.at::before {
background-position: -28px -217px;
}
.banner .center-wrap .banner-nav ul li dl.jp::before {
background-position: -26px -172px;
}
.banner .center-wrap .banner-nav ul li dl.au::before {
background-position: -28px -263px;
}
.banner .center-wrap .banner-nav ul li dl.eu::before {
background-position: -29px -351px;
}
.banner .center-wrap .banner-nav ul li dl.ax::before {
background-position: -28px -306px;
}
.banner .center-wrap .banner-nav ul li dl dt{
font-weight: bold;
font-size: 18px;
color: #fff;
line-height: 26px;
}
.banner .center-wrap .banner-nav dd{
font-size: 14px;
color: #fff;
line-height: 22px;
}
.banner .center-wrap .banner-nav ul li:last-child {
border-bottom: 0;
}
/* 右边小箭头 */
.banner .center-wrap .banner-nav ul li {
position: relative;
}
.banner .center-wrap .banner-nav .arrow {
position: absolute;
right: 22px;
top: 34px;
color: #fff;
font-size: 16px;
}
/* 二级导航菜单 */
.banner .center-wrap .banner-nav .menus-box > .menu {
position: absolute;
left: 296px;
width: 356px;
height: 100%;
top: 0;
background-color: rgba(0,0,0,.55);
padding: 16px 16px 0 16px;
box-sizing: border-box;
}
.banner .center-wrap .banner-nav .menus-box > .menu dl {
margin-bottom: 12px;
}
.banner .center-wrap .banner-nav .menus-box > .menu dt {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #FFFFFF;
line-height: 24px;
}
.banner .center-wrap .banner-nav .menus-box > .menu a {
color: #fff;
font-size: 14px;
line-height: 22px;
margin-right: 7px;
}
.banner .center-wrap .banner-nav .menus-box > .menu {
display: none;
}
.banner .center-wrap .banner-nav .menus-box .menu.current{
display: block;
}
/* 热门推荐栏目 */
.hot-menu .center-wrap ul {
display: flex;
justify-content: space-between;
margin: 32px 0 32px;
}
/* 新鲜甩尾专栏 */
.xxsw {
height: 738px;
background-color: #F7F7F7;
padding: 40px 0 40px;
box-sizing: border-box;
}
.content-part .center-wrap .hd .login h2 {
float: left;
font-family: PingFangSC-Medium;
font-size: 36px;
color: #1C1F21;
}
.content-part .center-wrap .bd .picbox {
height: 184px;
}
/* 动画过渡 */
.content-part .col {
overflow: hidden;
}
.content-part .jjxyx-img {
overflow: hidden;
}
.content-part .big-pro {
overflow: hidden;
}
.content-part img:hover {
transform: scale(1.1);
}
.content-part .small-pro .img{
overflow: hidden;
}
.xxsw .center-wrap .bd li {
overflow: hidden;
}
.xxsw .center-wrap .bd .picbox {
overflow: hidden;
}
.content-part img {
transition: transform .4s ease 0s;
}
.content-part .center-wrap .hd .login-title em {
float: left;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #1C1F21;
padding-left: 12px;
margin-top: 24px;
}
.xxsw .center-wrap .bd {
padding-top: 32px;
}
.xxsw .center-wrap .bd > ul > li {
float: left;
width: 264px;
height: 270px;
background-color: #fff;
margin: 0 32px 32px 0;
}
.xxsw .center-wrap .bd > ul > li:nth-child(4n) {
margin-right: 0;
}
.xxsw .center-wrap .bd > ul > li .x-wz {
padding: 20px 14px;
font-size: 14px;
color: #1C1F21;
}
.xxsw .center-wrap .bd > ul > li:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
/* 机酒自由行部分 */
.jjzyx {
height: 738px;
padding: 40px 0;
box-sizing: border-box;
}
.content-part .center-wrap .jj-nav {
float: right;
margin-top: 15px;
}
.content-part .center-wrap .jj-nav > ul > li {
float: left;
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(0,0,0,0.85);
margin-right: 14px;
}
.content-part .center-wrap .jj-nav > ul > li:last-child {
margin-right: 0;
}
.content-part .center-wrap .jj-nav .current {
color: #20BD9A;
border-bottom: 4px solid #20BD9A;
padding-bottom: 2px;
}
/* 机酒自由行下面的部分 */
.content-part .center-wrap .bd .col {
float: left;
width: 264px;
height: 270px;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
margin: 0 32px 32px 0;
position: relative;
}
.content-part .center-wrap .bd .col:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.content-part .center-wrap .bd {
padding-top: 32px;
}
.content-part .center-wrap .bd .col.big-grid {
width: 560px;
height: 270px;
}
/* 大图定位里面的文字 */
.content-part .center-wrap .bd .col.big-grid .d-text {
position: absolute;
bottom: 0;
left: 0;
width: 560px;
height: 103px;
background-color: rgba(0,0,0,.55);
font-family: PingFangSC-Regular;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
padding: 30px 26px;
box-sizing: border-box;
}
.content-part .center-wrap .bd .col.big-grid .ticket {
position: absolute;
left: 0;
top: 50%;
margin-top: -20px;
width: 74px;
height: 40px;
background-color: rgba(0,0,0,.55);
color: #fff;
line-height: 40px;
text-align: center;
}
/* 小图片跟团游定位 */
.content-part .center-wrap .bd .jjxyx-img {
position: relative;
height: 184px;
}
.content-part .center-wrap .bd .jjxyx-img .ticket-jp {
position: absolute;
bottom: 0;
left: 0;
width: 74px;
height: 40px;
background-color: rgba(0,0,0,.55);
color: #fff;
line-height: 40px;
text-align: center;
}
.content-part .center-wrap .bd .col:nth-child(3), .content-part .center-wrap .bd .col:nth-child(7) {
margin-right: 0;
}
.content-part .center-wrap .bd .col .jj-wz {
padding: 20px 14px 20px 14px;
font-size: 14px;
line-height: 22px;
color: #1C1F21;
font-family: PingFangSC-Regular;
}
/* 小按钮部分 */
.content-part .center-wrap .bd .more-grid {
background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.content-part .center-wrap .bd .more-grid {
box-sizing: border-box;
}
.content-part .center-wrap .bd .more-grid .more {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #FFFFFF;
text-align: center;
line-height: 22px;
}
.content-part .more-grid a {
display: block;
padding: 29px 0 0 0;
}
.content-part .center-wrap .bd .more-grid .iconfont {
font-size: 48px;
color: #fff;
font-weight: bold;
text-align: center;
position: relative;
top: 28px;
left: 50%;
margin-left: -24px;
}
.content-part .center-wrap .bd .more-grid:hover .iconfont {
animation: ud .4s ease 0s infinite alternate;
}
@keyframes ud {
from {
transform: translateY(-10px);
}
to {
transform: translateY(10px);
}
}
.content-part .center-wrap .bd .more-grid .arrow-jt > ul li {
float: left;
margin-right: 6px;
font-size: 14px;
color: #fff;
border-right: 1px solid #fff;
padding: 0 9px;
font-family: PingFangSC-Regular;
position: relative;
left: 25px;
margin-top: 56px;
}
.content-part .center-wrap .bd .more-grid .arrow-jt > ul li:last-child {
margin-right: 0;
border-right: 0;
}
/*当地玩乐部分 */
.ddwl {
background-color: #F7F7F7;;
height: 586px;
padding: 40px 0;
box-sizing: border-box;
}
.ddwl .center-wrap .ddwlmenu {
float: left;
width: 364px;
margin-right: 30px;
}
.ddwl .center-wrap .ddwlmenu:last-child {
margin-right: 0;
}
.ddwl .center-wrap .ddwlmenu .big-pro {
position: relative;
width: 364px;
height: 270px;
margin-bottom: 30px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
/* 图片上面的定位 */
.ddwl .center-wrap .ddwlmenu .big-pro .big-pro-text {
position: absolute;
bottom: 0;
left: 0;
width: 364px;
height: 104px;
background-color: rgba(0,0,0,.55);
padding: 17px 21px;
box-sizing: border-box;
color: #fff;
}
.ddwl .center-wrap .ddwlmenu .big-pro .qzjx {
text-align: left;
font-size: 14px;
}
.ddwl .center-wrap .ddwlmenu .big-pro .big-pro-under {
padding-top: 4px;
font-size: 14px;
}
.ddwl .center-wrap .ddwlmenu .big-pro .big-pro-under strong {
color:#36DFBA;
}
.ddwl .center-wrap .ddwlmenu .big-pro .under-left {
float: left;
}
.ddwl .center-wrap .ddwlmenu .big-pro .under-right {
float: right;
}
.ddwl .center-wrap .ddwlmenu .big-pro:hover, .ddwl .center-wrap .ddwlmenu .small-pro:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.ddwl .center-wrap .ddwlmenu .small-pro {
width: 364px;
height: 120px;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.ddwl .center-wrap .ddwlmenu .small-pro .img {
float: left;
width: 120px;
height: 120px;
}
.ddwl .center-wrap .ddwlmenu .small-pro {
margin-bottom: 30px;
}
.ddwl .center-wrap .ddwlmenu .small-pro span {
width: 244px;
display: block;
float: left;
padding: 26px 18px;
box-sizing: border-box;
font-size: 14px;
line-height: 22px;
color: #000;
}
.ddwl .center-wrap .ddwlmenu .more-grid {
width: 364px;
height: 270px;
background-image: linear-gradient(180deg, #FF6374 1%, #FF7368 98%);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.ddwl .center-wrap .ddwlmenu .more-grid .arrow-jt {
position: relative;
left: -13px;
}
/* 特色当地体验部分 */
.tsddty {
height: 456px;
box-sizing: border-box;
}
.tsddty .hd {
padding: 40px 0 32px;
}
.tsddty .hd h2 {
font-family: PingFangSC-Medium;
font-size: 36px;
color: #1C1F21;
text-align: center;
}
.tsddty .bd .tsddty-col .picbox {
width: 264px;
height: 184px;
overflow: hidden;
}
.tsddty .bd .tsddty-col {
width: 264px;
height: 290px;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
float: left;
margin-right: 32px;
}
.tsddty .bd .tsddty-col:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.tsddty .bd .tsddty-col:last-child {
margin-right: 0;
}
.tsddty .bd .tsddty-col .tsddty-under {
padding: 16px 8px 16px 14px;
box-sizing: border-box;
}
.tsddty .bd .tsddty-col .tsddty-under > p {
height: 48px;
font-family: PingFangSC-Medium;
font-size: 16px;
color: #000000;
line-height: 24px;
}
.tsddty .bd .tsddty-col .tsddty-under .join {
padding-top: 8px;
}
.tsddty .bd .tsddty-col .tsddty-under .score-left {
float: left;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #FA6400;
}
.tsddty .bd .tsddty-col .tsddty-under .score-right {
float: left;
font-size: 12px;
color: #000;
}
/* 最世界·深度旅行 */
.zsjsdlx {
height: 738px;
background-color: #F7F7F7;
padding: 40px 0;
box-sizing: border-box;
}
.zsjsdlx .center-wrap .bd .more-grid {
background-image: linear-gradient(180deg, #BD5EE8 0%, #832ABB 98%);
}
.content-part .big-grid .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
opacity: 0;
transition: opacity .4s ease 0s;
}
.content-part .big-grid .cicle {
position: absolute;
width: 106px;
height: 106px;
border-radius: 50%;
border: 1px solid #fff;
text-align: center;
top: -150px;
left: 50%;
margin-left: -53px;
padding-top: 24px;
box-sizing: border-box;
transition: top .5s ease 0s;
}
.content-part .big-grid:hover .cicle {
top: 62px;
}
.content-part .big-grid .cicle p {
color: #fff;
font-size: 16px;
}
.content-part .big-grid:hover .mask{
opacity: 1;
}
.content-part .big-grid:hover .big-text {
bottom: 30px;
}
.content-part .big-grid .big-text {
font-size: 14px;
position: absolute;
bottom: -30px;
left: 26px;
color: #fff;
transition: bottom .5s ease 0s;
}
/* 跟团/半自助游 */
.gt {
height: 738px;
padding: 40px 0;
box-sizing: border-box;
}
.gt .center-wrap .bd .more-grid {
background-image: linear-gradient(180deg, #41D8E9 0%, #3685EA 98%);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.gt .center-wrap .bd .more-grid .arrow-jt {
position: relative;
left: 40px;
}
/* 页面底部 */
footer {
position: relative;
}
footer .part1 {
height: 220px;
background-color: #f7f7f7;
}
footer .part1 ul {
padding:36px 0 40px 0;
}
footer .part1 ul li {
float: left;
margin-right: 22px;
border-right: 2px solid #1C1F21;
}
footer .part1 ul li:last-child {
margin-right: 0;
}
footer .part1 ul li a {
color: #1C1F21;
padding: 0 18px;
font-family: PingFangSC-Regular;
font-size: 18px;
}
footer .part1 ul li a:first-child {
padding-left: 0;
}
/* 下面小图标的部分 */
footer .part1 .services dl {
float: left;
margin-right: 30px;
padding-left: 75px;
position: relative;
}
footer .part1 dl::before {
content: '';
position: absolute;
width: 60px;
height: 60px;
background-image: url(../images/icons.png);
left: 0;
}
footer .part1 dl dd {
font-size: 14px;
}
footer .part1 dl.txfw::before {
background-position: -150px -178px;
}
footer .part1 dl.ccsx::before {
background-position: -150px -104px;
}
footer .part1 dl.axph::before {
background-position: -150px -31px;
}
footer .part1 .services dl:last-child {
margin-right: 0;
}
footer .part1 .services dd {
width: 289px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #1C1F21;
line-height: 22px;
}
/* part2部分 */
footer .part2 {
height: 225px;
background-color: #1C1F21;
padding-top: 48px;
}
footer .part2 .hd {
padding-top: 31px;
}
footer .part2 .center-wrap h2 {
font-family: PingFangSC-Regular;
font-size: 46px;
color: #fff;
float: left;
margin-right: 21px;
}
footer .part2 .center-wrap .login {
float: left;
width: 538px;
color: #fff;
font-size: 14px;
line-height: 14px;
margin: 17px 0 0 0;
line-height: 22px;
}
footer .part2 .center-wrap nav {
padding: 31px 0 8px 0;
}
footer .part2 .center-wrap nav ul li {
float: left;
margin-right: 10px;
border-right: 1px solid #fff;
}
footer .part2 .center-wrapnav ul li:last-child {
margin-right: 0;
}
footer .part2 .center-wrap nav ul li a {
color: #fff;
font-size: 14px;
padding: 0 10px;
}
footer .part2 .center-wrap nav ul li a:first-child {
padding-left: 0;
}
footer .part2 .center-wrap span {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #FFFFFF;
}
/* 箭头部分 */
footer .jt {
width: 60px;
height: 60px;
border-radius: 4px;
background-color: rgba(0, 0, 0, .4);
text-align: center;
line-height: 60px;
position: absolute;
right: 0;
top: 80px;
color: #fff;
font-size: 32px;
}写回答
1回答
-
同学你好，有一处问题可以优化：
一级菜单，高度有点超出了：
原因是默认情况下，边框会增大li的高度。建议添加box-sizing: border-box属性，让边框不把元素height属性撑开：
问题解答如下：
transform属性对行内元素无效。由于箭头是span标签，属于行内元素，所以没有动画效果。建议将其转成块级元素：
或者将position: relative;定位换成position: absolute;定位，从而改变span行内元素的性质，让其对transform生效。
祝学习愉快！
1
相似问题