老师请您帮忙看一下我这个甩尾图片为什么没没效果呢
相关代码：HTML5
<!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"> <meta name="keywords" content="机票，酒店，旅游攻略，签证，出国，自由行"> <meta name="Description" content="慕云游拥有10多年的旅游经验，可以为您提供全方位的旅游服务"> <title>慕云游-商城，机票，酒店，旅游攻略</title> <link rel="stylesheet" href="css/css.css"> <link rel="stylesheet" href="css/reset.css"> </head> <body> <!-- 页首顶部大盒子 --> <header class="top-box"> <!-- 深色盒子 --> <div class="dark-box"> <!-- 深色盒子版心 --> <div class="core"> <ul> <li> <a href="javascript:;">目的地</a> </li> <li> <a href="javascript:;">锦囊</a> </li> <li class="cli"> <a href="javascript:;">社区</a> <em class="away"> <i></i> <b></b> </em> <div class="menus sqmenus"> <ul class="menus-list"> <li><a href="#">旅游论坛</a></li> <li><a href="#">旅游专栏</a></li> <li><a href="#">旅游问答</a></li> <li><a href="#">旅游生活分享平台</a></li> <li><a href="#">JEN旅游生活美学</a></li> <li><a href="#">BIU伴(原结伴同游)</a></li> <li><a href="#">负责任的旅行</a></li> <li><a href="#">特别策划</a></li> </ul> </div> </li> <li> <a href="javascript:;">行程助手</a> </li> <li class="cli"> <a href="javascript:;">商城</a> <em class="away"> <i></i> <b></b> </em> <div class="menut sqmenut"> <ul class="menut-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="cli"> <a href="javascript:;">酒店·民宿</a> <em class="away"> <i></i> <b></b> </em> <div class="menur jdmenur"> <ul class="menur-list"> <li><a href="#">酒店</a></li> <li><a href="#">爱彼迎</a></li> <li><a href="#">华人旅馆</a></li> </ul> </div> </li> <li> <a href="javascript:;">特价酒店</a> </li> </ul> </div> <div class="right-layout"> <ul> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/fangdajing.png"> </a> </li> <li class="lis"> <a href="javascript:;"> <p></p> </a> </li> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/qq-fill.png"> </a> </li> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/xinlangweibo.png"> </a> </li> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/weixin.png"> </a> </li> <li> <a href="javascript:;"> <p>注册</p> </a> </li> <li> <a href="javascript:;"> <p>登录</p> </a> </li> </ul> </div> </div> <!-- 绿色的小盒子 --> <nav class="green-box"> <!-- 绿色盒子的版心 --> <div class="layout"> <ul> <li class="have"> <a href="javascript:;">机酒自由行</a> <p> <b></b> <i></i> </p> <div class="qb qbs"> <dl class="qb-list"> <dt class="lit"><a href="#"> <h1>全部</h1> </a></dt> <dd><a href="#">自由行</a></dd> <dd><a href="#">优惠机票</a></dd> <dd><a href="#">酒店</a></dd> <dd><a href="#">邮轮</a></dd> <dd><a href="#">定制游</a></dd> <dd><a href="#">马尔代夫</a></dd> <dd><a href="#">海岛游</a></dd> </dl> </div> </li> <li> <a href="javascript:;">优惠机票</a> </li> <li class="have"> <a href="javascript:;">跟团游</a> <p> <b></b> <i></i> </p> <div class="gt gts"> <dl class="gtss"> <dt><a href="#"> <h1>全部</h1> </a></dt> <dd><a href="#">跟团游</a></dd> <dd><a href="#">半自助游</a></dd> </dl> </div> </li> <li> <a href="javascript:;">酒店</a> </li> <li class="have"> <a href="javascript:;">当地玩乐</a> <p> <b></b> <i></i> </p> <div class="dd"> <dl class="ddwl"> <dt><a href="#"> <h1>全部</h1> </a></dt> <dd><a href="#">日游小团</a></dd> <dd><a href="#">深度体验</a></dd> <dd><a href="#">门票票券</a></dd> <dd><a href="#">餐饮美食</a></dd> <dd><a href="#">WIFI电话卡</a></dd> <dd><a href="#">购物</a></dd> <dd><a href="#">交通票券</a></dd> </dl> </div> </li> <li> <a href="javascript:;">签证</a> </li> <li> <a href="javascript:;">邮轮</a> </li> <li> <a href="javascript:;">河轮</a> </li> <li> <a href="javascript:;">保险</a> </li> <li> <a href="javascript:;">租车自驾</a> </li> <li class="have"> <a href="javascript:;">深度旅游</a> <p> <b></b> <i></i> </p> <div class="sd"> <dl class="sdly"> <dt><a href="#"> <h1>全部</h1> </a></dt> <dd><a href="#">City Walk</a></dd> <dd><a href="#">特色长线</a></dd> <dd><a href="#">Q-Home</a></dd> </dl> </div> </li> <li> <a href="javascript:;">私人定制</a> </li> </ul> </div> </nav> <!-- 图片LOGO和搜索框盒子 --> <nav class="logo-box"> <div class="log"> <div class="logo"> <h1>慕云游商城</h1> </div> <div class="Search-box"> <input type="search"> <!-- 放大镜盒子 --> <div class="magnifier"> <img src="image/icon_x2vd2ugr8r/fangdajing.png" width="20px" height="20px"> </div> </div> </div> </nav> </header> <!-- 宣传图片 --> <section class="banner"> <img src="image/banner1.jpg"> <div class="center-warp"> <a href="#" class="leftbtn"></a> <a href="#" class="rightbtn"></a> <nav class="banner-nav"> <ul> <li class="rmcfd"> <dl> <dt>热门出发地</dt> <dd> <em>北京</em> <em>上海</em> <em>广深</em> <em>西南</em> <em>国内其他</em> </dd> </dl> </li> <li class="gat"> <dl> <dt>港澳台 国内</dt> <dd> <em href="#">香港</em> <em href="#">澳门</em> <em href="#">台湾</em> <em href="#">国内其他</em> </dd> </dl> </li> <li class="rb"> <dl> <dt>日本 韩国</dt> <dd> <em>东京</em> <em>大阪</em> <em>冲绳</em> <em>北海道</em> <em>福冈</em> </dd> </dl> </li> <li class="dny"> <dl> <dt>东南亚 南亚</dt> <dd> <em>泰国</em> <em>新加坡</em> <em>马来西亚</em> <em>马尔代夫</em> </dd> </dl> </li> <li class="ozmz"> <dl> <dt>欧洲 美洲</dt> <dd> <em>英国</em> <em>法国</em> <em>美国</em> <em>加拿大</em> </dd> </dl> </li> <li class="axzdf"> <dl> <dt>澳新 中东非</dt> <dd> <em>澳大利亚</em> <em>新西兰</em> <em>迪拜</em> </dd> </dl> </li> </ul> <div class="menus-box"> <div class="menu"> <dl> <dt>国内热门城市</dt> <dd> <a href="#">三亚</a> <a href="#">东北雪乡</a> <a href="#">大理</a> <a href="#">丽江</a> <a href="#">昆明</a> <a href="#">西双版纳</a> <a href="#">拉萨</a> <a href="#">成都</a> <a href="#">重庆</a> <a href="#">长白山</a> <a href="#">厦门</a> <a href="#">长沙</a> <a href="#">桂林北京</a> <a href="#">西安</a> <a href="#">敦煌</a> <a href="#">杭州</a> <a href="#">上海</a> <a href="#">无锡</a> <a href="#">南京</a> <a href="#">广州</a> <a href="#">黄山</a> <a href="#">莫干山</a> <a href="#">新疆</a> <a href="#">北海</a> <a href="#">九华山</a> <a href="#">太原</a> <a href="#">张家口</a> </dd> </dl> <dl> <dt>国内热门景点</dt> <dd> <a href="#">北京故宫</a> <a href="#">东北滑雪</a> <a href="#">恭王府</a> <a href="#">长城</a> <a href="#">青城山大熊猫基地</a> <a href="#">峨眉山</a> <a href="#">都江堰</a> <a href="#">长恨歌表演</a> <a href="#">兵马俑</a> <a href="#">大唐芙蓉园</a> <a href="#">三亚日游</a> <a href="#">厦门鼓浪屿</a> <a href="#">千岛湖</a> <a href="#">呼伦贝尔草原</a> <a href="#">希拉穆仁草原</a> <a href="#">大理日游</a> <a href="#">杭州</a> <a href="#">重庆两江夜游船票</a> </dd> </dl> </div> <div class="menu"> <dl> <dt>港澳台</dt> <dd> <a href="#">香港</a> <a href="#">澳门</a> <a href="#">台北</a> <a href="#">高雄</a> <a href="#">香港迪士尼</a> <a href="#">香港海洋公园</a> <a href="#">交通接驳</a> <a href="#">澳门塔</a> <a href="#">新濠天地水舞间</a> <a href="#">澳门豪华自助</a> <a href="#">台北101</a> <a href="#">台湾美食</a> </dd> </dl> </div> <div class="menu"> <dl> <dt>日本</dt> <dd> <a href="#">东京</a> <a href="#">大版</a> <a href="#">冲绳</a> <a href="#">北海道</a> <a href="#">札幌</a> <a href="#">京都</a> <a href="#">名古屋</a> <a href="#">福冈</a> <a href="#">长崎</a> <a href="#">鹿儿岛</a> <a href="#">JR pass</a> <a href="#">米其林餐厅</a> <a href="#">东京迪士尼</a> <a href="#">大阪环球影城</a> <a href="#">冲绳一日游</a> <a href="#">City Walk</a> <a href="#">西瓜卡</a> <a href="#">京都日游</a> <a href="#">和服体验</a> <a href="#">包车服务</a> <a href="#">富士山游</a> </dd> </dl> </div> <div class="menu current"> <dl> <dt>泰新马</dt> <dd> <a href="#">普吉岛</a> <a href="#">清迈</a> <a href="#">曼谷</a> <a href="#">苏梅岛</a> <a href="#">甲米</a> <a href="#">芭提雅</a> <a href="#">拜县</a> <a href="#">新加坡</a> <a href="#">马来西亚</a> <a href="#">沙巴</a> <a href="#">吉隆坡</a> <a href="#">皇帝岛</a> <a href="#">泰国人妖</a> <a href="#">泰国丛林飞跃</a> <a href="#">泰国spa按摩</a> <a href="#">清迈夜间动物园</a> <a href="#">泰拳</a> <a href="#">表演清莱一日游</a> <a href="#">新加坡环球影城</a> <a href="#">新加坡一日游</a> <a href="#">新加坡滨海湾花园</a> <a href="#">沙巴美人鱼岛</a> <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="#">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> </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-warp"> <ul> <li> <a href="#"> <img src="image/组件-small01.png"> </a> </li> <li> <a href="#"> <img src="image/组件-small02.png"> </a> </li> <li> <a href="#"> <img src="image/组件-small03.png"> </a> </li> <li> <a href="#"> <img src="image/组件-small04.png"> </a> </li> </ul> </div> </section> </body> </html>
相关代码：CSS3
@font-face{
font-family: "pingFangSCRegular";
src:url(../font/PingFangSCRegular.ttf)format('truetype');
}
body{
font-family:"pingFangSCRegular";
}
.top-box{
width:100%;
min-width:1152px;
height: 150px;
}
.top-box .dark-box{
width:100%;
height:32px;
position: relative;
background-color: #2a2a2a;
display: block;
}
.top-box .dark-box .core{
width:1152px;
height:32px;
left: 107px;
margin:0 auto;
}
.top-box .dark-box .core ul{
}
.top-box .dark-box .core>ul>li{
float: left;
margin-left: 18px;
text-align: center;
line-height: 32px;
}
.top-box .dark-box .core>ul>li a{
color:white;
}
.top-box .dark-box .core>ul>li.cli{
padding-right: 15px;
position: relative;
}
.top-box .dark-box .core>ul>li.cli>.menus{
background-color: white;
position: absolute;
top:29px;
left:0;
/* 可以压盖住别的内容 */
z-index:9999;
/* 隐藏 */
display: none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
padding:10px;
}
.top-box .dark-box .core>ul>li.cli .sqmenus{
width:110px;
}
.top-box .dark-box .core>ul>li.cli .sqmenus menus-list li{
height:20px;
line-height:20px;
}
.top-box .dark-box .core>ul>li.cli:hover>.menus{
display: block;
}
.top-box .dark-box .core>ul>li.cli .sqmenus .menus-list a{
font-size: 12px;
color:#1C1F21;
line-height: 20px;
}
.top-box .dark-box .core>ul>li.cli .menut{
width:76px;
background-color:white;
position: absolute;
top:30px;
left:0px;
/* 隐藏 */
display: none;
/* 使用z-index:9999;可以使该盒子将别的内容压盖住 */
z-index: 9999;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
padding:10px;
}
.top-box .dark-box .core>ul>li.cli:hover .menut{
/* 一碰就显示 */
display: block;
}
.top-box .dark-box .core>ul>li.cli .menut .sqmenut{
width:76px;
}
.top-box .dark-box .core>ul>li.cli .menut .menut-list a{
font-size: 12px;
color:#1C1F21;
height:20px;
line-height: 20px;
}
.top-box .dark-box .core>ul>li.cli .menur{
width:64px;
position: absolute;
top:30px;
left:40px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
z-index: 9999;
display: none;
}
.top-box .dark-box .core>ul>li.cli:hover .jdmenur{
width:64px;
display: block;
}
.top-box .dark-box .core>ul>li.cli .jdmenur .menur-list a{
font-size: 12px;
height:5px;
line-height:5px;
color:#1C1F21;
}
.top-box .dark-box .core>ul>li.cli .jdmenur .menur-list a:hover{
color:#20BD9A;
}
.top-box .dark-box .core>ul>li.cli .menut .menut-list a:hover{
color:#20BD9A;
}
.top-box .dark-box .core>ul>li.cli .sqmenus .menus-list a:hover{
color:#20BD9A;
}
.top-box .dark-box .core>ul>li.cli .away{
width:12px;
height: 12px;
position:absolute;
top:50%;
right:0px;
margin-top:-6px;
transition:.2s ease 0s;
}
.top-box .dark-box .core>ul>li.cli .away i{
position:absolute;
width:8px;
height:8px;
left:2px;
top:1.5px;
background-color: white;
transform: rotate(45deg);
}
.top-box .dark-box .core>ul>li.cli .away b{
position: absolute;
width:8px;
height:8px;
left:2px;
top:-2px;
transform: rotate(45deg);
background-color:#2a2a2a;
}
.top-box .dark-box .core>ul>li.cli:hover .away{
transform: rotate(180deg);
}
.top-box .dark-box .right-layout{
width:300px;
height:32px;
position: absolute;
right:0px;
bottom:0px;
}
.top-box .dark-box .right-layout>ul>li{
float:left;
margin-right:18px;
line-height: 32px;
}
.top-box .dark-box .right-layout>ul>li>a{
color: white;
}
.top-box .dark-box .right-layout>ul>li>a>img{
width:20px;
height:20px;
line-height: 32px;
padding-top:7px;
}
.top-box .dark-box .right-layout>ul>li.lis p{
width:1px;
height:18px;
position: absolute;
bottom: 4px;
background-color:#D8D8D8;
}
.top-box .dark-box .right-layout>ul>li:nth-child(3){
margin-left: 16px;
}
.top-box .green-box{
height:40px;
background-color: #20BD9A;
}
.top-box .green-box .layout{
width:1115px;
height:20px;
margin:0 auto;
}
.top-box .green-box .layout ul li{
float: left;
margin-right:18px;
position: relative;
}
.top-box .green-box .layout ul li>a{
font-size: 16px;
line-height: 40px;
color: white;
}
.top-box .green-box .layout ul li .qb .qb-list .lit a h1{
float:left;
padding-left: 5px;
margin-right:90px;
font-size: 14px;
font-weight:bold;
}
.top-box .green-box .layout ul li.have{
padding-right: 16px;
}
.top-box .green-box .layout ul li.have p{
width:0px;
height:0px;
border:6px solid transparent;
position: absolute;
right:0px;
top:50%;
margin-top: -3px;
border-top-color:white;
}
.top-box .green-box .layout ul li.have p:hover{
transform: rotate(90deg);
transition: .5s ease 0s;
}
.top-box .green-box .layout ul li.have .qb{
position: absolute;
left:0px;
top:35px;
background-color:white;
z-index:9999;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.20);
display:none;
}
.top-box .green-box .layout ul li.have:hover .qb{
display: block;
}
.top-box .green-box .layout ul li.have .qbs{
width:140px;
}
.top-box .green-box .layout ul li.have .qb .qb-list a{
font-size: 12px;
color:#1C1F21;
}
.top-box .green-box .layout ul li.have .qb .qb-list dd a{
float: left;
margin:5px;
}
.top-box .green-box .layout ul li.have .qb .qb-list a:hover{
color:#20BD9A;
}
.top-box .green-box .layout ul li.have .gt{
width:60px;
background-color: white;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.20);
position: absolute;
left:5px;
top:34px;
z-index:9999;
display: none;
}
.top-box .green-box .layout ul li.have:hover .gt{
display: block;
}
.top-box .green-box .layout ul li.have .gt .gtss a h1{
float: left;
left:0px;
font-size: 14px;
font-weight: bold;
margin-right: 20px;
}
.top-box .green-box .layout ul li.have .gt>dl dd a{
float: left;
margin-right:5px;
font-size: 12px;
}
.top-box .green-box .layout ul li.have .gt>dl dd:hover a{
color:#20BD9A;
}
.top-box .green-box .layout ul li.have .dd{
width:172px;
background-color: white;
position: absolute;
left:0px;
top:35px;
z-index: 9999;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.20);
display: none;
}
.top-box .green-box .layout ul li.have:hover .dd{
display: block;
}
.top-box .green-box .layout ul li.have .dd>.ddwl dt a h1{
font-size:14px;
font-weight: bold;
float: left;
margin-left:5px;
margin-right:100px;
}
.top-box .green-box .layout ul li.have .dd>.ddwl dt a h1:hover{
color:#20BD9A;
}
.top-box .green-box .layout ul li.have .dd>.ddwl dd a{
font-size: 12px;
float: left;
margin-left: 5px;
}
.top-box .green-box .layout ul li.have .dd>.ddwl dd a:hover{
color:#20BD9A;
}
.top-box .green-box .layout ul li.have .sd{
width:118px;
position: absolute;
left:0px;
top:33px;
background-color: white;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.20);
z-index: 9999;
display: none;
}
.top-box .green-box .layout ul li.have:hover .sd{
display: block;
}
.top-box .green-box .layout ul li.have .sd .sdly dt a h1{
font-size: 14px;
font-weight: bold;
float: left;
margin-right:90px;
}
.top-box .green-box .layout ul li.have .sd dl dd a{
font-size: 12px;
float:left;
left:5px;
}
.top-box .green-box .layout ul li.have .sd dl a:hover{
color:#20BD9A;
}
.top-box .logo-box{
height:78px;
position: relative;
}
.top-box .logo-box .log{
width:1000px;
height:78px;
position: absolute;
left:50%;
left:190px;
}
.top-box .logo-box .logo{
width:120px;
height:36px;
position: absolute;
}
.top-box .logo-box .logo h1{
font-size: 24px;
color: #20BD9A;
text-align: center;
font-weight:bold;
margin-top: 21px;
}
.top-box .logo-box .Search-box{
width:405px;
height: 30px;
position: absolute;
left:140px;
margin-top: 21px;
}
.top-box .logo-box .Search-box input{
width:349px;
height:30px;
padding-right: 20px;
}
.top-box .logo-box .Search-box .magnifier{
width:30px;
height:30px;
background-color: #20BD9A;
float:right;
margin-right:26px;
position: relative;
}
.top-box .logo-box .Search-box .magnifier img{
position: absolute;
margin-left:5px;
margin-top:5px;
}
.banner{
position: relative;
}
.banner img{
width:100%;
/* 使用一个新属性min-width表示限制属性的最小宽度 */
min-width:1152px;
/* 图片可能和盒子会产生一些缝隙，此时可以运用一些小技巧 */
/* 意思为垂直居中，这是一个小技巧，添加上就不会拥有小缝细了 */
vertical-align: middle;
}
.banner .center-warp{
position: absolute;
width:1152px;
top:0;
left:0;
left:50%;
margin-left:-576px;
/* 注意这里的100%，也很重要如果一旦省去他的height将会是0
它的盒子所设计的16.6%将会失去意义
*/
height:100%;
}
.center-warp{
align-content: center;
}
.banner .center-warp .banner-nav{
height:100%;
}
.banner .center-warp .banner-nav>ul{
/* 注意这里的100%，也很重要如果一旦省去他的height将会是0
它的盒子所设计的16.6%将会失去意义
*/
height:100%;
}
.banner .center-warp .banner-nav>ul>li{
height: 16.66%;
width:296px;
background-color:rgba(0, 0, 0, 0.45);
border-bottom: 1px solid #9e9e9e;
/* box-sizing:border-box; 属性的作用就是height属性是盒子的总高度，这种情况盒子的高度使用百分数写的盒子的边框*/
box-sizing: border-box;
}
.banner .center-warp .banner-nav>ul>li:last-child{
border-bottom:none;
}
.banner .center-warp .leftbtn{
position: absolute;
width:28px;
height:44px;
top:50%;
left:-38px;
margin-top:-22px;
background-color: orange;
}
.banner .center-warp .rightbtn{
position: absolute;
width:28px;
height:44px;
top:50%;
right:-38px;
margin-top:-22px;
background-color: orange;
}
.banner .center-warp .leftbtn:hover,.banner .center-warp .righttbtn:hover{
/* 透明度 */
opacity:0.8;
}
.banner .center-warp .banner-nav>ul>li{
position: relative;
}
.banner .center-warp .banner-nav>ul>li dl{
position: absolute;
height:48px;
top:50%;
left:42px;
margin-top:-24px;
color:white;
}
.banner .center-warp .banner-nav>ul>li dl dt{
font-size:18px;
line-height:26px;
height:26px;
}
.banner .center-warp .banner-nav>ul>li dl dd{
font-size:16px;
line-height:22px;
height:22px;
}
.banner .center-warp .banner-nav>ul>li dl::before{
content:'';
position: absolute;
background-color: orange;
top:10px;
left:10px;
}
.banner .center-warp .banner-nav>ul>li.rmcfd::before{
width:22px;
height:18px;
background-position:;
margin-top:-9px;
}
.banner .center-warp .banner-nav>ul>li.gat::before{
width:18px;
height:21px;
background-position: ;
margin-top: -10.5px;
left:13px;
}
.banner .center-warp .banner-nav>ul>li.rb::before{
width:24px;
height:19px;
background-position: ;
margin-top:-9.5px;
}
.banner .center-warp .banner-nav>ul>li.dny::before{
width:18px;
height:19px;
background-position: ;
margin-top:-9.5px;
left:12px;
}
.banner .center-warp .banner-nav>ul>li.ozmz::before{
width:20px;
height:14px;
margin-top:-7px;
left:11px;
}
.banner .center-warp .banner-nav>ul>li.axzdf::before{
width:18px;
height:17px;
background-position:;
margin-top:-8.5px;
left:12px;
}
.banner .center-warp .banner-nav .menus-box .menu{
display: none;
position: absolute;
left:296px;
top:0px;
width:356px;
height:100%;
background-color: rgba(0,0,0,.63);
padding:16px;
/* 加上box-sizing属性之后，height:100%;盒子的总高度 */
/* 就不需要减padding了，因为百分比怎么减padding呀？ */
box-sizing: border-box;
color:white;
}
.banner .center-warp .banner-nav .menus-box .menu.current{
display: block;
}
.banner .center-warp .banner-nav .menus-box .menu a{
color:white;
}
.banner .center-warp .banner-nav .menus-box .menu dl{
margin-bottom: 16px;
}
.banner .center-warp .banner-nav .menus-box .menu dl dt{
line-height:30px;
font-size:18px;
}
.banner .center-warp .banner-nav .menus-box .menu dl dd{
line-height:25px;
font-size:15px;
}
.hot-ads{
margin-top:32px;
margin-bottom: 32px;
}
.hot-ads .center-warp ul li {
float: left;
width:264px;
height:110px;
margin-right:32px;
}
.hot-ads ul li:last-child{
margin-right:0px;
}2
收起
正在回答 回答被采纳积分+1
1回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星