体系课

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

请老师检查，指导是否有需要优化的地方，谢谢

来源：1-1 课程简介

RockEggs

2022-05-21 21:47:24

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">
                <!-- 快捷超级链接 -->
                <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">&#xe637;</a>
                    <span>|</span>
                    <a href="" class="iconfont">&#xe601;</a>
                    <a href="" class="iconfont">&#xe600;</a>
                    <a href="" class="iconfont">&#xe635;</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">
                <!-- logo -->
                <h1>慕云游商城</h1>
                <!-- 搜索框 -->
                <div class="soso-box">
                    <input type="text" placeholder="查询目的地/酒店/机票/攻略">
                    <a href="" class="btn iconfont">&#xe637;</a>
                </div>
            </div>
        </div>
    </header>

    <!-- banner -->
    <section class="banner">
        <img src="images/banner1.jpg" alt="">
        <!-- banner上的导航菜单 -->
        <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 href="">北京</em>
                                <em href="">上海</em>
                                <em href="">广深</em>
                                <em href="">西南</em>
                                <em href="">国内其他</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="hk">
                        <dl>
                            <dt>港澳台 国内</dt>
                            <dd>
                                <em href="">香港</em>
                                <em href="">澳门</em>
                                <em href="">台湾</em>
                                <em href="">国内其他</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="jp">
                        <dl>
                            <dt>日本 韩国</dt>
                            <dd>
                                <em href="">东京</em>
                                <em href="">大阪</em>
                                <em href="">冲绳</em>
                                <em href="">北海道</em>
                                <em href="">福冈</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="as">
                        <dl>
                            <dt>东南亚 南亚</dt>
                            <dd>
                                <em href="">泰国</em>
                                <em href="">新加坡</em>
                                <em href="">马来西亚</em>
                                <em href="">马尔代夫</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="eu">
                        <dl>
                            <dt>欧洲 美洲</dt>
                            <dd>
                                <em href="">英国</em>
                                <em href="">法国</em>
                                <em href="">美国</em>
                                <em href="">加拿大</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="au">
                        <dl>
                            <dt>澳新 中东非</dt>
                            <dd>
                                <em href="">澳大利亚</em>
                                <em href="">新西兰</em>
                                <em href="">迪拜</em>
                            </dd>
                        </dl>
                    </li>
                </ul>
                <!-- 二级菜单 -->
                <div class="menus-box">
                    <div class="menu current">
                        <dl>
                            <dt>港澳台</dt>
                            <dd>
                                <a href="">香港</a>
                                <a href="">澳门</a>
                                <a href="">台北</a>
                                <a href="">高雄</a>
                                <a href="">香港迪士尼</a>
                                <a href="">香港海洋公园</a>
                                <a href="">交通接驳</a>
                                <a href="">澳门</a>
                                <a href="">塔新濠天地水舞间</a>
                                <a href="">澳门豪华自助</a>
                                <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>
                                <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>
                            </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="">台北101</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</a> Pass
                                <a href="">米其林餐厅</a>
                                <a href="">东京迪士尼</a>
                                <a href="">大阪环球影城</a>
                                <a href="">冲绳一日游</a>
                                <a href="">City</a> Walk
                                <a href="">西瓜卡</a>
                                <a href="">京都日游</a>
                                <a href="">和服体验</a>
                                <a href="">包车服务</a>
                                <a href="">富士山日游</a>
                            </dd>
                        </dl>
                    </div>
                    <div class="menu">
                        <dl>
                            <dt>泰新马</dt>
                            <dd>
                                <a href="">普吉岛</a>
                                <a href="">清迈</a>
                                <a href="">曼谷</a>
                                <a href="">苏梅岛</a>
                                <a href="">甲米</a>
                                <a href="">芭堤雅</a>
                                <a href="">拜县</a>
                                <a href="">新加坡</a>
                                <a href="">马来西亚</a>
                                <a href="">沙巴</a>
                                <a href="">吉隆坡</a>
                                <a href="">皇帝岛</a>
                                <a href="">泰国人妖</a>
                                <a href="">泰国丛林飞跃</a>
                                <a href="">泰国spa按摩</a>
                                <a href="">清迈夜间动物园</a>
                                <a href="">泰拳表演清莱一日游</a>
                                <a href="">新加坡环球影城</a>
                                <a href="">新加坡日游</a>
                                <a href="">新加坡滨海湾花园</a>
                                <a href="">沙巴美人鱼岛</a>
                                <a href="">沙巴红树林萤火虫</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>东南亚</dt>
                            <dd>
                                <a href="">巴厘岛</a>
                                <a href="">长滩岛</a>
                                <a href="">马尼拉</a>
                                <a href="">薄荷岛</a>
                                <a href="">美娜多芽庄</a>
                                <a href="">岘港</a>
                                <a href="">富国岛</a>
                                <a href="">柬埔寨</a>
                                <a href="">缅甸</a>
                                <a href="">老挝</a>
                                <a href="">文莱</a>
                                <a href="">蓝梦岛</a>
                                <a href="">巴厘岛SPA</a>
                                <a href="">网红漂浮下午茶</a>
                                <a href="">珍珠岛游乐园</a>
                                <a href="">富国岛浮潜海钓</a>
                                <a href="">吴哥窟</a>
                                <a href="">西哈努克</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>南亚 西亚</dt>
                            <dd>
                                <a href="">马尔代夫</a>
                                <a href="">斯里兰卡</a>
                                <a href="">印度</a>
                                <a href="">尼泊尔</a>
                                <a href="">格鲁吉亚阿塞拜疆</a>
                                <a href="">亚美尼亚</a>
                            </dd>
                        </dl>
                    </div>
                    <div class="menu">
                        <dl>
                            <dt>欧洲</dt>
                            <dd>
                                <a href="">法国</a>
                                <a href="">意大利</a>
                                <a href="">土耳其</a>
                                <a href="">俄罗斯</a>
                                <a href="">西班牙</a>
                                <a href="">瑞士</a>
                                <a href="">英国</a>
                                <a href="">希腊</a>
                                <a href="">荷兰</a>
                                <a href="">德国</a>
                                <a href="">捷克</a>
                                <a href="">葡萄牙</a>
                                <a href="">奥地利</a>
                                <a href="">瑞典</a>
                                <a href="">丹麦</a>
                                <a href="">挪威</a>
                                <a href="">冰岛</a>
                                <a href="">芬兰</a>
                                <a href="">罗瓦涅米</a>
                                <a href="">奥斯陆</a>
                                <a href="">雷克雅未克</a>
                                <a href="">因特拉肯</a>
                                <a href="">巴塞罗那</a>
                                <a href="">伦敦</a>
                                <a href="">巴黎</a>
                                <a href="">塞纳河</a>
                                <a href="">慕尼黑</a>
                                <a href="">普罗旺斯</a>
                                <a href="">温莎日游</a>
                                <a href="">巴黎迪斯尼</a>
                                <a href="">伊斯坦布尔</a>
                                <a href="">阿尔罕布拉宫</a>
                                <a href="">唐顿庄园</a>
                                <a href="">埃菲尔铁塔</a>
                                <a href="">凡尔赛宫</a>
                                <a href="">北欧破冰船</a>
                                <a href="">极光之旅</a>
                                <a href="">英国天空岛</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>美洲</dt>
                            <dd>
                                <a href="">美国</a>
                                <a href="">加拿大</a>
                                <a href="">墨西哥</a>
                                <a href="">巴西</a>
                                <a href="">阿根廷</a>
                                <a href="">智利</a>
                                <a href="">秘鲁</a>
                                <a href="">玻利维亚</a>
                                <a href="">洛杉矶</a>
                                <a href="">纽约</a>
                                <a href="">拉斯维加斯</a>
                                <a href="">旧金山</a>
                                <a href="">圣地亚哥</a>
                                <a href="">芝加哥</a>
                                <a href="">西雅图</a>
                                <a href="">华盛顿</a>
                                <a href="">奥兰多</a>
                                <a href="">夏威夷</a>
                                <a href="">塞班岛</a>
                                <a href="">关岛</a>
                                <a href="">环球影城</a>
                                <a href="">迪士尼</a>
                                <a href="">演出票</a>
                                <a href="">尼亚加拉大瀑布</a>
                                <a href="">帝国大厦</a>
                                <a href="">奥特莱斯</a>
                                <a href="">黄石国家公园</a>
                                <a href="">纽约大都会博物馆</a>
                                <a href="">美国大峡谷西峡</a>
                                <a href="">拉斯维加斯摩天轮</a>
                                <a href="">羚羊峡谷</a>+马蹄湾
                            </dd>
                        </dl>
                    </div>
                    <div class="menu">
                        <dl>
                            <dt>澳新 南太平洋</dt>
                            <dd>
                                <a href="">墨尔本</a>
                                <a href="">悉尼</a>
                                <a href="">黄金海岸</a>
                                <a href="">凯恩斯</a>
                                <a href="">布里斯班奥克兰</a>
                                <a href="">斐济</a>
                                <a href="">珀斯</a>
                                <a href="">圣灵群岛</a>
                                <a href="">大堡礁</a>
                                <a href="">墨尔本之星</a>
                                <a href="">悉尼热气球</a>
                                <a href="">水上飞机</a>
                                <a href="">海港大桥</a>
                                <a href="">皇后镇霍比特人村</a>
                                <a href="">怀托莫萤火虫洞</a>
                                <a href="">米尔福德峡湾</a>
                                <a href="">新西兰滑雪</a>
                                <a href="">瓦纳卡</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>中东非</dt>
                            <dd>
                                <a href="">迪拜</a>
                                <a href="">摩洛哥</a>
                                <a href="">毛里求斯</a>
                                <a href="">埃及</a>
                                <a href="">塞舌尔</a>
                                <a href="">马达加斯加</a>
                                <a href="">以色列</a>
                                <a href="">肯尼亚</a>
                                <a href="">南非</a>
                                <a href="">伊朗</a>
                                <a href="">约旦</a>
                                <a href="">突尼斯</a>
                                <a href="">迪拜</a>
                                <a href="">塔法拉利主题公园</a>
                                <a href="">迪拜七星帆船酒店用餐</a>
                                <a href="">夜游迪拜河</a>
                                <a href="">亚特兰蒂斯水上乐园</a>
                                <a href="">动物大迁徙</a>
                                <a href="">撒哈拉沙漠</a>
                                <a href="">金字塔</a>
                                <a href="">纳米比亚</a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </nav>
        </div>
    </section>

    <!-- 热门广告 -->
    <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">
                            [甩尾狂欢] 北京/天津直飞日本东京/大阪/冲绳/札幌/福冈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 commom-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">
                        <span class="tap">机票</span>
                        <a href="">
                            <img src="images/jjzyx1.png" alt="">
                            <div class="info">
                                <p>[樱花季]天津直飞东京/大阪/名古屋/冲绳/札幌2-30天往返</p>
                                <p>含税机票【甩尾/多团期】</p>
                            </div>
                        </a>
                    </li>
                    <li class="pro-grid">
                        <a href="">
                            <div class="picbox">
                                <span class="tap">跟团游</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="tap">机票</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="tap">机票</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="tap">机票</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="tap">机票</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">&#xe619;</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">
                        <a href="">
                            <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>
                        </a>
                    </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">&#xe619;</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 commom-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">
                                [City Walk] 一日游禅意京都——千年古都的维新之路…
                            </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">
                                [City Walk] 将军之道—京都绝景之旅(含米其林午餐）…
                            </div>
                        </a>
                    </li>
                    <li class="more-grid">
                        <a href="">
                            <p>查看更多</p>
                            <p>深度旅行产品</p>
                            <span class="iconfont">&#xe619;</span>
                            <ul>
                                <li>日游</li>
                                <li>周末</li>
                                <li>亲子</li>
                                <li>长线</li>
                            </ul>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <!-- 跟团/半自助游 -->
    <section class="gtbzzy content-part commom-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">&#xe619;</span>
                            <ul>
                                <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.css

/* 首页样式表 */
/* 网页顶部 */
.site-head {
    min-width: 1152px;
    height: 150px;
}

.site-head .topbar {
    min-width: 1152px;
    height: 32px;
    background-color: #2a2a2a;
    color: #fff;
    line-height: 32px;
}

.site-head .topbar a {
    color: #fff;
}

/* 快捷超级链接 */
.site-head .topbar .shortcut-links {
    float: left;
}

.site-head .topbar .shortcut-links>ul>li {
    float: left;
    margin-right: 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:hover a {
    color: #20BD9A;
}

/* 下拉三角形 */
.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;
    -webkit-transition: transform .2s ease 0s;
    -moz-transition: transform .2s ease 0s;
    -ms-transition: transform .2s ease 0s;
    -o-transition: transform .2s ease 0s;
}

.site-head .topbar .shortcut-links>ul>li.have-menu .arrow b {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 6px;
    height: 6px;
    background-color: #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.site-head .topbar .shortcut-links>ul>li.have-menu .arrow i {
    position: absolute;
    top: 0;
    left: 3px;
    width: 6px;
    height: 6px;
    background-color: #2a2a2a;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

/* 鼠标悬浮时，下拉三角旋转，变色 */
.site-head .topbar .shortcut-links>ul>li.have-menu:hover .arrow {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.site-head .topbar .shortcut-links>ul>li.have-menu:hover .arrow b {
    background-color: #20BD9A;
}

/* 快捷超级链接菜单 */
.site-head .topbar .shortcut-links>ul>li.have-menu .menu {
    position: absolute;
    top: 30px;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
    padding: 10px;
    z-index: 999;
    /* 默认隐藏 */
    display: none;
}

/* 当鼠标触碰到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 .menu-list a:hover {
    color: #20BD9A;
    font-weight: bold;
}

/* 快捷超级链接菜单列表样式 */
.site-head .topbar .shortcut-links>ul>li.have-menu .menu .menu-list li {
    height: 24px;
    line-height: 24px;
}

/* 快捷超级链接菜单列表文字样式 */
.site-head .topbar .shortcut-links>ul>li.have-menu .menu .menu-list a {
    font-size: 12px;
    color: #1C1F21;
    line-height: 18px;
}

/* 快捷超级链接,社区菜单宽度 */
.site-head .topbar .shortcut-links>ul>li.have-menu .sqmenu {
    width: 110px;
}

/* 快捷超级链接,商城菜单宽度 */
.site-head .topbar .shortcut-links>ul>li.have-menu .scmenu {
    width: 60px;
}

/* 快捷超级链接,酒店·民宿菜单宽度 */
.site-head .topbar .shortcut-links>ul>li.have-menu .jdmsmenu {
    width: 60px;
}


/* 右侧字体图标 */
.site-head .topbar .topbar-r {
    float: right;
    width: 245px;
}

.site-head .topbar .topbar-r a,
.site-head .topbar .topbar-r span {
    margin-right: 16px;
    font-size: 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: #fff;
    font-size: 16px;
}

.site-head .main-nav ul li.have-menu::before {
    content: '';
    position: absolute;
    top: 18px;
    right: 2px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-bottom: none;
    border-top-color: #fff;
    transition: transform .2s ease 0s;
    -webkit-transition: transform .2s ease 0s;
    -moz-transition: transform .2s ease 0s;
    -ms-transition: transform .2s ease 0s;
    -o-transition: transform .2s ease 0s;
}

.site-head .main-nav ul li.have-menu:hover::before {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

/* 主导航条下拉菜单 */
.site-head .main-nav ul li .menu {
    position: absolute;
    top: 32px;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
    padding: 10px;
    z-index: 999;
    /* 默认隐藏 */
    display: none;
}

/* 当鼠标触碰时，就让menu出现 */
.site-head .main-nav ul li:hover .menu {
    display: block;
}

/* 主导航条菜单内文字悬浮变色加粗 */
.site-head .main-nav ul li .menu dl dt:hover,
.site-head .main-nav ul li .menu dl dd a:hover {
    color: #20BD9A;
    font-weight: bold;
}

/* 主导航条菜单列表文字样式 */
.site-head .main-nav ul li .menu dl dt {
    font-size: 14px;
    color: #1C1F21;
    line-height: 22px;
    font-weight: bold;
}

.site-head .main-nav ul li .menu dl dd a {
    font-size: 12px;
    color: #1C1F21;
    line-height: 18px;
}

/* 主导航条，机酒自由行菜单宽度 */
.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 .header-con {
    height: 36px;
    padding: 21px 0;
}

/* logo */
.site-head .header-con h1 {
    float: left;
    font-size: 24px;
    color: #20BD9A;
    font-weight: bold;
    line-height: 36px;
}

/* 搜索框 */
.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;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    -ms-border-radius: 4px 0 0 4px;
    -o-border-radius: 4px 0 0 4px;
    font-size: 14px;
    /*取消默认的外线（外线是文本框特有的）*/
    outline: none;
    padding-left: 10px;
}

.site-head .header-con .soso-box .btn {
    display: inline-block;
    width: 32px;
    height: 30px;
    background-color: #20BD9A;
    border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    -ms-border-radius: 0 4px 4px 0;
    -o-border-radius: 0 4px 4px 0;
    color: #fff;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
}

/* banner */
.banner {
    position: relative;
}

.banner img {
    width: 100%;
    /* 使用min-width，这个属性表示最小宽度 */
    min-width: 1152px;
    /* 图片可能会与盒子底部产生一定的缝隙，此时可以使用一个小技巧 */
    /* 添加上就不会有缝隙了 */
    vertical-align: middle;
}

/* banner上的导航菜单 */
.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 .leftbtn {
    position: absolute;
    width: 28px;
    height: 44px;
    top: 50%;
    left: -38px;
    margin-top: -22px;
    background: url(../images/icons.png) no-repeat -21px -94px;
}

.banner .center-wrap .rightbtn {
    position: absolute;
    width: 28px;
    height: 44px;
    top: 50%;
    right: -38px;
    margin-top: -22px;
    background: url(../images/icons.png) no-repeat -21px -29px;
}

.banner .center-wrap .leftbtn:hover,
.banner .center-wrap .rightbtn:hover {
    opacity: 0.6;
}

/* 一级菜单 */
.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(28, 31, 33, 0.50);
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    /* box-sizing:border-box属性的作用时让height属性是盒子的总高度。用于这种情况：在盒子的高度是百分百，但盒子有边框的时候 */
    /* 此时就要让盒子的边框涵盖在height属性里面，就要用box-sizing:border-box属性 */
    box-sizing: border-box;
}

.banner .center-wrap .banner-nav>ul>li:last-child {
    border-bottom: none;
}

.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: #fff;
}

.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: 14px;
    line-height: 22px;
}

