麻烦老师检查一下当地玩乐部分的阴影效果如何改正

麻烦老师检查一下当地玩乐部分的阴影效果如何改正

相关代码：

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>

    <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 sq-menu">

                                <ul>

                                    <li><a href="#">旅行论坛</a></li>

                                    <li><a href="#">旅行专栏</a></li>

                                    <li><a href="#">旅行问答</a></li>

                                    <li><a href="#">旅行生活分享平台</a></li>

                                    <li><a href="#">JNE旅行生活美学</a></li>

                                    <li><a href="#">BIU伴（原结伴同行）</a></li>

                                    <li><a href="#">负责任的旅行</a></li>

                                    <li><a href="#">特别策划</a></li>

                                </ul>

                            </div>

                        </li>

                        <li><a href="#">行程助手</a></li>

                        <li class="have-menu"><a href="#">商城</a>

                            <em class="arrow">

                                <b></b>

                                <i></i></em>

                            <div class="menu sc-menu">

                                <ul>

                                    <li><a href="#">机酒自由行</a></li>

                                    <li><a href="#">当地欢乐</a></li>

                                    <li><a href="#">签证</a></li>

                                    <li><a href="#">保险</a></li>

                                    <li><a href="#">租车自驾</a></li>

                                    <li><a href="#">游轮</a></li>

                                    <li><a href="#">河轮</a></li>

                                    <li><a href="#">私人订制</a></li>

                                    <li><a href="#">欧洲铁路</a></li>

                                </ul>

                            </div>

                        </li>

                        <li class="have-menu"><a href="#">酒店民宿</a>

                            <em class="arrow">

                                <b></b>

                                <i></i></em>

                            <div class="menu jd-menu">

                                <ul>

                                    <li><a href="#">酒店</a></li>

                                    <li><a href="#">爱彼迎</a></li>

                                    <li><a href="#">华人旅游</a></li>


                                </ul>

                            </div>

                        </li>

                        <li><a href="#">特价酒店</a></li>

                    </ul>

                </nav>

                <div class="topbar-r">

                    <a href="#" class="iconfont">&#xe617</a>

                    <span>|</span>

                    <a href="#" class="iconfont">&#xe62e</a>

                    <a href="#" class="iconfont">&#xe67a</a>

                    <a href="#" class="iconfont">&#xe659</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>

                        <em class="arrow"></em>

                        <div class="menu jc-menu">

                            <dl>

                                <dt>全部</dt>

                                <dd>

                                    <a href="#">自由行</a>

                                    <a href="#">优惠机票</a>

                                    <a href="#">酒店</a>

                                    <a href="#">游轮</a>

                                    <a href="#">订制游</a>

                                    <a href="#">马尔代夫</a>

                                    <a href="#">海岛游</a>

                                </dd>

                            </dl>

                        </div>

                    </li>

                    <li><a href="#">优惠机票</a></li>

                    <li class="have-menu "><a href="#">跟团游</a>

                        <em class="arrow"></em>

                        <div class="menu gt-menu">

                            <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>

                        <em class="arrow"></em>

                        <div class="menu dd-menu">

                            <dl>

                                <dt>全部</dt>

                                <dd>

                                    <a href="#">日游小团</a>

                                    <a href="#">深度体验</a>

                                    <a href="#">门票票券</a>

                                    <a href="#">餐饮美食</a>

                                    <a href="#">WIFI电话卡</a>

                                    <a href="#">购物</a>

                                    <a href="#">交通票券</a>

                                </dd>

                            </dl>

                        </div>

                    </li>

                    <li><a href="#">签证</a></li>

                    <li><a href="#">游轮</a></li>

                    <li><a href="#">河轮</a></li>

                    <li><a href="#">保险</a></li>

                    <li><a href="#">租车自驾</a></li>

                    <li class="have-menu"><a href="#">深度旅游</a>

                        <em class="arrow"></em>

                        <div class="menu sd-menu">

                            <dl>

                                <dt>全部</dt>

                                <dd>

                                    <a href="#">CityWalk</a>

                                    <a href="#">特色长线</a>

                                    <a href="#">Q-Home</a>

                                </dd>

                            </dl>

                        </div>

                    </li>

                    <li><a href="#">私人订制</a></li>

                </ul>

            </div>

        </nav>

        <div class="header-con">

            <div class="center-wrap">

                <h1>慕云游商城</h1>

                <div class="search">

                    <input type="text" placeholder="请输入目的地">

                    <a href="" class="iconfont"> &#xe617</a>

                </div>

            </div>

        </div>

    </header>

    <section class="banner">

        <img src="images/组件-轮播banner.png" alt="">

        <div class="center-wrap">

            <nav class="banner-nav">

                <ul>

                    <li>

                        <dl class>

                            <div class="nav-1 nav"></div>

                            <dt>热门出发地</dt>

                            <dd>

                                <a href="#">北京</a>

                                <a href="#">上海</a>

                                <a href="#">广深</a>

                                <a href="#">西南</a>

                                <a href="#">国内其他</a>

                            </dd>

                        </dl>

                    </li>

                    <li>


                        <dl>

                            <div class="nav-2 nav"></div>

                            <dt>港澳台 国内</dt>

                            <dd>

                                <a href="#">香港</a>

                                <a href="#">澳门</a>

                                <a href="#">台湾</a>

                                <a href="#">国内其他</a>

                            </dd>

                        </dl>

                    </li>

                    <li>

                        <dl>

                            <div class="nav-3 nav"></div>

                            <dt>日本 韩国</dt>

                            <dd>

                                <a href="#">东京</a>

                                <a href="#">大阪</a>

                                <a href="#">冲绳</a>

                                <a href="#">北海道</a>

                                <a href="#">福冈</a>


                            </dd>


                        </dl>

                    </li>

                    <li>

                        <dl>

                            <div class="nav-4 nav"></div>

                            <dt>东南亚 南亚</dt>

                            <dd>

                                <a href="#">泰国</a>

                                <a href="#">新加坡</a>

                                <a href="#">印尼</a>

                                <a href="#">马来西亚</a>

                                <a href="#">越南</a>


                            </dd>


                        </dl>

                    </li>

                    <li>

                        <dl>

                            <div class="nav-5 nav"></div>

                            <dt>欧洲 美洲</dt>

                            <dd>

                                <a href="#">英国</a>

                                <a href="#">法国</a>

                                <a href="#">美国</a>

                                <a href="#">加拿大</a>

                            </dd>


                        </dl>

                    </li>

                    <li>

                        <dl>

                            <div class="nav-6 nav"></div>

                            <dt>澳新 中东非</dt>

                            <dd>

                                <a href="#">澳大利亚</a>

                                <a href="#">新西兰</a>

                                <a href="#">迪拜</a>

                            </dd>


                        </dl>

                    </li>

                </ul>

                <div class="menu-box">

                    <div class="menu-list">

                        <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-list">

                        <dl>

                            <dt>日本</dt>

                            <dd>

                                    <a href="">东京</a>

                                    <a href="">大阪</a>

                                    <a href="">冲绳</a>

                                    <a href="">北海道</a>

                                    <a href="">札幌</a>

                                    <a href="">京都</a>

                                    <a href="">名古屋</a>

                                    <a href="">福冈</a>

                                    <a href="">长崎</a>

                                    <a href="">鹿儿岛</a>

                                    <a href="">JR</a>

                                    <a href="">Pass</a>

                                    <a href="">米其林餐厅</a>

                                    <a href="">东京迪士尼</a>

                                    <a href="">大阪环球影城</a>

                                    <a href="">冲绳一日游</a>

                                    <a href="">City</a>

                                    <a href="">Walk</a>

                                    <a href="">西瓜卡</a>

                                    <a href="">京都日游</a>

                                    <a href="">和服体验</a>

                                    <a href="">包车服务</a>

                                    <a href="">富士山日游</a>

                            </dd>

                        </dl>

                    </div>

                    <div class="menu-list"></div>

                    <div class="menu-list"></div>

                    <div class="menu-list"></div>

                    <div class="menu-list"></div> -->




                </div>


            </nav>

            <a href="#" class="left"></a>

            <a href="#" class="right"></a>

        </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="xxsw-top clearfix">

                <h2>新鲜甩尾</h2><em>每日不可不看的好货</em>

            </div>

            <div class="main-content">

                <ul>

                    <li>

                        <a href="#">

                            <div class="pic-box">

                                <img src="images/xxsw1.png" alt="">

                            </div>

                            <div class="word-box">

                                北京直飞马尔代夫6-7天往返含税机票（首都航空/售完为止）…

                            </div>

                        </a>

                    </li>

                    <li> <a href="#">

                            <div class="pic-box">

                                <img src="images/xxsw2.png" alt="">

                            </div>

                            <div class="word-box">

                                [甩尾狂欢] 北京/天津直飞日本东京/大阪/冲绳/札幌/福冈4-7天往返含…

                            </div>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <div class="pic-box">

                                <img src="images/xxsw3.png" alt="">

                            </div>

                            <div class="word-box">

                                [拒签全退][全国25城联运] 北京往返格鲁吉亚+阿塞拜疆7-30天自由行…

                            </div>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <div class="pic-box">

                                <img src="images/xxsw4.png" alt="">

                            </div>

                            <div class="word-box">

                                [樱花季] 北京直飞东京/大阪/名古屋/冲绳/札幌/福冈/仙台2-30天往返

                            </div>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <div class="pic-box">

                                <img src="images/xxsw5.png" alt="">

                            </div>

                            <div class="word-box">

                                [品质小团/快速确认] 新西兰福克斯冰川直升机观光+冰川徒步（提供…

                            </div>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <div class="pic-box">

                                <img src="images/xxsw6.png" alt="">

                            </div>

                            <div class="word-box">

                                [北欧破冰船] 芬兰+瑞典极地探险号破冰船活动+冰上漂浮+瑞典小…

                            </div>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <div class="pic-box">

                                <img src="images/xxsw7.png" alt="">

                            </div>

                            <div class="word-box">

                                [指定班期特惠][全程中文伴游] 摩洛哥全景深度10日游（卡萨进出…

                            </div>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <div class="pic-box">

                                <img src="images/xxsw8.png" alt="">

                            </div>

                            <div class="word-box">

                                马来西亚天空之镜+河口赏鹰+夜游萤火虫+寻找蓝眼泪（马来西亚瓜拉雪…

                            </div>

                        </a>

                    </li>

                </ul>

            </div>

        </div>

    </section>

    <section class="jjzyx  content-part">

        <div class="center-wrap">

            <div class="jjzyx-top clearfix content-top">

                <h2>机酒自由行</h2>

                <em>挑选全球机票、酒店、邮轮等旅行产品</em>

                <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>

                </ul>

            </div>

            <div class="main-content">

                <ul>

                    <li class="big-gird"><a href="#">

                            <div class="pic-box">

                                <img src="images/机酒配图01.png" alt="">

                            </div>

                            <div class="jp">机票</div>

                            <div class="js">[樱花季]天津直飞东京/大阪/名古屋/冲绳/札幌2-30天往返<br>含税机票【甩尾/多团期]</div>

                        </a></li>

                    <li class="pro-gird"><a href="#">

                            <div class="pic-box"> <img src="images/机酒配图02.png" alt=""></div>

                            <div class="word-box">北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险…</div>

                            <div class="jp">机票</div>

                        </a></li>

                    <li class="pro-gird"><a href="#">

                            <div class="pic-box"> <img src="images/机酒配图03.png" alt=""></div>

                            <div class="word-box">北京/天津直飞日本东京/大阪/东阪/福冈/名古屋冲绳/北海道4-7天往返…</div>

                            <div class="jp">机票</div>

                        </a></li>

                    <li class="pro-gird"><a href="#">

                            <div class="pic-box"> <img src="images/机酒配图04.png" alt=""></div>

                            <div class="word-box">[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…</div>

                            <div class="jp">机票</div>

                        </a></li>

                    <li class="pro-gird"><a href="#">

                            <div class="pic-box"> <img src="images/机酒配图05.png" alt=""></div>

                            <div class="word-box">杭州/上海/宁波/义乌直飞越南芽庄/岘港4-6天往返含税机票（20KG行…</div>

                            <div class="jp">机票</div>

                        </a></li>

                    <li class="pro-gird"><a href="#">

                            <div class="pic-box"> <img src="images/机酒配图06.png" alt=""></div>

                            <div class="word-box">[赠自由行礼包] 上海/杭州/南京/合肥/宁波/徐州直飞日本东京/大阪…</div>

                            <div class="jp">机票</div>

                        </a></li>

                    <li class="more-gird"><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="ddwl-top clearfix content-top">

                <h2>当地玩乐</h2><em>像当地人一样，体验本土的吃喝玩乐</em>

                <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>

                </ul>

            </div>

            <div class="main-content clearfix">

                <div class="main-content-left">

                    

                        <div class="top big-gird">

                            <img src="images/ddwl1.png" alt="">

                            <div class="info"> 

                                <p>[亲子佳选]泰国清迈夜间动物园/Night Safari（可选接送；导游；长颈鹿餐厅）</p>

                                <div class="text">

                                <span class="left">城市玩乐</span>

                               <span class="right"><i>199</i>元起</span></div>

                            </div>

                        </div>

                   

                    <a href="#">

                        <div class="bottom pro-gird clearfix">

                            <div class="pic-box"><img src="images/ddwl2.png" alt=""></div>

                            <div class="word-box">[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…</div>

                        </div>

                    </a>

                </div>

             


                <div class="main-content-center">

                    <a href="#">

                    <div class="top pro-gird">

                        <img src="images/ddwl3.png" alt="">

                        <div class="word-box">[网红新选] 泰国清迈黑白蓝庙一日游清莱黑庙 白庙 蓝庙 温泉驿站中文导游+酒店接送+餐赠小…</div>

                    </div>

                    </a>

                    <a href="#">

                        <div class="center pro-gird">

                            <img src="images/ddwl4.png" alt="">

                            <div class="word-box">[全岛接送+中文导游] 泰国普吉岛+皇帝岛+珊瑚岛一日游双体帆船海钓 [帆船晚会+浮潜]…</div>

                        </div>

                    </a>

                    <a href="#">

                        <div class="bottom pro-gird">

                            <img src="images/ddwl5.png" alt="">

                            <div class="word-box">享行之旅|泰国苏梅岛一日游 越野车丛林环岛之旅 骑大象纳蒙瀑布</div>

                        </div>

                    </a>

                </div>

                <div class="main-content-right">

                    <a href="#">

                        <div class="top pro-gird">

                            <img src="images/ddwl6.png" alt="">

                            <div class="word-box">[可接急单] 泰国普吉岛西蒙Simon人妖秀门票VIP专座近距离与人妖互动合影…</div>

                        </div>

                    </a>

                    <div class="bottom">

                        <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>

</body>


</html>

相关代码：

.site-head {
    height: 150px;
    min-width: 1152px;
}
.site-head .topbar {
    height: 32px;
    background-color: #2A2A2A ;
    min-width: 1152px;
}
.site-head .topbar .center-wrap .shortcut-links {
    float: left;

}
.site-head .topbar .center-wrap .shortcut-links>ul>li {
    float: left;
    margin-right: 18px;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li a {
    color: #fff;
    font-size: 14px;
    line-height: 32px;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu {
    padding-right: 12px;
    position: relative; 
}
.site-head .topbar .center-wrap .shortcut-links ul li.have-menu .menu {
    position: absolute;
    top: 32px;
    left: 0;
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
    display: none;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu:hover .menu {
    display: block;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .sq-menu {
   width: 118px;
    height: 168px;
    padding-left: 6px;
    padding-top: 2px;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .sc-menu {
     width: 76px;
     height: 188px;
     padding-left: 6px;
     padding-top: 2px;
 }
 .site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .jd-menu {
    width: 64px;
    height: 68px;
    padding-left: 6px;
    padding-top: 2px;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .menu>ul>li a {
    color: black;
    font-size: 12px;
    line-height: 16px;
}
.site-head .topbar .center-wrap .shortcut-links ul li.have-menu .menu>ul>li:hover a {
    color:orange;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .arrow {

    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    right: -3px;
    margin-top: -6px;  
    transition: transform .2s ease 0s;
} 
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .arrow b{
    background-color: #2A2A2A;
    position: absolute;
    top: -2px;
    left: 0;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    z-index: 999;
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu .arrow i{
    background-color:white;
    position: absolute;
    top: 0px;
    left: 0;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}
.site-head .topbar .center-wrap .shortcut-links>ul>li.have-menu:hover .arrow {
    transform: rotate(180deg);
}
.site-head .topbar .topbar-r {
    width: 220px;
    float: right;
}
.site-head .topbar .topbar-r a {
    color: white;
    font-size: 16px;
    line-height: 32px;
    margin-right: 11px;
}
.site-head .topbar .topbar-r a:first-child {
    margin-right: 0;
}
.site-head .topbar .topbar-r a:last-child {
    margin-right: 0;
}
.site-head .topbar .topbar-r  span {
    color:white;
    padding-left: 8px;
    padding-right: 7px;

}
.site-head .main-nav {
    min-width: 1152px;
    height: 40px;
    background-color: #20BD9A;
}
/* .site-head .main-nav .center-wrap ul {
    overflow: hidden;
} */
.site-head .main-nav .center-wrap ul>li {
    float: left;
    margin-right: 18px;
}
.site-head .main-nav .center-wrap ul>li>a {
    color: #fff;
    font-size: 16px;
    line-height: 40px;
}
.site-head .main-nav .center-wrap ul>li.have-menu {
    padding-right: 16px;
    position: relative;
}
.site-head .main-nav .center-wrap ul>li.have-menu .menu {
    position: absolute;
    top:37px;
    z-index: 999;
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
    display: none;
    padding: 10px;

}
.site-head .main-nav .center-wrap ul>li.have-menu:hover .menu {
    display: block;
}
.site-head .main-nav .center-wrap ul>li.have-menu .menu.jc-menu {
    width: 155px;
    height: 70px;
}
.site-head .main-nav .center-wrap ul>li.have-menu .menu.gt-menu {
    width: 101px;
    height: 51px;
}
.site-head .main-nav .center-wrap ul>li.have-menu .menu.dd-menu {
    width: 155px;
    height: 91px;
}
.site-head .main-nav .center-wrap ul>li.have-menu .menu.sd-menu{
    width: 118px;
    height: 72px;
}
.site-head .main-nav .center-wrap ul>li.have-menu .menu dt {
    width: 28px;
    height: 22px;
    font-size: 14px;
    color: #1C1F21;  
    line-height: 22px;    
}
.site-head .main-nav .center-wrap ul>li.have-menu .menu  dd a {
    font-size: 12px;
    color: #1C1F21;
    line-height: 18px;
}
.site-head .main-nav .center-wrap ul>li.have-menu .menu  dd a:hover {
    color:orange;
}
.site-head .main-nav .center-wrap ul>li.have-menu .arrow {
    position: absolute;
    top: 50%;
    right: 0;
    width: 0px;
    height: 0px;
    margin-top: -1px;
   border: 4px solid transparent;
   border-top:4px solid white ;
   transform: rotate(0deg);
   transform-origin: 50% 20%;
   transition: transform .3s linear 0s;
}
.site-head .main-nav .center-wrap ul>li.have-menu:hover .arrow {
    transform: rotate(180deg);
}
.site-head .header-con {
    height: 36px;
    padding:21px 0;
    min-width: 1152px;
}
.site-head .header-con .center-wrap h1 {
    float: left;
    font-size: 24px;
    color: #20BD9A;
}
.site-head .header-con .center-wrap .search{
    float: left;
    width: 405px;
    height: 32px;
    padding-left: 25px;
    margin-top: 2px ;
}
.site-head .header-con .center-wrap .search input {
    float: left;
    width: 371px;
   height: 30px;
    border: 1px solid #20BD9A;
    outline: none;
    border-radius:6px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    text-indent: .5em;
}
.site-head .header-con .center-wrap .search a {
    float: left;
    display: block;
    text-align: center;
    line-height: 32px;
    font-size: 20px;
    color: white;
    width: 32px;
    height: 32px;
    background-color: #20BD9A;
}
.banner {
    width: 100%;
    height: 100%;
    position: relative;
}
.banner .center-wrap {
    width: 1152px;
    height: 100%;
   position: absolute;
   margin-left: -576px;
   top: 0;
   left:50%;

}
.banner img {
    width: 100%;
    min-width: 1152px;
    vertical-align: middle;
}
.banner .center-wrap .banner-nav{
    height: 100%;
    position: relative;
}
.banner .center-wrap .banner-nav ul{
    height: 100%;
}
.banner .center-wrap .banner-nav ul li {
    width: 296px;
    height: 16.66%;
    border-bottom: 1px solid white;
   box-sizing: border-box;

}
.banner .center-wrap .left {
    display: inline-block;
    width: 32px;
    height: 50px;
    position: absolute;
    top:50%;
    margin-top: -25px;
    right:-32px;
    background: url(../images/prew.png) no-repeat -62px -64px;
}
.banner .center-wrap .right {
    display: inline-block;
    width: 32px;
    height: 50px;
    position: absolute;
    top:50%;
    margin-top: -25px;
    left:-42px;
    background: url(../images/prew.png) no-repeat -60px -174px;
}
.banner .center-wrap a:hover {
    opacity: 0.6;
}
.banner .center-wrap .banner-nav ul li {
    position: relative;
    background: rgba(0, 0, 0, .45);
    }
.banner .center-wrap .banner-nav ul li dl {
    position: absolute;
    height: 50px;
    top: 50%;
    margin-top: -25px;
    padding-left: 42px;
}
.banner .center-wrap .banner-nav ul li dl dt {
    font-size: 18px;
    color: #FFFFFF;
}
.banner .center-wrap .banner-nav ul li dl dd a {
    font-size: 14px;
    color: #FFFFFF;
}
.banner .center-wrap .banner-nav ul li dl .nav {
    position: absolute;
    left:10px;
    top: 50%;
    margin-top:-10px;
    width: 20px;
    height: 20px;

}
.banner .center-wrap .banner-nav ul li dl .nav-1 {
    background: url(../images/prew.png) no-repeat -342px -37px;
}
.banner .center-wrap .banner-nav ul li dl .nav-2 {
    background: url(../images/prew.png) no-repeat -345px -98px;
}.banner .center-wrap .banner-nav ul li dl .nav-3 {
    background: url(../images/prew.png) no-repeat -342px -172px;
}.banner .center-wrap .banner-nav ul li dl .nav-4 {
    background: url(../images/prew.png) no-repeat -353px -251px;
}.banner .center-wrap .banner-nav ul li dl .nav-5 {
    background: url(../images/prew.png) no-repeat -358px -318px;
}
.banner .center-wrap .banner-nav ul li dl .nav-6 {
    background: url(../images/prew.png) no-repeat -376px -383px;
}

.banner .center-wrap .banner-nav .menu-box .menu-list{
    position: absolute;
    width: 356px;
    height:100%;
    top:0;
    left:296px;
   background: rgba(0, 0, 0, .65);
    padding: 16px;
    box-sizing: border-box;

}
.banner .center-wrap .banner-nav .menu-box .menu-list dl dt{
    font-size: 16px;
    color:white;
    line-height: 30px
}
.banner .center-wrap .banner-nav .menu-box .menu-list dl dd a{
    font-size: 14px;
   color: white;
    line-height: 25px
}
.hot-ads .center-wrap ul li {
    float: left;
    width: 264px;
    height: 110px;
    margin: 32px 0;
    padding-right: 32px;
}
.hot-ads .center-wrap ul li:last-child{
    padding-right: 0;
}
.content-part .center-wrap  h2{
    float: left;
    font-size: 36px;
    color: #000000;
}
.content-part .center-wrap em {
    float: left; 
    font-size: 12px;
    color: #000000;
    margin-top: 27px;
    margin-left: 10px;
}
.xxsw {
    height: 698px;
    background-color:  #F7F7F7;padding-top: 40px;
}

.xxsw .center-wrap ul li {
    float: left;
    width: 264px;
    height: 270px;
    margin-top: 32px;
    margin-right: 32px;
 }

.content-part .center-wrap .main-content>ul>li:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.xxsw .center-wrap  ul li:nth-child(4n){
    margin-right: 0;
}
.content-part a .word-box {
    padding: 20px 13px 0 15px;
    font-size: 14px;
    color: #1C1F21;
    line-height: 25px;  
}
.jjzyx {
    height: 698px;
    background-color: #fff;
    padding-top: 40px;   
}
.content-part .center-wrap .content-top>ul{
    margin-top: 12px;
    float: right;
}
.content-part .center-wrap .content-top>ul>li {
    float: left;
    margin-right: 16px;
    padding-bottom: 4px;
}
.content-part .center-wrap .content-top>ul>li:hover{
    border-bottom: 5px solid #20BD9A;
}
.content-part .center-wrap .content-top>ul>li:last-child {
    margin-right: 0;
}
.content-part .center-wrap .content-top>ul>li a {
    font-size: 16px;
    color: #000000; 
}.content-part .center-wrap .content-top>ul>li:hover a {
    color:#20BD9A ;
}
/* .jjzyx .center-wrap .jjzyx-top  ul {
    margin-top: 12px;
    float: right;
}
.jjzyx .center-wrap .jjzyx-top  ul li {
    float: left;
    margin-right: 16px;
    padding-bottom: 4px;
}
.jjzyx .center-wrap .jjzyx-top  ul li:hover {
    border-bottom: 5px solid #20BD9A;
}
.jjzyx .center-wrap .jjzyx-top  ul li:last-child {
    margin-right: 0;
}
.jjzyx .center-wrap .jjzyx-top  ul li a {
    font-size: 16px;
    color: #000000;
}
.jjzyx .center-wrap .jjzyx-top  ul li a:hover {
    color:#20BD9A ;
} */
.jjzyx .center-wrap .main-content>ul>li {
   float: left;
   width: 264px;
   height: 270px;
   margin-top: 32px;
   margin-right: 32px;
   position: relative;
   background-color: #fff;
}
.jjzyx .center-wrap .main-content ul>li.big-gird{
    width: 560px;
}
.jjzyx .center-wrap .main-content ul>li:nth-child(3){
    margin-right: 0;
}
.jjzyx .center-wrap .main-content ul>li:nth-child(7){
    margin-right: 0;
}

.jjzyx .center-wrap .main-content ul>li .jp {
    width: 74px;
    height: 40px;
    position: absolute;
    left: 0;
    bottom:86px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    line-height: 40px;
    font-size: 14px;
    text-align:center;

}
.jjzyx .center-wrap .main-content ul>li.big-gird  .jp {
    bottom:103px;
}

.jjzyx .center-wrap .main-content ul>li.big-gird .js{
    position: absolute;
    bottom: 0;
    height: 103px;
    font-size: 14px;
    color: #FFFFFF;
    padding: 30px 26px;
    background:rgba(0, 0, 0, .55);
    box-sizing: border-box;
}
.jjzyx .center-wrap .main-content>ul>li.more-gird {
    background-image: linear-gradient(to bottom,#34E3BC,#15AF7A);
    position: relative;
    text-align: center;
    padding-top: 46px;
    box-sizing: border-box;

}
.jjzyx .center-wrap .main-content>ul>li.more-gird a {
    font-size: 14px;
    color: #fff;
    line-height: 20px;
}
.jjzyx .center-wrap .main-content>ul>li.more-gird span {
    position: absolute;
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 48px;
    color: #fff;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;

}
.jjzyx .center-wrap .main-content>ul>li.more-gird:hover span{
    animation: move .7s linear 0s infinite;
}
.jjzyx .center-wrap .main-content>ul>li.more-gird ul {
    position: absolute;
    bottom: 46px;
    left: 20px;
}
.jjzyx .center-wrap .main-content>ul>li.more-gird ul li {
    float: left;
    padding:0 10px;
    border-right: 1px solid white;
}
.jjzyx .center-wrap .main-content>ul>li.more-gird ul li a {
    font-size: 14px;
    color: #FFFFFF;
}
.ddwl {
        height: 586px;
        background-color: #F7F7F7;
        padding-top: 40px;  

}
.ddwl .center-wrap .main-content {
    height: 420px;
    margin-top: 30px;
}
.ddwl .center-wrap .main-content .word-box {
    float: right;
    width: 244px;
    padding: 27px 18px;
    box-sizing: border-box;
    font-size: 14px;
color: #000000;
line-height: 22px;
}
.ddwl .center-wrap .main-content .pic-box {
    width: 120px;
    height: 120px;
    float:left;
    text-align: center;
}
.ddwl .center-wrap .main-content .main-content-left,.main-content-center,.main-content-right {
    width: 364px;
    height: 420px;
}

.ddwl .center-wrap .main-content .main-content-left,.main-content-center {
   float: left;
   margin-right: 30px;
}
.ddwl .center-wrap .main-content .main-content-right {
    float: left;
}
.ddwl .center-wrap .main-content .pro-gird {
    width: 364px;
    height: 120px;
    margin-bottom: 30px;
    background-color: #fff;
}
.ddwl .center-wrap .main-content .big-gird{
    margin-bottom: 30px;
    position: relative;
}
.ddwl .center-wrap .main-content .big-gird img {
    vertical-align: middle;
}
.ddwl .center-wrap .main-content .big-gird .info {
    position: absolute;
    bottom: 0;
    height: 104px;
    background: rgba(0, 0, 0, .5);
   padding: 17px 21px;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 22px;
    box-sizing: border-box;
}
.ddwl .center-wrap .main-content .big-gird .info span i {
    font-style: normal;
    color: #36DFBA ;
}
.ddwl .center-wrap .main-content .big-gird .info .text .left {
    float: left;
}
.ddwl .center-wrap .main-content .big-gird .info .text .right {
    float: right;
}
.ddwl .center-wrap .main-content .pro-gird:hover{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.ddwl .center-wrap .main-content .big-gird:hover{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
.ddwl .center-wrap .main-content .main-content-right .bottom {
    width: 364px;
    height: 270px;
    padding-top: 46px;
    box-sizing: border-box;
    background-image: linear-gradient( to bottom, #FF6374,#FF7368);
    position: relative; 
}
.ddwl .center-wrap .main-content .main-content-right .bottom a {
    color: white;
    text-align: center;
    line-height: 25px;
}
.ddwl .center-wrap .main-content .main-content-right .bottom a  span {
    position: absolute;
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 48px;
    color: #fff;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
}
.ddwl .center-wrap .main-content .main-content-right .bottom a  ul {
    position: absolute;
    position: absolute;
    bottom: 46px;
    left: 20px;
}
.ddwl .center-wrap .main-content .main-content-right .bottom a  ul li {
    float: left;
    padding:0 10px;
    border-right: 1px solid white;
    font-size: 14px;
    color: white;
    height: 14px;
    line-height: 14px;
}
.ddwl .center-wrap .main-content .main-content-right .bottom a  ul li:last-child {
    border-right: none;
}
.ddwl .center-wrap .main-content .main-content-right .bottom:hover span {
animation: move .7s linear 0s infinite;
}
.ddwl .center-wrap .main-content .main-content-right .bottom:hover{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}

相关代码：/*
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;}
相关代码：
​@font-face {
    font-family: 'iconfont';
    src: url('../fonts/iconfont.ttf?t=1623143638142') format('truetype');
  }

  @keyframes move {
    0% {
        margin-top: -24px;
    }
    33% {
        margin-top: -14px;
    }
   66% {
        margin-top: -24px;
    }
    100% {
        margin-top: -34px;
    }
}
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.clearfix {
    overflow: hidden;
}
.clearfix::after {
    content: '';
    display: block;
    clear: both;
    overflow: hidden;
}
.center-wrap {
    width: 1152px;
    margin: 0 auto;
}
慕先生9380059 2021-06-11
源自：“仿穷游”首页静态项目   3-4 当地玩乐部分开发（1）
10
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

3回答
Dana8011 2021-06-21 07:50:04

box-shadow, 四周要留出一圈margin，并且留出的margin要大于阴影的模糊半径，否则就会导致 阴影效果显示不全。

0
收起回答
好帮手慕星星 2021-06-11 17:15:18

同学你好，边界阴影不显示是因为父盒子设置了超出隐藏

http://img1.sycdn.imooc.com//climg/60c328b60923497f06080168.jpg

http://img1.sycdn.imooc.com//climg/60c328c409f3718303300087.jpg

overflow:hidden;属性除了可以解决浮动带来的高度塌陷问题，本身的意思是超出隐藏，所以超出的阴影看不到效果。

可以将clearfix类去掉，main-content设置了高度，不会有影响

​http://img1.sycdn.imooc.com//climg/60c3299709d4535907310150.jpg

祝学习愉快！

0
收起回答
好帮手慕星星 2021-06-11 14:20:55

同学你好，测试代码阴影效果如下：

http://img1.sycdn.imooc.com//climg/60c300630930a94d09930746.jpg

视频中也是这样的效果，不知道同学要修改为什么样子的，建议描述具体一些，便于帮助解决。

祝学习愉快！

0
收起回答
  • 提问者 慕先生9380059 #1

    big-gird的盒子左边无显示 然后最下边的3个盒子底部无阴影显示

    2021-06-11 15:51:24
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

关于阴影清除的问题
17 0 3
请问老师到底是什么机制
44 0 12
请问，阴影会影响盒子模型吗？
0 0 3
关于盒阴影的问题
41 0 6
label阴影透明度Opacity，文字阴影透明度为何无法使用呢？
4 0 4

登录后可查看更多问答，登录/注册

前端工程师2020
  • 参与学习           人
  • 提交作业       7872    份
  • 解答问题       15282    个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

了解课程

本课精华内容

问答 作业

老师，我在xhr.send()出错了

92 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师