体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

慕云游项目页脚part1的部分 不能正确显示

来源：4-2 页面底部开发（2）

lura827

2023-09-20 13:54:42

老师您好，慕云游项目页脚part1的部分 不能正确显示。

跟着视频对比好几次，还是没找到问题所在，求助老师帮忙查看一下。


相关截图：

https://img.mukewang.com/climg/650a88c809a94ab228160430.jpg


相关html代码：

<!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" content="机票，酒店，旅游攻略，签证，出国，自由行">
<meta name="Description" content="慕云游商城游10多年旅游行业经验，为您提供全方位旅游服务">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header class="site-head">
<div class="topbar">
<div class="center-wrap">
<!-- 快捷超级链接 shortcur-links -->
<nav class="shortcut-links">
<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 class="menu-list">
<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="menu scmenu">
<ul class="menu-list">
<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="menu jdmsmenu">
<ul class="menu-list">
<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="nav-r">
<a href="" class="iconfont">&#xe623;</a>
<span>|</span>
<a href="" class="iconfont">&#xe6a1;</a>
<a href="" class="iconfont">&#xf01af;</a>
<a href="" class="iconfont">&#xf0106;</a>
<a href="">登录</a>
<a href="">注册</a>
</div>
</div>
</div>
<nav class="main-nav">
<div class="center-wrap">
<ul>
<li class="have-menu">
<a href="">机酒自由行</a>
<div class="menu jjzyxmenu">
<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">
<a href="">跟团游</a>
<div class="menu gtymenu">
<dl>
<dt>全部</dt>
<dd>
<a href="#">跟团游</a>
<a href="#">半自助游</a>
</dd>
</dl>
</div>
</li>
<li>
<a href="">酒店</a>
</li>
<li class="have-menu">
<a href="">当地玩乐</a>
<div class="menu ddwlmenu">
<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">
<a href="">深度旅游</a>
<div class="menu sdlymenu">
<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>
</div>
</nav>
<!-- 页面顶部主要内容 -->
<div class="header-con">
<div class="center-wrap">
<h1>慕云游商城</h1>
<div class="soso-box">
<input type="text" placeholder="查询目的地/酒店/机票攻略">
<a href="" class="btn iconfont">&#xe623;</a>
</div>
</div>
</div>
</header>

<!-- banner -->
<section class="banner">
<img src="images/banner1.jpg" alt="">
<div class="center-wrap">
<a href="" class="leftbtn"></a>
<a href="" class="rightbtn"></a>
<nav class="banner-nav">
<ul>
<li class="hot">
<dl>
<dt>热门出发地</dt>
<dd>
<em>北京</em> 
<em>上海</em> 
<em>广深</em>
<em>西南</em>
<em>国内其他</em>
</dd>
</dl>
</li>
<li class="hk">
<dl>
<dt>港澳台 国内</dt>
<dd>
<em>香港</em>
<em>澳门</em>
<em>台湾</em>
<em>国内其他</em>
</dd>
</dl>
</li>
<li class="jp">
<dl>
<dt>日本 韩国</dt>
<dd>
<em>东京</em>
<em>大阪</em>
<em>冲绳</em>
<em>北海道</em>
<em>福冈</em>
</dd>
</dl>
</li>
<li class="as">
<dl>
<dt>东南亚南亚</dt>
<dd>
<em>泰国</em>
<em>新加坡</em>
<em>印尼</em>
<em>马来西亚</em>
<em>越南</em>
</dd>
</dl>
</li>
<li class="eu">
<dl>
<dt>欧洲 美洲</dt>
<dd>
<em>英国</em>
<em>法国</em>
<em>美国</em>
<em>加拿大</em>
</dd>
</dl>
</li>
<li class="au">
<dl>
<dt>澳新 中东非</dt>
<dd>
<em>澳大利亚</em>
<em>新西兰</em>
<em>迪拜</em>
</dd>
</dl>
</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="">澳门豪华自助</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="">澳门豪华自助</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="">JR</a>
<a href="">京都</a>
<a href="">名古屋</a>
<a href="">福冈</a>
<a href="">长崎</a>
<a href="">鹿儿岛</a>
<a href="">Pass</a>
<a href="">米其林餐厅</a>
<a href="">东京迪士尼</a>
<a href="">大阪环球影城</a>
<a href="">冲绳一日游</a>
<a href="">City</a>
<a href="">Walk</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="">沙巴</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>
<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>
</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>
</dd>
</dl>
</div>
</div>
</nav>
</div>
</section>