.banner .center-wrap .banner-nav>ul>li::before {
    content: '';
    position: absolute;
    background: 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: 11px;
}

.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: 13px;
}

.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: 13px;
}

/* 二级菜单 */
.banner .center-wrap .banner-nav .menus-box .menu {
    /* 让menu隐藏 */
    display: none;
    position: absolute;
    left: 296px;
    top: 0;
    width: 324px;
    height: 100%;
    background-color: rgba(28, 31, 33, 0.7);
    color: #fff;
    padding: 16px;
    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: #fff;
}

.banner .center-wrap .banner-nav .menus-box .menu dl {
    margin-bottom: 12px;
}

.banner .center-wrap .banner-nav .menus-box .menu dl dt {
    font-size: 16px;
    line-height: 24px;
}

.banner .center-wrap .banner-nav .menus-box .menu dl dd {
    font-size: 14px;
    line-height: 22px;
}

/* 热门广告 */
.hot-ads {
    margin: 32px 0;
}

.hot-ads .center-wrap ul li {
    float: left;
    width: 264px;
    height: 110px;
    margin-right: 32px;
}

.hot-ads .center-wrap ul li:last-child {
    margin-right: 0;
}

/* 新鲜甩尾 */
.xxsw {
    padding-top: 40px;
    height: 698px;
    background-color: #f7f7f7;
}

