老师，大banner里按钮之前还显示，现在不知道为啥不显示了，烦请老师帮忙解决
相关代码：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">
<body>
<header class="site-head">`
<div class="top-bar">
<div class="center-wrap">
<nav class="shortcut-links">
<ul>
<li>
<a href="">目的地</a>
</li>
<li>
<a href="">锦囊</a>
</li>
<li class="have-menu">
<a href="">社区</a>
<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="topbar-r">
<a href="" class="iconfont"></a>
<span style="color:white;">|</span>
<a href="" class="iconfont"></a>
<a href="" class="iconfont"></a>
<a href="" class="iconfont"></a>
<a href="" class="login">登录</a>
<a href="" class="register">注册</a>
</div>
</div>
</div>
<nav class="main-nav">
<div class="center-wrap">
<ul>
<li class="have-menu">
<a href="">机酒自由行</a>
</li>
<li>
<a href="">优惠机票</a>
</li>
<li class="have-menu">
<a href="">跟团游</a>
</li>
<li>
<a href="">酒店</a>
</li>
<li class="have-menu">
<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>
</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" name="" id="" placeholder="查询目的地/酒店/机票攻略">
<button class="iconfont"></button>
</div>
</div>
</div>
</header>
<section class="banner">
<img src="images/banner1.jpg" alt="">
<div class="center-wrap">
<!-- <img class="leftbtn" src="/images/icons.png" alt="">css精灵可不是这样用的阿 -->
<a class="leftbtn" href=""></a>
<a class="rightbtn" href=""></a>
<div 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="eu">
<dl>
<dt>澳新 中东非</dt>
<dd>
<em>澳大利亚</em>
<em>新西兰</em>
<em>迪拜</em>
</dd>
</dl>
</li>
</ul>
<div class="menus-box">
<div class="menu" data-t="hot">
<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" data-t="hk">
<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" data-t="jp">
<dl>
<dt>日本</dt>
<dd>
<a href="#">东京</a>
<a href="#">大阪</a>
<a href="#">冲绳</a>
<a href="#">北海道</a>
<a href="#">札幌</a>
<a href="#">京都</a>
<a href="#">名古屋</a>
<a href="#">福冈</a>
<a href="#">长崎</a>
<a href="#">鹿儿岛</a>
<a href="#">JR</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" data-t="as">
<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" data-t="eu">
<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" data-t="au">
<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>
</div>
</div>
</section>
<section class="hot-ads clearfix">
<!-- 给它设置浮动而不是给ul,(center-wrap只用来设置居中)，因为这里hot-ads就不需要设置高度就可以光明正大地被踹了，需要学习用到工作中的 -->
<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">
<h2>新鲜甩尾</h2>
<em>每日不可不看的好货</em>
</div>
<!-- 如果这里ul设置清除浮动了，那么两行第一个图片的阴影部分就会被遮盖，没关系xxsw设置了高度 -->
<ul>
<li>
<a href="">
<div class="picbox">
<!-- 图片最好用div包裹起来哟 -->
<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上加一个current类用于做边框的样式（加到a标签上面还得将a标签转换成块设置border啦，margin啦） -->
<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>
<li><a href="">热卖签证</a></li>
</ul>
</nav>
</div>
<div class="bd">
<ul>
<!-- 还是要给li分类的 -->
<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">
<!-- 这里和big-grid的布局不同之处 -->
<a href="">
<div class="picbox">
<img src="images/jjzyx2.png" alt="">
<span class="tag">跟团游</span>
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/jjzyx3.png" alt="">
<span class="tag">机票</span>
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/jjzyx4.png" alt="">
<span class="tag">机票</span>
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/jjzyx5.png" alt="">
<span class="tag">机票</span>
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/jjzyx6.png" alt="">
<span class="tag">机票</span>
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<!-- 比如说，这里用到这样的语义，自己也是没有想到的 -->
<li class="more-grid">
<a href="">
<p>查看更多</p>
<p>机酒自由行产品</p>
<span class="iconfont"></span>
<ul>
<li>机票</li>
<li>酒店</li>
<li>机+酒</li>
<li>邮轮</li>
</ul>
</a>
</li>
</ul>
</div>
</div>
</section>
<section class="ddwl content-part common-style">
<!-- 老师是写一点标签就设置一些对应的样式 -->
<div class="center-wrap">
<div class="hd clearfix">
<h2>当地玩乐</h2>
<em>像当地人一样，体验本土的吃喝玩乐</em>
<nav>
<!-- 加一个nav标签更详细一些，语义更加完整 -->
<ul>
<!-- 这里当然就不用再把a标签单独一行了呀 -->
<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>
<!-- bd中最符合的语义当然不是浮动，该是列了呀 -->
<div class="bd">
<div class="col">
<div class="biggrid">
<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"></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">
<h2>特色当地体验</h2>
<ul class="clearfix">
<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.8</span>
<span class="comment">(92833评价)2334.69k 人参加过</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">
<!-- 最好加上proname哦 -->
<p class="proname">
英国巨石阵 & 温莎城堡 & 巴斯罗马浴场一日游
</p>
<p>
<span class="score">★ 4.8</span>
<span class="comment">(92833评价)2334.69k 人参加过</span>
</p>
</div>
</a>
</li>
</ul>
</div>
</section>
<section class="zsj 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">
<a href="">
<img src="images/zsj1.png" alt="">
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj2.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj3.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj4.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj5.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/zsj6.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…
</div>
</a>
</li>
<li class="more-grid">
<a href="">
<p>查看更多</p>
<p>深度旅行产品</p>
<span class="iconfont"></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>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/gt2.png" alt="">
</div>
<div class="wordbox">
成都/西安直飞清迈+拜县6-7天半自助游（2-8人纯玩私家小包团+萌妹…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/gt3.png" alt="">
</div>
<div class="wordbox">
[一价全含] 北京直飞日本东京+大阪+名古屋+京都6/7天深度游（全程…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/gt4.png" alt="">
</div>
<div class="wordbox">
天津直飞芽庄5-7天半自助游（优质越南/越捷航空，12天自由行/赠送京…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/gt5.png" alt="">
</div>
<div class="wordbox">
广州直飞美娜多5-6半自助游（班达尼莫公园+布纳肯浮潜+1-2天自由活…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<img src="images/gt6.png" alt="">
</div>
<div class="wordbox">
(免签入境）深圳直飞伊朗德黑兰8天5晚半自助游（含国际往返机票+伊…
</div>
</a>
</li>
<li class="more-grid">
<a href="">
<p>查看更多</p>
<p>精品跟团/半自助游</p>
<span class="iconfont"></span>
<ul>
<li>跟团游</li>
<li>半自助游</li>
</ul>
</a>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>
相关代码：css部分
/* 页面头部的开发 */
.site-head{
overflow: hidden;
/* 防止缩放时出现问题 */
min-width: 1152px;
}
/* 之 top-bar */
.site-head .top-bar{
height: 32px;
background-color: #383D42;
/* 利用继承属性可以很自然地让top-bar中所有带文本属性的子元素垂直居中，需要学习 */
line-height: 32px;
}
.site-head .top-bar a{
/* 比下面一个一个设置要好很多,超级链接不从父亲那里继承color，*/
color: white;
}
/* top-bar里左边的快捷链接 */
.site-head .top-bar .shortcut-links{
/* center-wrap默认不写了，因为很多都有版心，增强代码阅读简单明了性 */
float: left;
}
.site-head .top-bar .shortcut-links>ul>li{
float: left;
/* width: 36px;
height: 18px; 这么设置是错误的，导航条shortcut-links的每一项不是一样长哒，需要认真细心*/
margin-right: 18px;
/* 但是可以继承字体 */
font-size: 12px;
}
/* .site-head .top-bar .shortcut-links>ul>li a{
color: white;
} */
/* 带箭头的导航项，这里不采用精灵，而是用盒子 */
.site-head .top-bar .shortcut-links>ul>li.have-menu{
padding-right: 12px;
position: relative;
}
.site-head .top-bar .shortcut-links>ul>li.have-menu .arrow{
position: absolute;
width: 12px;
height: 12px;
top: 50%;
right: 0;
margin-top: -6px;
/* background-color: orange; */
/* transition的两项时间都要带时间单位 */
transition: transform .5s ease 0s;
}
/* 这个是用三个盒子做的箭头效果，所以没用伪元素 */
.site-head .top-bar .shortcut-links>ul>li.have-menu:hover .arrow{
transform: rotate(180deg);
}
.site-head .top-bar .shortcut-links>ul>li.have-menu .arrow b{
position: absolute;
width: 5.5px;
height: 5.5px;
top: 3.5px;
right: 3px;
background-color: white;
transform: rotate(45deg);
}
.site-head .top-bar .shortcut-links>ul>li.have-menu .arrow i{
position: absolute;
position: absolute;
width: 5.5px;
height: 5.5px;
top: 2px;
right: 3px;
background-color: #383D42;
transform: rotate(45deg);
}
.site-head .top-bar .shortcut-links>ul>li.have-menu .menu{
position: absolute;
top: 30px;
left: 0;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
z-index: 9999;
display: none;
padding: 10px;
}
.site-head .top-bar .shortcut-links > ul > li.have-menu .sqmenu {
width: 110px;
}
.site-head .top-bar .shortcut-links > ul > li.have-menu .scmenu {
width: 80px;
}
.site-head .top-bar .shortcut-links > ul > li.have-menu .jdmsmenu {
width: 80px;
}
.site-head .top-bar .shortcut-links>ul>li.have-menu:hover .menu{
display: block;
}
/* 当觉得自己的样式写得没问题可是显示效果有问题时，记得检查一遍之一就是类名从最开始检查到末尾
这次就是top-bar写成topbar了 */
.site-head .top-bar .shortcut-links > ul > li.have-menu .menu .menu-list li {
height: 20px;
line-height: 20px;
}
.site-head .top-bar .shortcut-links > ul > li.have-menu .menu .menu-list a{
font-size: 12px;
color: #1C1F21;
line-height: 20px;
}
.site-head .top-bar .shortcut-links > ul > li.have-menu .menu .menu-list a:hover {
color: orange;
}
/* top-bar里右边的登录注册 */
.site-head .top-bar .topbar-r{
float: right;
width: 225px;
}
.site-head .top-bar .topbar-r a, .site-head .top-bar .topbar-r span{
margin-right: 12px;
}
.site-head .top-bar .topbar-r .login,.register{
font-size: 12px;
}
/* 之 main-nav */
.site-head .main-nav{
height: 40px;
background-color: #20BD9A;
}
.site-head .main-nav ul li{
float: left;
margin-right: 18px;
line-height: 40px;
}
.site-head .main-nav ul li a{
color: white;
font-size: 16px;
}
.site-head .main-nav ul li.have-menu{
padding-right: 16px;
position: relative;
}
/* 这个是用一个正方块做的箭头效果，用的是伪元素 */
.site-head .main-nav ul li.have-menu::after{
/* 一定要设置这个，再一次地忘记了哟 */
content: '';
width: 0px;
height: 0px;
position: absolute;
right: -2px;
top: 17px;
border: 6.5px solid transparent;
/* border-top: white; 一定要写成border-top-color*/
border-top-color: white;
/* 绕重心点旋转，所以把下边框去掉 */
border-bottom: none;
/* background-color: orange; */
transition: transform .4s ease 0s;
}
/* 注意，还是设置li上的hover吧 */
.site-head .main-nav ul li.have-menu:hover::after{
transform: rotate(180deg);
}
.site-head .main-nav ul li.have-menu .menu{
position: absolute;
}
/* 之header-con */
/* 写一个大盒子设置一次宽高 */
.site-head .header-con{
height: 36px;
padding: 21px 0;
}
.site-head .header-con h1{
float: left;
font-size: 24px;
font-weight: bold;
line-height: 36px;
color:#20BD9A;
margin-right: 20px;
}
.site-head .header-con .soso-box{
float: left;
width: 405px;
height: 30px;
padding-top: 2.5px;
}
.site-head .header-con .soso-box input{
/* 浮动的原因是消除行内元素input和行内块元素buttion之间的间隙 */
float: left;
/* width是行内可替换元素，所以可以设置宽高 */
width: 361px;
height: 28px;
padding-left: 10px;
font-size: 14px;
border: 1px solid #20BD9A;
/* 有后面的搜索按钮，所以要这样设置哟 */
border-radius: 3px 0 0 3px;
/* 取消外线，外线是文本框特有的东西 */
outline: none;
}
.site-head .header-con .soso-box button{
display: inline-block;
width: 32px;
height: 30px;
background-color: #20BD9A;
border: none;
color: white;
}
/* 页面banner的开发 */
.banner{
position: relative;
}
.banner img{
width: 100%;
min-width: 1152px;
/* 图片可能和盒子底部产生一些缝隙，使用此小技巧，图片就不会产生缝隙了 */
vertical-align: middle;
}
.banner .center-wrap{
height: 100%;
}
/* .banner .center-wrap ul{ */
/* 这个设置的height: 100%可不能省略，如果省略了，直接设置下面ul的100%就没有任何意义了，不是吗 */
.banner .center-wrap .banner-nav{
position: absolute;
width: 1152px;
height: 100%;
top: 0;
left: 50%;
margin-left: -576px;
}
/* 因为后面可能还会有ul下的ul所以要用子选择器写好 */
.banner .banner-nav>ul{
background-color: #1C1F21;
opacity: 0.5;
width: 296px;
height: 100%;
}
/* banner-nav>ul>li下面已经有一个定义列表dl了，如果还要增加几个的话，布局就太乱了，所以，我们这里用一个与ul同级的menu-box,menu-box下又有6个menu,每个menu对应着指针悬浮到li上时的显示，每个menu里有若干个dl */
.banner .banner-nav .menus-box{
display: none;
}
.banner .banner-nav>ul>li{
height: 16.66%;
color: #fff;
/* padding属性的总写 */
padding: 10px 30px 0 40px;
border-bottom: 1px solid #383D42;
/*box-sizing:border-box让height属性是盒子的总高度，用于盒子的高度是百分比书写，但盒子有边框的情况 */
box-sizing: border-box;
/* 每个li右边的小箭头 */
position: relative;
}
/* .banner .banner-nav ul li.hot::before{
position: absolute;
background: url(../images/icons.png) no-repeat
} */
/* 不用上面的那个，用合写更好*/
.banner .center-wrap .banner-nav>ul>li::before{
content: '';
position: absolute;
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: -7px;
left: 11px;
}
.banner .center-wrap .banner-nav>ul>li.au::before {
width: 18px;
height: 17px;
background-position: -28px -305px;
margin-top: -8.5px;
left: 12px;
}
.banner .banner-nav>ul>li dl dt{
font-size: 18px;
line-height: 26px;
}
.banner .banner-nav>ul>li dl dd{
font-size: 14px;
line-height: 22px;
}
/* css精灵设置小图标,相对于center-wrap定位吧,比下面注释的那个方案从页面结构方面来讲更加合理一些 */
/* .banner .banner-nav ul::before{
position: absolute;
left: auto;
} */
.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.8;
}
/* 主体内容热门新闻部分的开发 */
.hot-ads{
padding: 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{
height: 738px;
background-color: #f7f7f7;
padding-top: 40px;
}
/* 自己差点忽略了这里，h2“新鲜甩尾”和em“每日不可不看的好货”是并排的，一定要使用浮动 */
/* 老师强调过，做任何网页之前，要对其进行理论层面的分析，然后再做，是的，自己经验还不足的时候，拿到一定要先分析，在做的过程中也要注重分析和细节的毛病，因为网页出一个小毛病可能就不太好看了，这是目前学到css时候的感悟 */
.xxsw .hd{
/* 这里，思考思考hd为什么可以踹下面浮动了的ul呢，就如前面基础视频里面的小例子，现在自己的理论层面的理解是这样的，加上clearfix样式清除本身的浮动后，他就可以踹任意一个有有高度的盒子了，那么它实际上踹的是它的变成块元素形成BFC(清除了浮动)有内容的伪元素，并且这个伪元素清除了浮动，那么后面浮动的元素对于它来讲也没有了影响 */
margin-bottom: 32px;
}
.content-part h2{
float: left;
font-size: 36px;
font-weight: bold;
color: #1c1f21;
line-height: 54px;
}
.content-part em{
position: relative;
font-size: 14px;
line-height: 18px;
color: #1C1F21;
top: 24px;
left: 20px;
}
/* 这里不需要给ul设置宽高，想想为什么吧 */
.xxsw ul li{
float: left;
width: 264px;
height: 270px;
background-color: #fff;
margin-right: 32px;
margin-bottom: 32px;
}
.xxsw ul li:nth-child(4n){
margin-right: 0;
}
.xxsw ul li .wordbox{
padding: 18px;
font-size: 14px;
color:#1c1f21;
line-height: 22px;
}
.xxsw ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
}
/* 主体内容机酒自由行部分的开发 */
.jjzyx{
height: 738px;
padding-top: 40px;
}
/* 上半部分 */
.jjzyx .hd{
margin-bottom: 32px;
}
.content-part .hd em{
position: relative;
top: 20px;
left: 10px;
color: #1C1F21;
float: left;
}
.content-part .hd nav{
width: 564px;
float: right;
padding-top: 18px;
}
.content-part .hd nav ul li{
float: left;
font-size: 14px;
line-height: 22px;
margin-right: 14px;
}
.content-part .hd nav ul li:last-child{
margin-right: 0;
}
.content-part .hd nav ul li a{
color: rgba(0, 0, 0, 0.85);
}
.content-part .hd nav ul li.current{
border-bottom: 2px solid #20BD9A;
}
.content-part .hd nav ul li.current a{
color: #20BD9A;
}
.common-style .bd>ul>li{
float: left;
margin-right: 32px;
margin-bottom: 32px;
}
.common-style .bd>ul>li:nth-child(3),.common-style .bd ul li:last-child{
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;
bottom: 0;
background: rgba(0, 0, 0, .2);
font-size: 14px;
line-height: 22px;
color: #fff;
padding: 29px 26px;
box-sizing: border-box;
}
.common-style .bd>ul>li.big-grid .tag{
position: absolute;
background: rgba(0, 0, 0, .2);
width: 74px;
height: 40px;
left: 0;
bottom: 103px;
color: #fff;
line-height: 40px;
text-align: center;
}
.common-style .bd>ul>li.pro-grid{
width: 264px;
height: 270px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.common-style .bd>ul>li.pro-grid .picbox{
height: 184px;
position: relative;
/* 为什么要加overflow:hidden呢 */
overflow: hidden;
}
.common-style .bd>ul>li.pro-grid .picbox .tag{
position: absolute;
width: 74px;
height: 40px;
/* left: 0;是一定要写的呦 */
left: 0;
bottom: 0px;
color: #fff;
background-color: rgba(0, 0, 0, .2);
line-height: 40px;
text-align: center;
}
.common-style .bd>ul>li.pro-grid .wordbox{
font-size: 14px;
color: #1c1f21;
line-height: 22px;
padding: 21px 14px;
background-color: #fff;
box-sizing: border-box;
}
.common-style .bd .more-grid{
position: relative;
width: 264px;
height: 270px;
/* 这一条记忆一下哦 */
background-image: linear-gradient(180deg,#34e3bc 0%,#15af7a 98%);
}
.common-style .bd .more-grid a{
/* 要将a标签转换为块哦 */
display: block;
height: 270px;
padding-top: 46px;
box-sizing: border-box;
}
.common-style .bd .more-grid p {
text-align: center;
color: white;
line-height: 24px;
font-size: 15px;
}
.common-style .bd .more-grid .iconfont {
position: absolute;
font-size: 48px;
color: white;
width: 48px;
height: 48px;
left: 50%;
top: 118px;
margin-left: -24px;
}
.common-style .bd .more-grid ul {
margin-top: 112px;
padding-left: 40px;
}
.common-style .bd .more-grid ul li {
color: white;
float: left;
border-right: 1px solid white;
padding: 0 9px;
height: 14px;
line-height: 14px;
font-size: 14px;
}
.common-style .bd .more-grid ul li:last-child {
border-right: none;
}
/* 主体内容当地玩乐部分的开发 */
.ddwl{
background-color: #f7f7f7;
height: 586px;
padding-top: 40px;
}
.ddwl .hd nav{
width: 336px;
}
.ddwl .bd{
padding-top: 32px;
}
.ddwl .bd .col{
/* padding-top: 32px; */
/* 别忘了设置浮动哦 */
float: left;
width: 364px;
height: 480px;
margin-right: 30px;
}
.ddwl .bd .col:last-child{
margin-right: 0px;
}
.ddwl .bd .col .biggrid{
/* overflow: hidden; */
width: 364px;
height: 270px;
position: relative;
margin-bottom: 30px;
}
.ddwl .bd .col .biggrid .info{
position: absolute;
height: 104px;
bottom: 0px;
left: 0px;
padding: 21px 17px 0;
/* 要设置这个哦，要不然盒子高就变成了125px */
box-sizing: border-box;
background-color: rgba(0,0,0,.3);
}
.ddwl .bd .col .biggrid .info p{
font-size: 14px;
line-height: 22px;
color: #fff;
}
.ddwl .bd .col .biggrid .info .proname{
margin-bottom: 5px;
}
.ddwl .bd .col .biggrid .info .bottom .tag{
float: left;
}
.ddwl .bd .col .biggrid .info .bottom .price{
float: right;
}
.ddwl .bd .col .biggrid .info .bottom .price strong{
color: #36dfba;
}
.ddwl .bd .col .grid{
width: 364px;
height: 120px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
margin-bottom: 30px;
}
.ddwl .bd .col .grid .picbox{
float: left;
width: 120px;
height: 120px;
}
.ddwl .bd .col .grid .wordbox{
float: left;
padding: 27px 18px;
background-color: #fff;
font-size: 14px;
line-height: 22px;
width: 244px;
height: 120px;
box-sizing: border-box;
color: #000;
}
.ddwl .bd .col .more-grid{
width: 364px;
background-image: linear-gradient(180deg,#ff6374 1%,#ff7368 98%);
}
.ddwl .bd .col .more-grid ul{
padding-left: 26px;
}
/* 主体内容特色当地体验部分的开发 */
.tsddty{
height: 456px;
}
.tsddty .center-wrap{
padding-top: 40px;
}
.tsddty h2{
float: none;
text-align: center;
margin-bottom: 32px;
}
.tsddty ul li{
float: left;
width: 264px;
height: 290px;
margin-right: 32px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
.tsddty ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.tsddty ul li:last-child{
margin-right: 0;
}
.tsddty ul li .wordbox{
height: 106px;
background-color: #fff;
}
.tsddty ul li .wordbox .proname{
padding: 16px 11px 0;
font-size: 16px;
height: 58px;
font-weight: bold;
line-height: 24px;
}
.tsddty ul li .wordbox .score{
padding-left: 11px;
font-size: 13px;
color: #fa6400;
}
.tsddty ul li .wordbox .comment{
font-size: 13px;
}
/* 主体部分最世界·深度旅行的开发 */
.zsj{
height: 738px;
background-color: #f7f7f7;
}
.zsj .hd{
padding: 40px 0 32px 0;
}
.zsj .hd nav{
width: 82px;
}
.zsj .bd .more-grid{
background-image: linear-gradient(180deg, #BD5EE8 0%, #832ABB 98%);
}
.gtbzzy{
height: 738px;
}
.gtbzzy .hd{
padding: 40px 0 32px 0;
}
.gtbzzy .hd nav{
width: 152px;
}
.gtbzzy .bd .more-grid a{
background-image: linear-gradient(180deg, #41D8E9 0%, #3685EA 98%);
}
.gtbzzy .bd .more-grid ul{
padding-left: 64px;
}
9
收起
正在回答
1回答
同学你好，解答如下：
左右按钮所在的父元素.center-wrap没有设置定位，而父元素center-wrap的父元素.banner设置了定位，所以按钮会相对于.banner定位。以左按钮为例，按钮的left值是负的：
此时按钮处于屏幕可视区外面，所以看不到。给按钮设置left为正值就能看到了：
此处，按钮应该相对于自己的父元素.center-wrap定位（left: -38px;是相对于.center-wrap的），因此需要给center-wrap设置定位属性，如下：
另外，html结构缺少闭合的head标签，需要补上：
祝学习愉快！
相似问题
大作业中做到这里，banner部分图片不显示
55
0
5
不显示不知道什么问题
0
0
5
为什么按照老师方法控制台显示index？
0
0
3
页面不显示，急！！请老师解决！！
1
0
6
请老师检查，在按钮处存在疑问
10
1
3
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星