<!-- 热门广告 -->
<section class="hot-ads">
<div class="center-wrap clearfix">
<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">
<h2>新鲜甩尾</h2>
<em>每日不可不看的好货</em>
</div>
<ul>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw1.png" alt="">
</div>
<div class="wordbox">
北京直飞马尔代夫6-7天往返含税机票（首都航空/售完为止）…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw2.png" alt="">
</div>
<div class="wordbox">
[甩尾狂欢] 北京/天津直飞日本东京/大阪/冲绳/札幌/福冈4-7天往返含…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw3.png" alt="">
</div>
<div class="wordbox">
[拒签全退][全国25城联运] 北京往返格鲁吉亚+阿塞拜疆7-30天自由行…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw4.png" alt="">
</div>
<div class="wordbox">
[樱花季] 北京直飞东京/大阪/名古屋/冲绳/札幌/福冈/仙台2-30天往返
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw5.png" alt="">
</div>
<div class="wordbox">
[品质小团/快速确认] 新西兰福克斯冰川直升机观光+冰川徒步（提供…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw6.png" alt="">
</div>
<div class="wordbox">
[北欧破冰船] 芬兰+瑞典极地探险号破冰船活动+冰上漂浮+瑞典小…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw7.png" alt="">
</div>
<div class="wordbox">
[指定班期特惠][全程中文伴游] 摩洛哥全景深度10日游（卡萨进出…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw8.png" alt="">
</div>
<div class="wordbox">
马来西亚天空之镜+河口赏鹰+夜游萤火虫+寻找蓝眼泪（马来西亚瓜拉雪…
</div>
</a>
</li>
</ul>
</div>
</section>

<!-- 机酒自由行 -->
<section class="jjzyx content-part common-style">
<div class="center-wrap">
<div class="hd clearfix">
<h2>机酒自由行</h2>
<em>挑选全球机票、酒店、邮轮等旅行产品</em>
<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">
<ul>
<li class="big-grid">
<a href="">
<img src="images/jjzyx1.png" alt="">
</a>
<span class="tag">机票</span>
<div class="info">
<p>[樱花季]天津直飞东京/大阪/名古屋/冲绳/札幌2-30天往返</p>
<p>含税机票【甩尾/多团期】</p>
</div>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<span class="tag">跟团游</span>
<img src="images/jjzyx2.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<span class="tag">机票</span>
<img src="images/jjzyx3.png" alt="">
</div>
<div class="wordbox">
北京/天津直飞日本东京/大阪/东阪/福冈/名古屋冲绳/北海道4-7天往返…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<span class="tag">机票</span>
<img src="images/jjzyx4.png" alt="">
</div>
<div class="wordbox">
[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<span class="tag">机票</span>
<img src="images/jjzyx5.png" alt="">
</div>
<div class="wordbox">
杭州/上海/宁波/义乌直飞越南芽庄/岘港4-6天往返含税机票（20KG行…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<span class="tag">机票</span>
<img src="images/jjzyx6.png" alt="">
</div>
<div class="wordbox">
[赠自由行礼包] 上海/杭州/南京/合肥/宁波/徐州直飞日本东京/大阪…
</div>
</a>
</li>
<li class="more-grid">
<a href="">
<p>查看更多</p>
<p>机酒自由行产品</p>  
<span class="iconfont">&#xe602;</span>
<ul>
<li>机票</li>
<li>酒店</li>
<li>机+酒</li>
<li>游轮</li>
</ul>
</a>
</li>
</ul>
</div>
</div>
</section>

<!-- 当地玩乐 -->
<section class="ddwl content-part">
<div class="center-wrap">
<div class="hd clearfix">
<h2>当地玩乐</h2>
<em>像当地人一样，体验本土的吃喝玩乐</em>
<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">
<div class="bigpicbox">
<img src="images/ddwl1.png" alt="">
<div class="info">
<p class="proname">
[亲子佳选]泰国清迈夜间动物园/Night Safari（可选接送；导游；长颈鹿餐厅）
</p>
<div class="bottom clearfix">
<p class="tag">城市玩乐</p>
<p class="price"><strong>199</strong>元起</p>
</div>
</div>
</div>
<div class="grid">
<a href="">
<div class="picbox">
<img src="images/ddwl2.png" alt="">
</div>
<div class="wordbox">
[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…
</div>
</a>
</div>
</div>
<div class="col">
<div class="grid">
<a href="">
<div class="picbox">
<img src="images/ddwl3.png" alt="">
</div>
<div class="wordbox">
[网红新选] 泰国清迈黑白蓝庙一日游清莱黑庙 白庙 蓝庙 温泉驿站中文导游+酒店接送+餐赠小…
</div>
</a>
</div>
<div class="grid">
<a href="">
<div class="picbox">
<img src="images/ddwl4.png" alt="">
</div>
<div class="wordbox">
[全岛接送+中文导游] 泰国普吉岛+皇帝岛+珊瑚岛一日游双体帆船海钓 [帆船晚会+浮潜]…
</div>
</a>
</div>
<div class="grid">
<a href="">
<div class="picbox">
<img src="images/ddwl5.png" alt="">
</div>
<div class="wordbox">
享行之旅|泰国苏梅岛一日游 越野车丛林环岛之旅 骑大象纳蒙瀑布
</div>
</a>
</div>
</div>
<div class="col">
<div class="grid">
<a href="">
<div class="picbox">
<img src="images/ddwl6.png" alt="">
</div>
<div class="wordbox">
[可接急单] 泰国普吉岛西蒙Simon人妖秀门票VIP专座近距离与人妖互动合影…
</div>
</a>
</div>
<div class="more-grid">
<a href="">
<p>查看更多</p>
<p>机酒自由行产品</p>  
<span class="iconfont">&#xe602;</span>
<ul>
<li>WiFi/电话卡</li>
<li>交通票券 </li>
<li>景点门票</li>
<li>特色体验</li>
</ul>
</a>
</div>
</div>
</div>
</div>
</section>

<!-- 特色当地体验 -->
<section class="tsddty content-part">
<div class="center-wrap">
<div class="hd">
<h2>特色当地体验</h2>
</div>
<div class="bd">
<ul>
<li>
<a href="">
<div class="picbox">
<img src="images/tsddty1.png" alt="">
</div>
<div class="wordbox">
<p class="proname">
香港迪士尼乐园门票(一日 / 两日) - 无需换票扫码入园）
</p>
<p>
<span class="score">★ 4.8</span>
<span class="comment">（92833评价)2334.69k 人参加过</span>
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/tsddty2.png" alt="">
</div>
<div class="wordbox">
<p class="proname">
罗马金宫剧场人妖秀
</p>
<p>
<span class="score">★ 4.6</span>
<span class="comment">（440条评价)900K+ 人参加过</span>
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/tsddty3.png" alt="">
</div>
<div class="wordbox">
<p class="proname">
京都和服体验 - 梦馆
</p>
<p>
<span class="score">★ 4.8</span>
<span class="comment">（92833评价)2334.69k 人参加过</span>
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/tsddty4.png" alt="">
</div>
<div class="wordbox">
<p class="proname">
英国巨石阵 & 温莎城堡 & 巴斯罗马浴场一日游
</p>
<p>
<span class="score">★ 4.7</span>
<span class="comment">（2,104条评价)20K+ 人参加过</span>
</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>