.xxsw .hd {
    margin-bottom: 32px;
}

/* 标题h2和em的公共类 */
.content-part h2 {
    font-size: 36px;
    font-weight: bold;
    color: #1C1F21;
}

.content-part em {
    color: #1C1F21;
    font-size: 12px;
    position: relative;
    left: 12px;
    top: 26px;
}

.xxsw .hd h2 {
    float: left;
}

.xxsw .hd em {
    float: left;
}

.xxsw .center-wrap ul li {
    float: left;
    width: 264px;
    height: 270px;
    margin-right: 32px;
    background-color: #fff;
    margin-bottom: 32px;
}

.xxsw .center-wrap ul li:nth-child(4n) {
    margin-right: 0;
}

.xxsw .center-wrap ul li a .wordbox {
    color: #1C1F21;
    font-size: 14px;
    padding: 14px;
    line-height: 22px;
}

.xxsw .center-wrap ul li:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.20);
}

/* 机酒自由行 */
.commom-style {
    height: 698px;
    padding-top: 40px;
}

.commom-style .hd h2 {
    float: left;
}

.commom-style .hd em {
    float: left;
}

.content-part .hd nav {
    float: right;
}

.content-part .hd nav ul {
    padding-top: 20px;
}

.content-part .hd nav ul li {
    float: left;
    margin-left: 16px;
}

