clearfix 出现问题了
来源：4-1 页面底部开发（1）
qq_慕前端3554356
2022-11-15 20:25:16
<!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" charset="慕云游商城有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"> <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="meun-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="meun-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="meun-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>|</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> <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="#">WIFL电话卡</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"></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="righbtn"></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="">澳门豪华自助 台北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> </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="">JR Pass</a> <a href="">米其林餐厅</a> <a href="">东京迪士尼</a> <a href="">大版环球影城</a> <a href="">冲绳一日游</a> <a href="">City Walk</a> <a href="">西瓜卡</a> <a href="">京都</a> <a href="">日游</a> <a href="">和服体验</a> <a href="">包车服务</a> <a href="">富士山日游</a> </dd> </dl> </div> <div class="menu"> <dl> <dt>东南亚</dt> <dd> <a href="">巴厘岛</a> <a href="">长滩岛</a> <a href="">马尼拉</a> <a href="">薄荷岛</a> <a href="">美娜多芽庄</a> <a href="">官港</a> <a href="">富国岛</a> <a href="">柬埔寨</a> <a href="">缅甸</a> <a href="">老过</a> <a href="">文彩</a> <a href="">蓝梦岛</a> <a href="">巴厘岛</a> <a href="">网红浮漂下午茶</a> <a href="">珍珠岛游乐园</a> <a href="">富国岛浮潜海钓</a> <a href="">吴哥窟</a> <a href="">西哈努克</a> </dd> </dl> <dl> <dt>秦新马</dt> <dd> <a href="">普吉岛</a> <a href="">清迈</a> <a href="">曼谷</a> <a href="">苏梅岛</a> <a href="">甲米</a> <a href="">芭提雅</a> <a href="">拜县</a> <a href="">新加坡</a> <a href="">马来西亚</a> <a href="">沙巴</a> <a href="">吉隆坡</a> <a href="">皇帝岛</a> <a href="">泰国人妖</a> <a href="">泰国丛林飞跃</a> <a href="">泰国SPA按摩</a> <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> </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> </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> </nav> </div> </section> <!-- 热门广告 --> <section class="hot-ads 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"> <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"> 北京直飞马尔代夫6-7天往返含税机票(首都航空/售完为止)... </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="images/xxsw3.png" alt=""> </div> <div class="wordbox"> 北京直飞马尔代夫6-7天往返含税机票(首都航空/售完为止)... </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="images/xxsw4.png" alt=""> </div> <div class="wordbox"> 北京直飞马尔代夫6-7天往返含税机票(首都航空/售完为止)... </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="images/xxsw5.png" alt=""> </div> <div class="wordbox"> 北京直飞马尔代夫6-7天往返含税机票(首都航空/售完为止)... </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="images/xxsw6.png" alt=""> </div> <div class="wordbox"> 北京直飞马尔代夫6-7天往返含税机票(首都航空/售完为止)... </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="images/xxsw7.png" alt=""> </div> <div class="wordbox"> 北京直飞马尔代夫6-7天往返含税机票(首都航空/售完为止)... </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="images/xxsw8.png" alt=""> </div> <div class="wordbox"> 北京直飞马尔代夫6-7天往返含税机票(首都航空/售完为止)... </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"></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"></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 clearfix"> <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.7</span> <span class="comment">(4,293条评价)50K+ 人参加过</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.5</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"></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"> 成都/西安直飞清迈+拜县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> <!-- 页脚 --> <footer> <div class="part1"> <div class="center-wrap"> <nav> <ul> <li><a href="">机酒自由行</a></li> <li><a href="">当地玩乐</a></li> <li><a href="">优惠机票</a></li> <li><a href="">签证</a></li> <li><a href="">马尔代夫</a></li> <li><a href="">邮轮</a></li> <li><a href="">租车自驾</a></li> <li><a href="">欧洲铁路</a></li> <li><a href="">新鲜甩尾</a></li> <li><a href="">深度旅游</a></li> </ul> </nav> <div class="clearfix"> <dl> <dt>贴心服务</dt> <dd>我们收集慕云游者的真实诉求,找寻特色旅行目的地,让慕云游者放心出行</dd> </dl> <dl> <dt>层层筛选</dt> <dd>对旅游产品供应链严格筛选,资质层层把关</dd> </dl> <dl> <dt>安心陪护</dt> <dd>对慕云游者的购买进行跟踪服务以及质量监控,生效投诉先行赔付,出现问题及时解决</dd> </dl> </div> </div> </div> </footer> </body> </html>
.site-head {
min-width: 1152px;
height: 150px;
}
.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;
}
.site-head .topbar .shortcut-links>ul>li {
float: left;
margin-inline: 18px;
font-size: 12px;
}
.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;
right: 0;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
transition: transform .2s ease 0s;
}
.site-head .topbar .shortcut-links>ul>li.have-menu:hover .arrow {
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: #fff;
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;
padding-top: 10px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(126, 126, 126, 0.2);
padding: 10px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu:hover .sqmenu {
width: 110px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu:hover .scmenu {
width: 80px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu:hover .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 .menu .meun-list li {
height: 20px;
line-height: 20px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .menu .meun-list a {
font-size: 12px;
color: #1c1f21;
line-height: 20px;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .menu .meun-list a:hover {
color: orange;
}
.site-head .topbar .topbar-r {
float: right;
width: 225px;
}
.site-head .topbar .topbar-r a,
.site-head .topbar .topbar-r span {
margin-right: 9px;
font-style: 14px;
}
.site-head .topbar .topbar-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-bottom: none;
border-top-color: white;
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(126, 126, 126, 0.2);
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 ul li .menu dl dt {
font-size: 16px;
}
.site-head .main-nav ul li .menu dl dd a {
color: #1c1f21;
font-size: 12px;
line-height: 20px;
}
.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;
/* 分别按四个角进行设置 */
border-radius: 4px 0 0 4px;
font-size: 14px;
/* 取消默认的外线（文本框特有的东西） */
outline: none;
padding-left: 10px;
}
.site-head .header-con .soso-box .btn {
float: left;
width: 30px;
height: 30px;
background-color: #20BD9A;
color: white;
text-align: center;
line-height: 30px;
font-style: 18px;
border-radius: 0 4px 4px 0;
}
.banner {
position: relative;
}
.banner img {
width: 100%;
/* 使用min-widh 这个属性表示限制最小宽度 */
min-width: 1152px;
/* 图片可能和盒子的底部产生一些缝隙，此时可以使用一个小技巧 */
/* 这是一个小技巧，添加上之后，图片就不会有缝隙了 */
vertical-align: middle;
}
.banner .center-wrap {
/* 只要有压盖，第一时间就要想到绝对定位 */
position: absolute;
top: 0;
left: 0;
width: 1152px;
left: 50%;
margin-left: -576px;
height: 100%;
}
.banner .center-wrap .banner-nav {
height: 100%;
}
.banner .center-wrap .banner-nav {
height: 100%;
}
.banner .center-wrap .banner-nav>ul {
height: 100%;
}
.banner .center-wrap .banner-nav>ul>li {
height: 16.66%;
width: 296px;
background-color: rgba(0, 0, 0, .53);
border-bottom: 1px solid #9e9e9e;
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 .leftbtn:hover {
/* 透明度 */
opacity: 0.8;
}
.banner .center-wrap .righbtn {
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 .righbtn:hover {
/* 透明度 */
opacity: 0.8;
}
.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;
height: 26px;
}
.banner .center-wrap .banner-nav>ul>li dd {
font-size: 16px;
line-height: 22px;
height: 22px;
}
.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;
}
.banner .center-wrap .banner-nav>ul>li.jp::before {
width: 14px;
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;
}
.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 .center-wrap .banner-nav .menus-box .menu {
position: absolute;
left: 296px;
top: 0;
width: 356px;
height: 100%;
background-color: rgba(0, 0, 0, .63);
color: white;
padding: 16px;
/* 加上就是盒子的总高 */
box-sizing: border-box;
}
.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;
margin-bottom: 32px;
}
.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;
}
.center-wrap h2 {
font-size: 36px;
font-weight: bold;
color: #1c1f21;
}
.content-part h2 {
font-size: 36px;
font-weight: bold;
color: #1c1f21;
}
.xxsw .hd h2 {
float: left;
}
.content-part em {
position: relative;
top: 20px;
left: 10px;
color: #1c1f21;
}
.xxsw ul li {
float: left;
width: 264px;
height: 270px;
margin-right: 32px;
background: 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, .20);
}
.content-part {
height: 698px;
padding-top: 40px;
}
.content-part .hd h2 {
float: left;
}
.content-part .hd em {
float: left;
}
.content-part .hd nav {
float: right;
width: 500px;
}
.content-part .hd nav ul li {
float: left;
margin-right: 16px;
font-size: 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: 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, .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: rgba(0, 0, 0, .53);
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: rgba(0, 0, 0, .53);
bottom: 103px;
left: 0;
text-align: center;
line-height: 40px;
/* 图片一触碰，就会有transform变形，那么此时会神奇的盖住tag，所以为了防止盖住，我们应该设置z-ind属性值 */
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: 26px;
}
.center-wrap .more-grid {
width: 264px;
height: 270px;
background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
box-sizing: border-box;
position: relative;
}
.content-part .more-grid a {
display: block;
}
.center-wrap .more-grid p {
text-align: center;
color: white;
line-height: 46px;
font-size: 15px;
}
.center-wrap .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(-10px);
}
to {
transform: translateY(10px);
}
}
.center-wrap .more-grid ul {
margin-top: 112px;
padding-left: 40px;
}
.center-wrap .more-grid ul li {
color: white;
float: left;
border-right: 1px solid white;
padding: 0 9px;
height: 14px;
line-height: 14px;
font-size: 14px;
}
.center-wrap .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 {
overflow: hidden;
width: 364px;
height: 270px;
position: relative;
margin-bottom: 30px;
}
.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;
}
.ddwl .bd .grid .wordbox {
float: left;
width: 244px;
height: 120px;
padding: 24px 18px 0;
box-sizing: border-box;
box-sizing: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
font-size: 14px;
color: #000;
}
.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 8px 16px 0 rgba(0, 0, 0, .20);
}
.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: 18px;
font-size: 9px;
color: #1c1f21;
line-height: 21px;
}
.tsddty .bd ul li .wordbox .proname {
font-weight: bold;
font-size: 16px;
color: #000000;
height: 40px;
}
.tsddty .bd ul li .wordbox .score {
font-size: 13px;
color: #FA6400;
}
.tsddty .bd ul li .wordbox .coment {
font-size: 13px;
color: #000000;
}
.tsddty .bd ul li:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .20);
}
.zsjsdlx {
height: 738px;
background-color: #f7f7f7;
}
.zsjsdlx .hd em {
float: left;
width: 307px;
}
.zsjsdlx .hd nav {
float: right;
width: 85px;
}
.zsjsdlx .bd .more-grid {
background-image: linear-gradient(180deg, #BD5EE8 0%, #832ABB 98%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}
.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%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}
.gtbzzy .bd .more-grid ul {
padding-left: 67px;
}
.big-grid.havehover .mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
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: 20px;
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;
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:first-child{
padding-left: 0;
}
footer .part1 ul li:last-child{
border-radius: none;
padding-right: 0;
}
footer .part1 dl{
width: 289px;
float: left;
}写回答
1回答
-
好帮手慕慕子
2022-11-16
同学你好，是指页脚中的clearfix吗？如果是的话，那么，nav下的ul里面的li设置了浮动，但是没有清除浮动带来的影响，可以给ul添加clearfix类名，如下：
检查元素可知，clearfix是生效的，外层盒子的高度可以由里面的内容撑开，如下：
建议同学回顾下视频，跟着讲师讲解，对比源码，继续编写样式，如下：
如果还有问题，建议图文结合，指出具体是哪里的问题，便于帮助同学准确高效的定位与解决问题。
祝学习愉快~
0
相似问题