<!-- 最世界·深度旅行 -->
<section class="zsjsdlx content-part common-style">
<div class="center-wrap">
<div class="hd clearfix">
<h2>最世界·深度旅行</h2>
<em>摆脱千篇一律的旅行，探索属于自己的世界</em>
<nav>
<ul>
<li class="current"><a href="">城市CityWalk</a></li>
</ul>
</nav>
</div>
<div class="bd">
<ul>
<li class="big-grid havehover">
<a href="">
<div class="mask"></div>
<div class="circle">
<p>城市</p>
<p>Citywalk</p>
</div>
<div class="word">
【City Walk】大阪浪花の城——美食、动漫和不为人知的大阪人辛秘生活
</div>
<img src="images/yh.png" alt="">
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj2.png" alt="">
</div>
<div class="wordbox">
[City Walk] 京都伏见稻荷大社日本清酒厂巡礼半日游——赏千本鸟居…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj3.png" alt="">
</div>
<div class="wordbox">
[City Walk] 京都好物—京都达人带你探店、美物、饮茶、艺术、日杂…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj4.png" alt="">
</div>
<div class="wordbox">
[Citywalk] 一日游禅意京都——千年古都的维新之路…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj5.png" alt="">
</div>
<div class="wordbox">
[City Walk] 日本桥— 穿街走巷看东京，感受大城市的市井人情…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj6.png" alt="">
</div>
<div class="wordbox">
[Citywalk] 将军之道—京都绝景之旅(含米其林午餐）…
</div>
</a>
</li>
<li class="more-grid">
<a href="">
<p>查看更多</p>
<p>深度旅行产品</p>  
<span class="iconfont">&#xe602;</span>
<ul>
<li>日游</li>
<li>周末</li>
<li>亲子</li>
<li>长线</li>
</ul>
</a>
</li>
</ul>
</div>
</div>
</section>

<!-- 跟团/半自助游 -->
<section class="gtbzzy content-part common-style">
<div class="center-wrap">
<div class="hd clearfix">
<h2>跟团/半自助游</h2>
<em>旅游需要好的选择，踏实省心</em>
<nav>
<ul>
<li class="current"><a href="">半自助游</a></li>
<li><a href="">城市CityWalk</a></li>
</ul>
</nav>
</div>
<div class="bd">
<ul>
<li class="big-grid havehover">
<a href="">
<div class="mask"></div>
<div class="circle">
<p>半自</p>
<p>助游</p>
</div>
<div class="word">
天津直飞沙巴5-6天半自助游（自由活动+出海两岛游+市区游+多种星级酒店）
</div>
<img src="images/yh.png" alt="">
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/gt2.png" alt="">
</div>
<div class="wordbox">
[City Walk] 京都伏见稻荷大社日本清酒厂巡礼半日游——赏千本鸟居…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/gt3.png" alt="">
</div>
<div class="wordbox">
[City Walk] 京都好物—京都达人带你探店、美物、饮茶、艺术、日杂…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/gt4.png" alt="">
</div>
<div class="wordbox">
[Citywalk] 一日游禅意京都——千年古都的维新之路…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/gt5.png" alt="">
</div>
<div class="wordbox">
[City Walk] 日本桥— 穿街走巷看东京，感受大城市的市井人情…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/gt6.png" alt="">
</div>
<div class="wordbox">
[Citywalk] 将军之道—京都绝景之旅(含米其林午餐）…
</div>
</a>
</li>
<li class="more-grid">
<a href="">
<p>查看更多</p>
<p>深度旅行产品</p>  
<span class="iconfont">&#xe602;</span>
<ul>
<li>日游</li>
<li>周末</li>
<li>亲子</li>
<li>长线</li>
</ul>
</a>
</li>
</ul>
</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="dlbox 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>
<div class="part2">
<div class="center-wrap">
<div class="r1 clearfix">
<h2>慕云游商城</h2>
<p class="slogan">从一张机票、一家酒店的订购，到一次暖心的接机服务、一张轻松融入当地的交通卡让我们带你探索这个世界</p>
</div>
<div class="links 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>
</div>
<div class="copyrights">
&copy; 2020 imooc.com  京ICP备 12003892号-11 京公网安备11010802030151号  <a href="">营业执照</a>
</div>
</div>
</div>
</footer>
</body>
</html>


相关CSS代码：

.site-head{
height: 150px;
min-width: 1152px;
}
.site-head .topbar{
min-width: 1152px;
height: 32px;
background-color: #2a2a2a;
color:white;
line-height: 32px;
}
.site-head .topbar a{
color: white;
}
.site-head .topbar .shortcut-links{
float: left;
}
/* 指定快捷超级链接之后li标签，不影响向下弹出的菜单的li标签 .shortcut-links > ul > li */
.site-head .topbar .shortcut-links > ul > li{
float: left;
margin-right: 18px;
font-size: 14px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu{
padding-right: 12px;
position: relative;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .arrow{
position: absolute;
top: 50%;
margin-top: -6px;
right: 0;
width: 12px;
height: 12px;
transition: transfoem .2s ease 0s;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .arrow:hover{
transform: rotate(180deg);
}
.site-head .topbar .shortcut-links > ul > li.have-menu .arrow b{
position: absolute;
left: 4px;
top: 2px;
width: 6px;
height: 6px;
background-color:white;
transform:rotate(45deg);
}
.site-head .topbar .shortcut-links > ul > li.have-menu .arrow i{
position: absolute;
left: 4px;
top: 0.5px;
width: 6px;
height: 6px;
background-color:#2a2a2a;
transform:rotate(45deg);
}
.site-head .topbar .shortcut-links > ul > li.have-menu .menu{
position: absolute;
top: 30px;
left: 0;
z-index: 9999;
/* 隐藏 */
display: none;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
padding: 10px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .sqmenu{
width: 120px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .scmenu{
width: 80px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu .jdmsmenu{
width: 80px;
}
/* 鼠标碰到have-menu，就让menu出现 */
.site-head .topbar .shortcut-links > ul > li.have-menu:hover .menu{
display: block;
}
.site-head .topbar .shortcut-links > ul > li.have-menu:hover .menu li{
height: 20px;
line-height: 20px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu:hover .menu .menu-list a{
font-size: 12px;
color: #1C1F21;
line-height: 20px;
}
.site-head .topbar .shortcut-links > ul > li.have-menu:hover .menu .menu-list a:hover{
color: orange;
}
.site-head .topbar .nav-r{
float: right;
width: 225px;
}
.site-head .topbar .nav-r a,.site-head .topbar .nav-r span{
margin-right: 9px;
font-size: 15px;
}
.site-head .topbar .nav-r a::last-child{
margin-right: 0;
}
.site-head .main-nav{
min-width: 1152px;
height: 40px;
background-color: #20BD9A;
}
.site-head .main-nav ul li{
float: left;
margin-right: 18px;
}
.site-head .main-nav ul li.have-menu{
padding-right: 16px;
position: relative;
}
.site-head .main-nav ul li a{
line-height: 40px;
color: white;
font-size: 16px;
}
.site-head.main-nav ul li.have-menu::before{
content: '';
position: absolute;
right: 0;
top: 18px;
width: 0px;
height: 0px;
border: 5px solid transparent;
border-top-color: white;
border-bottom: none;
transition: transform .5s ease 0s;
}
.site-head .main-nav ul li.have-menu:hover::before{
transform: rotate(180deg);
}
.site-head .main-nav ul li .menu{
position: absolute;
top: 35px;
left: 0;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
padding: 10px;
display: none;
}
.site-head .main-nav ul li:hover .menu{
display: block;
}
.site-head .main-nav ul li .menu dl dd a:hover{
color: orange;
}
.site-head .main-nav ul li .jjzyxmenu{
width: 150px;
}
.site-head .main-nav ul li .gtymenu{
width: 90px;
}
.site-head .main-nav ul li .ddwlmenu{
width: 190px;
}
.site-head .main-nav ul li .sdlymenu{
width: 160px;
}
.site-head .main-nav .menu dl dt{
font-size: 16px;
}
.site-head .main-nav .menu dl dd a{
color: #1C1F21;
}
.site-head .header-con{
height: 36px;
padding: 21px 0;
}
.site-head .header-con h1{
float: left;
font-size: 24px;
color:#20BD9A ;
line-height: 36px;
font-weight: bold;
}
.site-head .header-con .soso-box{
float: left;
margin-left: 20px;
width: 405px;
padding-top: 2px;
}
.site-head .header-con .soso-box input{
float: left;
width: 361px;
height: 28px;
border:1px solid #20BD9A ;
/* 分别按4个角进行设置 */
border-radius: 4px 0 0 4px;
font-size: 12px;
/* 取消默认的外线（外线是文本框特有的东西）*/
outline: none ;
padding-left: 10px;
}
.site-head .header-con .soso-box .btn{
float: left;
width: 32px;
height: 30px;
background-color:#20BD9A ;
color: white;
text-align: center;
line-height: 30px;
font-size: 18px;
border-radius: 0 4px 4px 0;
}
.banner{
position: relative;
overflow: hidden;
}
.banner img{
width: 100%;
/* 使用min-width，这个属性表示限制最小宽度 */
min-width: 1152px;
/* 图片和盒子底部产生缝隙，此时可以使用以下小技巧 */
vertical-align:middle;
}
.banner .center-wrap{
/* 只要有压盖，第一时间就要想到绝对定位 */
position: absolute;
top: 0;
left: 0;
width: 1152px;
left: 50%;
margin-left: -576px;
/* 这里的100%高度绝对不能省略，因为如果省略了，它的height就是0 */
/* 那么它的子盒子设置16.6%就没有意义了 */
height: 100%;
}
.banner .center-wrap .banner-nav{
/* 注意，这里的100%也非常重要，因为如果省略了，它的height就是0  */
/* 那么它的子盒子设置16.6%就没有意义了  */
height: 100%;
}
.banner .center-wrap .banner-nav>ul {
/* 注意，这里的100%也非常重要，因为如果省略了，它的height就是0  */
/* 那么它的子盒子设置16.6%就没有意义了  */
height: 100%;
}
.banner .center-wrap .banner-nav>ul>li{
height: 16.66%;
width: 296px;
background-color: rgba(0,0,0,0.45);
border-bottom:  1px solid #9e9e9e;
/* box-sizing:boder-box属性的作用就是让height属性是盒子的总高度 */
/* 这种情况：在盒子的高度是百分比写的，但是盒子有边框的时候 */
/* 此时就要让盒子的边框涵盖在height路面，就要使用box-sizing属性 */
box-sizing: border-box;
}
.banner .center-wrap .banner-nav>ul>li:last-child{
border-bottom: none;
}
.banner .center-wrap .leftbtn{
position: absolute;
width: 28px;
height: 44px;
background:url(../images/icons.png)no-repeat -21px -94px;
top: 50%;
left: -38px;
margin-top: -22px;
}
.banner .center-wrap .rightbtn{
position: absolute;
width: 28px;
height: 44px;
background:url(../images/icons.png)no-repeat -21px -29px;
top: 50%;
right: -38px;
margin-top: -22px;
}
.banner .center-wrap .leftbtn:hover,.banner .center-wrap .rightbtn:hover{
/* 透明度 */
opacity: 0.6;
}
.banner .center-wrap .banner-nav>ul>li {
position: relative;
}
.banner .center-wrap .banner-nav>ul>li dl{
position: absolute;
height: 48px;
top: 50%;
left: 42px;
margin-top: -24px;
color: white;
}
.banner .center-wrap .banner-nav>ul>li dl dt{
font-size: 18px;
line-height: 26px;
}
.banner .center-wrap .banner-nav>ul>li dl dd{
font-size: 16px;
line-height: 22px;
}

.banner .center-wrap .banner-nav>ul>li::before{
content: '';
position: absolute;
/* 不能用background属性，大属性css精灵图片的小属性没办法往上添加 */
background-image: url(../images/icons.png);
top: 50%;
left: 10px;
}
.banner .center-wrap .banner-nav>ul>li.hot::before{
width: 22px;
height: 18px;
background-position: -29px -399px;
margin-top: -9px;
}
.banner .center-wrap .banner-nav>ul>li.hk::before{
width: 18px;
height: 21px;
background-position: -28px -217px;
margin-top: -10.5px;
left: 13px;
}
.banner .center-wrap .banner-nav>ul>li.jp::before{
width: 24px;
height: 19px;
background-position: -25px -171px;
margin-top: -9.5px;
}
.banner .center-wrap .banner-nav>ul>li.as::before{
width: 18px;
height: 19px;
background-position: -28px -262px;
margin-top: -9.5px;
left: 12px;
}
.banner .center-wrap .banner-nav>ul>li.eu::before{
width: 20px;
height: 14px;
background-position: -29px -351px;
margin-top: -7x;
left: 11px;
}
.banner .center-wrap .banner-nav>ul>li.au::before{
width: 18px;
height: 17px;
background-position: -28px -305px;
margin-top: -8.5x;
left: 12px;
}
.banner .center-wrap .banner-nav .menus-box .menu{
/* 让menu隐藏 */
display: none;
position: absolute;
left: 296px;
top:0;
width: 356px;
height: 100%;
background-color: rgba(0,0,0,.63);
color:white;
padding: 16px;
/* 加上boxbox-sizing属性之后，height：100% 就是盒子的总高度了 */
/* 就不需要减padding了，因为百分比不能减padding */
box-sizing: border-box;
}
.banner .center-wrap .banner-nav .menus-box .menu.current{
display: block;
}
.banner .center-wrap .banner-nav .menus-box .menu a{
color: white;
}
.banner .center-wrap .banner-nav .menus-box .menu dl{
margin-bottom: 16px;
}
.banner .center-wrap .banner-nav .menus-box .menu dl dt{
line-height: 30px;
font-size: 18px;
}
.banner .center-wrap .banner-nav .menus-box .menu dl dd{
line-height: 25px;
font-size: 15px;
}
.hot-ads{
margin: 32px 0;
}
.hot-ads ul li{
float: left;
width: 264px;
height: 110px;
margin-right: 32px;
}
.hot-ads ul li:last-child{
margin-right: 0;
}
.xxsw{
padding-top: 40px;
height: 698px;
background-color: #F7F7F7;
}
.xxsw .hd{
margin-bottom: 32px;
}
.content-part h2{
font-size: 36px;
font-weight: bold;
color: #1C1F21;
}
.xxsw .hd h2{
float: left;
}
.content-part em{
float: left;
position: relative;
top: 20px;
left: 10px;
color: #1C1F21;
}
.xxsw ul li{
float: left;
width: 264px;
height: 270px;
margin-right: 32px;
background-color: white;
margin-bottom: 32px;
}
.xxsw ul li:nth-child(4n){
margin-right: 0;
}
.xxsw ul li .wordbox{
padding: 15px;
color: #1C1F21;
font-size: 14px;
}
.xxsw ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.common-style{
height: 698px;
padding-top: 40px;
}
.common-style .hd h2{
float: left;
}
.common-style .hd em{
float: left;
}
.content-part .hd nav{
float: right;
width: 546px;
}
.content-part .hd nav ul{
padding-top: 16px;
}
.content-part .hd nav ul li{
float: left;
margin-right: 16px;
font-size: 14pxz;
}
.content-part .hd nav ul li:last-child{
margin-right: 0;
}
.content-part .hd nav ul li a{
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(0,0,0,0.85);
text-align: center;
line-height: 22px;
}
.content-part .hd nav ul li.current{
border-bottom: 4px solid #20BD9A;
padding-bottom: 4px;
}
.content-part .hd nav ul li.current a{
color: #20BD9A;
}
/* 公共的一个特效：鼠标触碰图片，能够有放大效果 */
.content-part img{
transition: transform .4s ease 0s;
}
.content-part img:hover{
transform: scale(1.1);
}
.content-part li{
overflow: hidden;
}
.content-part li .picbox{
height: 184px;
overflow: hidden;
}
.content-part .grid{
overflow: hidden;
}
.common-style .bd{
padding-top: 32px;
}
.common-style .bd>ul>li {
float: left;
margin-right: 32px;
margin-bottom: 32px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
background-color: white;
}
.common-style .bd>ul>li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.common-style .bd>ul>li:nth-child(3),.common-style .bd>ul>li:nth-child(7){
margin-right: 0;
}
.common-style .bd>ul>li.big-grid{
width: 560px;
height: 270px;
position: relative;
}
.common-style .bd>ul>li.big-grid .info{
position: absolute;
width: 560px;
height: 103px;
color: white;
background-color: rgb(0,0,0,.55);
bottom: 0;
left: 0;
padding: 30px 26px;
box-sizing: border-box;
line-height: 26px;
}
.common-style .bd>ul>li .tag{
position: absolute;
width: 74px;
height: 40px;
color: white;
background-color: rgb(0,0,0,.55);
bottom: 103px;
left: 0;
text-align: center;
line-height: 40px;
/* 图片一触碰，就会有transform变形，那么此时会神奇的盖住tag，所以为了防止盖住，我们应该设置z-index属性值 */
z-index: 9999;
}
.common-style .bd>ul>li.pro-grid{
width: 264px;
height: 270px;
}
.common-style .bd>ul>li.pro-grid .picbox{
position: relative;
height: 184px;
}
.common-style .bd>ul>li.pro-grid .picbox .tag{
bottom: 0;
}
.common-style .bd>ul>li.pro-grid .wordbox{
padding: 14px;
font-size: 14px;
color: #1C1F21;
line-height: 24px;
}
.content-part .more-grid{
width: 264px;
height: 270px;
background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);
box-sizing: border-box;
position: relative;
}
.content-part .more-grid a{
display: block;
padding-top: 46px;
height: 270px;
box-sizing: border-box;
}
.content-part .more-grid p{
text-align: center;
color: white;
line-height: 24px;
font-size: 15px;
}
.content-part .more-grid .iconfont{
position: absolute;
font-size: 48px;
color: white;
width: 48px;
height: 48px;
left: 50%;
top: 118px;
margin-left: -24px;
}
/* 鼠标触碰more-grid盒子之后，iconfont进行蹦跳动画 */
.content-part .more-grid:hover .iconfont{
animation: ud .4s ease 0s infinite alternate;
}
@keyframes ud{
from{
transform: translateY(-20px);
}
to{
transform: translateY(20px);
}

}
.content-part .more-grid ul{
margin-top: 112px;
padding-left: 40px;
}
.content-part .more-grid ul li{
color: white;
float: left;
border-right: 1px solid white;
padding: 0 9px;
height: 14px;
line-height: 14px;
font-size: 14px;
}
.content-part .more-grid ul li:last-child{
border-right: none;
}
.ddwl{
padding-top: 40px;
height: 546px;
background-color: #F7F7F7;
}
.ddwl h2{
float: left;
}
.ddwl .hd nav{
width: 349px;
}
.ddwl .bd{
padding-top: 32px;
}
.ddwl .bd .col{
float: left;
width: 364px;
height: 480px;
margin-right: 30px;
}
.ddwl .bd .col:last-child{
margin-right: 0;
}
.ddwl .bd .bigpicbox{
width: 364px;
height: 270px;
position: relative;
margin-bottom: 30px;
overflow: hidden;
}
.ddwl .bd .bigpicbox .info{
position: absolute;
width: 364px;
height: 104px;
background-color: rgba(0,0,0,.53);
bottom: 0;
left: 0;
padding: 21px 17px 0;
box-sizing: border-box;
color: white;
font-size: 14px;
}
.ddwl .bd .bigpicbox .info .bottom{
padding-top: 6px;
}
.ddwl .bd .bigpicbox .info .bottom .tag{
float: left;
}
.ddwl .bd .bigpicbox .info .bottom .price{
float: right;
}
.ddwl .bd .bigpicbox .info .bottom .price strong{
color: #36DFBA;;
}
.ddwl .bd .grid{
width: 364px;
height: 120px;
background-color: white;
margin-bottom: 30px;
}
.ddwl .bd .grid .picbox{
float: left;
width: 120px;
height: 120px;
overflow: hidden;
}
.ddwl .bd .grid .wordbox{
float: left;
width: 244px;
height: 120px;
padding: 26px 18px 0;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
font-size: 14px;
color: #000000;
}
.ddwl .bd .more-grid{
width: 364px;
background-image: linear-gradient(180deg, #FF6374 1%, #FF7368 98%);
}
.ddwl .bd .more-grid ul{
padding-left: 19px;
}
.ddwl .bd .grid:hover, .ddwl .bd .bigpicbox:hover, .ddwl .bd .more-grid:hover{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
}
.tsddty{
height: 456px;
}
.tsddty .center-wrap{
padding-top: 40px;
}
.tsddty .center-wrap h2{
text-align: center;
}
.tsddty .bd{
padding-top: 32px;
}
.tsddty .bd ul li{
float: left;
width: 264px;
height: 290px;
margin-right: 32px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.tsddty .bd ul li:last-child{
margin-right: 0;
}
.tsddty .bd ul li .wordbox{
padding: 16px 11px 0;
}
.tsddty .bd ul li .wordbox .proname{
font-weight: bold;
font-style: 16px;
color: #000000;
height: 48px;
}
.tsddty .bd ul li .wordbox .score{
font-size: 12px;
color: #FA6400;
}
.tsddty .bd ul li .wordbox .comment{
font-size: 12px;
color: #000000;
}
.tsddty .bd ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.zsjsdlx{
height: 738px;
background-color: #F7F7F7;
}
.zsjsdlx .hd em{
float: left;
width: 307px;
}
.zsjsdlx .hd nav{
float: right;
width: 86px;
}
.zsjsdlx .bd .more-grid{
background-image: linear-gradient(180deg, #BD5EE8 0%, #832ABB 98%);
}
.zsjsdlx .bd .more-grid ul{
padding-left: 41px;
}
.gtbzzy .hd nav{
width: 157px;
}
.gtbzzy .bd .more-grid{
background-image: linear-gradient(180deg, #41D8E9 0%, #3685EA 98%);
}
.gtbzzy .bd .more-grid ul{
padding-left: 67px;
}
.big-grid.havehover .mask{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
/* 总透明度，背景颜色图片 字体全部 */
opacity: 0;
transition: opacity .4s ease 0s;
}
.big-grid.havehover:hover .mask{
opacity: 1;
}
.big-grid.havehover .circle{
position: absolute;
top: -106px;
left: 50%;
margin-left: -53px;
width: 106px;
height: 106px;
border: 1px solid white;
border-radius: 50%;
color: white;
box-sizing: border-box;
padding-top: 25px;
font-size: 18px;
transition: top .5s ease 0s;
}
.big-grid.havehover .circle p{
text-align: center;
}
.big-grid.havehover:hover .circle{
top: 62px;
}
.big-grid.havehover .word{
position: absolute;
bottom: -100px;
height: 22px;
left: 10px;
color:white;
transition: bottom .5s ease 0s;
}
.big-grid.havehover:hover .word{
bottom: 30px;
}
footer .part1{
height: 220px;
background-color: #F7F7F7;
}
footer .part1 ul{
padding-top: 36px;
}
footer .part1 ul li{
float: left;
border-right: 1px solid #1C1F21;
padding: 0 30px;
height: 16px;
line-height: 16px;
}
footer .part1 ul li a{
color: #1C1F21;
font-size: 16px;
}
footer .part1 ul li:first-child{
padding-left: 0;
}
footer .part1 ul li:last-child{
border-right: none;
padding-right: 0;
}
footer .part1 .dlbox{
padding-top: 30px;
}
footer .part1 dl{
width: 289px;
float: left;
padding-left: 75px;
margin-right: 30px;
}
footer .part1 dl:last-child{
margin-right: 0;
}
footer .part1 dl dt{
font-weight: bold;
margin-bottom: 10px;
}
footer .part1 dl::before{
content: '';
position: absolute;
width: 60px;
height: 60px;
background-image: url(../images/icons.png);
left: 0;
}
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 .part2{
height: 225px;
background-color: #1C1F21;
}
footer .part2 .r1{
padding-top: 48px;
color: white;
}
footer .part2 .r1 h2{
float: left;
font-size: 46px;
}
footer .part2 .r1 .slogan{
float: left;
width: 532px;
font-size: 14px;
margin-left: 21px;
position: relative;
top: 10px;
}
footer .part2 .links{
padding-top: 30px;
}
footer .part2 .links li{
float: left;
border-right: 1px solid white;
padding: 0 10px;
font-size: 14px;
line-height: 14px;
}
footer .part2 .links li a{
color: white;
}
footer .part2 .links li:first-child{
padding-left: 0;
}
footer .part2 .links li:last-child{
border-right: none;
}
footer .part2 .copyrights{
color: white;
padding-top: 20px;
font-size: 12px;
}
footer .copyrights a{
color: white;
}


写回答

1回答

好帮手慕小李

2023-09-20

已采纳

同学你好，解答如下：

出现这样的情况，主要是上面的模块中有浮动，但模块没有清除浮动所以导致后面的模块受到了影响。尝试如下调整。

https://img.mukewang.com/climg/650a92bf093f916519200933.jpg

祝学习愉快！

0
hura827
hp>好的老师 感谢！

h023-09-22
共1条回复

前端工程师

前端入门如同写字，如果你不知道从哪开始，那就选择前端（含Vue3.x，React17,TS）

20327 学习 · 17877 问题

查看课程

相似问题

麻烦老师帮忙看下设置的宽高在不同的显示器上显示是不是正确的

回答 1

背景图片不显示

回答 1

慕云游项目跟敲效果

回答 1

暮云游压缩包缺少页低的图标02，麻烦发一下群

回答 1

字体图标，“小企鹅”不显示

回答 1

打开慕课网App查看更多内容