.content-part .hd nav ul li a {
    font-size: 14px;
    color: #1C1F21;
    text-align: center;
}

.content-part .hd nav ul li.current {
    border-bottom: 4px solid #20BD9A;
    padding-bottom: 2px;
}

.content-part .hd nav ul li.current a {
    color: #20BD9A;
}

/* 公共的一个特效：鼠标触碰图片，能够有放大效果 */
.content-part img {
    transition: transform .4s ease 0s;
    -webkit-transition: transform .4s ease 0s;
    -moz-transition: transform .4s ease 0s;
    -ms-transition: transform .4s ease 0s;
    -o-transition: transform .4s ease 0s;
}

.content-part img:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.content-part li {
    overflow: hidden;
}

.content-part li .picbox {
    height: 184px;
    overflow: hidden;
}

.content-part .grid {
    overflow: hidden;
}

.commom-style .bd {
    padding-top: 32px;
}

.commom-style .bd>ul>li {
    float: left;
    margin-right: 32px;
    margin-bottom: 32px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
}

.commom-style .bd>ul>li:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.20);
}

.commom-style .bd>ul>li:nth-child(3),
.commom-style .bd>ul>li:nth-child(7) {
    margin-right: 0;
}

.commom-style .bd>ul>li.big-grid {
    width: 560px;
    height: 270px;
    position: relative;
}

.commom-style .bd>ul>li.big-grid .info {
    position: absolute;
    width: 560px;
    height: 103px;
    background-color: rgba(28, 31, 33, 0.50);
    left: 0;
    bottom: 0;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    padding: 30px 26px;
    box-sizing: border-box;
}

.commom-style .bd>ul>li .tap {
    position: absolute;
    width: 74px;
    height: 40px;
    background-color: rgba(28, 31, 33, 0.50);
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
}

.commom-style .bd>ul>li.big-grid .tap {
    bottom: 103px;
    left: 0;
    z-index: 999;
}

.commom-style .bd>ul>li.pro-grid {
    width: 264px;
    height: 270px;
}

.commom-style .bd>ul>li.pro-grid .picbox {
    position: relative;
    height: 184px;
}

.commom-style .bd>ul>li.pro-grid .picbox .tap {
    bottom: 0;
    left: 0;
    z-index: 999;
}

.commom-style .bd>ul>li.pro-grid .wordbox {
    color: #1C1F21;
    font-size: 14px;
    padding: 14px;
    line-height: 22px;
}

.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: #fff;
    font-size: 14px;
    line-height: 22px;
}

.content-part .more-grid .iconfont {
    position: absolute;
    font-size: 48px;
    color: #fff;
    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;
    -webkit-animation: ud .4s ease 0s infinite alternate;
}

@keyframes ud {
    from {
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
    }

    to {
        transform: translateY(5px);
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -o-transform: translateY(5px);
    }
}

.content-part .more-grid ul {
    margin-top: 110px;
    padding-left: 38px;
}

.content-part .more-grid ul li {
    float: left;
    border-right: 1px solid #fff;
    color: #fff;
    font-size: 14px;
    padding: 0 8px;
    height: 16px;
    line-height: 16px;
}

.content-part .more-grid ul li:last-child {
    border: none;
}

/* 当地玩乐 */
.ddwl {
    background-color: #f7f7f7;
    height: 546px;
    padding-top: 40px;
}

.ddwl .hd h2 {
    float: left;
}

.ddwl .hd em {
    float: left;
}

.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;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.ddwl .bd .bigpicbox .info {
    position: absolute;
    width: 364px;
    height: 104px;
    bottom: 0;
    left: 0;
    background-color: rgba(28, 31, 33, 0.50);
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    padding: 17px 21px 0;
    box-sizing: border-box;
}

.ddwl .bd .bigpicbox .info .proname {
    margin-bottom: 4px;
}

.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;
    margin-bottom: 30px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}

.ddwl .bd .grid:last-child {
    margin-bottom: 0;
}

.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;
    font-size: 14px;
    color: #1C1F21;
    line-height: 22px;
}

.ddwl .bd .more-grid {
    background-image: linear-gradient(180deg, #FF6374 1%, #FF7368 98%);
    width: 364px;
    height: 270px;
}

.ddwl .bd .more-grid ul {
    padding-left: 26px;
}

.ddwl .bd .grid:hover,
.ddwl .bd .bigpicbox:hover,
.ddwl .bd .more-grid:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.20);
}

/* 特色当地体验 */
.tsddty {
    height: 456px;
}

.tsddty .center-wrap {
    padding-top: 40px;
}

.tsddty .center-wrap .hd h2 {
    text-align: center;
}

.tsddty .center-wrap .bd {
    padding-top: 32px;
}

.tsddty .center-wrap .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 .center-wrap .bd ul li:last-child {
    margin-right: 0;
}

.tsddty .center-wrap .bd ul li .wordbox {
    padding: 16px 14px 0;
}

.tsddty .center-wrap .bd ul li .picbox {
    width: 264px;
    height: 184px;
}

.tsddty .center-wrap .bd ul li .wordbox .proname {
    font-weight: bold;
    font-size: 16px;
    color: #1C1F21;
    line-height: 24px;
    height: 48px;
}

.tsddty .center-wrap .bd ul li .wordbox .score {
    font-size: 12px;
    color: #FA6400;
}

.tsddty .center-wrap .bd ul li .wordbox .comment {
    font-size: 12px;
    color: #1C1F21;
}

.tsddty .center-wrap .bd ul li:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.20);
}

/* 最世界·深度旅行 */
.zsjsdlx {
    height: 738px;
    background-color: #f7f7f7;
}

.zsjsdlx .center-wrap .bd .more-grid {
    background-image: linear-gradient(180deg, #BD5EE8 0%, #832ABB 98%);
}

.zsjsdlx .center-wrap .bd .more-grid ul {
    padding-left: 44px;
}

.center-wrap .bd .big-grid.havehover .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity .4s ease 0s;
    -webkit-transition: opacity .4s ease 0s;
    -moz-transition: opacity .4s ease 0s;
    -ms-transition: opacity .4s ease 0s;
    -o-transition: opacity .4s ease 0s;
}

.center-wrap .bd .big-grid.havehover:hover .mask {
    opacity: 1;
}

.center-wrap .bd .big-grid.havehover .circle {
    position: absolute;
    top: -106px;
    left: 50%;
    margin-left: -53px;
    width: 106px;
    height: 106px;
    border: 1px solid #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    color: #fff;
    box-sizing: border-box;
    padding-top: 24px;
    font-size: 18px;
    font-weight: bold;
    transition: top .4s ease 0s;
    -webkit-transition: top .4s ease 0s;
    -moz-transition: top .4s ease 0s;
    -ms-transition: top .4s ease 0s;
    -o-transition: top .4s ease 0s;
}

.center-wrap .bd .big-grid.havehover .circle p {
    text-align: center;
}

.center-wrap .bd .big-grid.havehover:hover .circle {
    top: 62px;
}

.center-wrap .bd .big-grid.havehover .word {
    position: absolute;
    bottom: -100px;
    left: 20px;
    color: #fff;
    transition: bottom .4s ease 0s;
}

.center-wrap .bd .big-grid.havehover:hover .word {
    bottom: 30px;
}



/* 跟团/半自助游 */
.gtbzzy .center-wrap .bd .more-grid {
    background-image: linear-gradient(180deg, #41D8E9 0%, #3685EA 98%);
}

.gtbzzy .center-wrap .bd .more-grid ul {
    padding-left: 68px;
}

.gtbzzy .center-wrap .bd .big-grid .word {
    left: 6px;
}

/* 页脚 */
footer .part1 {
    height: 220px;
    background-color: #f7f7f7;
}

footer .part1 ul {
    padding-top: 36px;
}

footer .part1 ul li {
    float: left;
    border-right: 1px solid #1C1F21;
    height: 16px;
    padding: 0 26px;
    line-height: 16px;
}

footer .part1 ul li:first-child {
    padding-left: 0;
}

footer .part1 ul li:last-child {
    border-right: none;
    padding-right: 0;
}

footer .part1 ul li a {
    color: #1C1F21;
    font-size: 18px;
}

footer .part1 .dlbox {
    padding-top: 30px;
}

footer .part1 dl {
    width: 289px;
    float: left;
    padding-left: 75px;
    margin-right: 30px;
    position: relative;
}

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;
    left: 0;
    background-image: url(../images/icons.png);
}

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: #fff;
}

footer .part2 .r1 h2 {
    float: left;
    font-size: 46px;
    line-height: 46px;
    margin-right: 20px;
}

footer .part2 .r1 .slogan {
    float: left;
    width: 532px;
    font-size: 14px;
    line-height: 22px;
    position: relative;
    top: 2px;
}


footer .part2 .links ul {
    padding-top: 30px;
}

footer .part2 .links ul li {
    float: left;
    border-right: 1px solid #fff;
    padding: 0 10px;
    font-size: 14px;
    line-height: 14px;
    height: 14px;
}

footer .part2 .links ul li:first-child {
    padding-left: 0;
}

footer .part2 .links ul li:last-child {
    border-right: none;
}

footer .part2 .links ul li a {
    color: #fff;
}

footer .copyrights {
    color: #fff;
    padding-top: 10px;
    font-size: 14px;
    line-height: 22px;
}

footer .copyrights a {
    color: #fff;
}

base.css

/* 公共类样式 */
/* 定义字体 */
@font-face {
    font-family: PingFangSCRegular;
    src: url(../fonts/PingFangSCRegular.ttf) format('truetype');
}

@font-face {
    font-family: 'iconfont';
    src: url('../fonts/iconfont.eot?t=1652364706471');
    /* IE9 */
    src: url('../fonts/iconfont.eot?t=1652364706471#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/iconfont.woff2?t=1652364706471') format('woff2'),
        url('../fonts/iconfont.woff?t=1652364706471') format('woff'),
        url('../fonts/iconfont.ttf?t=1652364706471') format('truetype'),
        url('../fonts/iconfont.svg?t=1652364706471#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: PingFangSCRegular;
}

/* 居中（网页版心） */
.center-wrap {
    width: 1152px;
    margin: 0 auto;
}

/* 清除浮动 */
.clearfix {
    overflow: hidden;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    overflow: hidden;
}

/* 文字居中 */
.tac {
    text-align: center;
}

/* 转块级元素 */
.db {
    display: block;
}

/* 转行内块级元素 */
.dib {
    display: inline-block;
}

reset.css

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html {
    color: #000;
    background: #FFF
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,
img {
    border: 0
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal
}

ol,
ul {
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal
}

q:before,
q:after {
    content: ''
}

abbr,
acronym {
    border: 0;
    font-variant: normal
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    *font-size: 100%
}

legend {
    color: #000
}

#yui3-css-stamp.cssreset {
    display: none
}

a {
    text-decoration: none;
}
写回答

1回答

好帮手慕慕子

2022-05-22

同学你好，效果整体实现的很棒，代码也很简洁，可以不用再优化了，祝学习愉快~

0

0 学习 · 17877 问题

查看课程

相似问题

请老师检查优化，谢谢

回答 1

左右箭头有不明白的地方请老师指点一下

回答 1

请问老师有检查 我的作业吗，为什么反馈回来的东西都是别人的问题文档？

回答 1

老师好，下面是我完成的作业，这样写是否符合书写规范？是否正确，以及需要改进优化的地方。

回答 1

请老师检查

回答 1

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