请问如何改正
来源：2-12 项目作业
mewolmewo
2021-03-09 17:46:12
<!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>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<style>
.banner {
position: relative;
}
.banner img {
width: 100%;
/* 使用min-width 表示限制最小宽度*/
min-width: 1152px;
/* 图片可能和盒子的底部产生缝隙 此时可以使用一个小技巧*/
/* 这是一个小技巧，添加上之后图片就不会产生缝隙了 */
vertical-align: middle;
}
.banner .center-wrap {
/* 只要有压盖就要第一时间想到绝对定位 */
position: absolute;
left: 0;
top: 0;
width: 1152px;
left: 50%;
margin-left: -576px;
height: 100%;
/* background-color: orange; */
}
.banner .center-wrap .banner-nav {
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(0, 0, 0, .45);
border: 1px solid #9e9e9e;
/* box-sizing:border-box 属性作用是让height属性是盒子的总高度 */
/* 此时让盒子的边框涵盖在height里面 就要使用box-sizng*/
box-sizing: border-box;
}
.banner .center-wrap .banner-nav>ul>li:last-child {
border-bottom: none;
}
.banner .center-wrap .leftbtn {
position: absolute;
width: 28px;
height: 44px;
background: url(../images/icons.png) no-repeat -21px -94px;
top: 50%;
left: -38px;
margin-top: -22px;
/* background-color: orange; */
}
.banner .center-wrap .rightbtn {
position: absolute;
width: 28px;
height: 44px;
background: url(../images/icons.png) no-repeat -21px -29px;
top: 50%;
right: -38px;
margin-top: -22px;
/* background-color: orange; */
}
.banner .center-wrap .leftbtn:hover,
.banner .center-wrap .rightbtn:hover {
opacity: 0.8;
}
.banner .center-wrap .banner-nav>ul>li {
position: relative;
}
.banner .center-wrap .banner-nav>ul>li dl {
position: absolute;
height: 48px;
left: 42px;
top: 50%;
margin-top: -24px;
color: white;
}
.banner .center-wrap .banner-nav>ul>li dl dt {
font-size: 17px;
height: 26px;
line-height: 26px;
}
.banner .center-wrap .banner-nav>ul>li dl dd {
font-size: 15px;
line-height: 22px;
height: 22px;
}
.banner .center-wrap .banner-nav>ul>li::before {
content: '';
position: absolute;
background-image: url(../images/icons.png);
top: 50%;
left: 10px;
}
.banner .center-wrap .banner-nav>ul>li.remen::before {
width: 22px;
height: 18px;
background-position: -29px -399px;
margin-top: -9px;
}
.banner .center-wrap .banner-nav>ul>li.gat::before {
width: 18px;
height: 21px;
background-position: -28px -217px;
margin-top: -10.5px;
left: 13px;
}
.banner .center-wrap .banner-nav>ul>li.rh::before {
width: 24px;
height: 19px;
background-position: -29px -399px;
margin-top: -9px;
}
.banner .center-wrap .banner-nav>ul>li.as::before {
width: 18px;
height: 19px;
background-position: -28px -262px;
margin-top: -9.5px;
left: 12px;
}
.banner .center-wrap .banner-nav>ul>li.eu::before {
width: 20px;
height: 14px;
background-position: -29px -351px;
margin-top: -7px;
left: 11px;
}
.banner .center-wrap .banner-nav>ul>li.au::before {
width: 18px;
height: 17px;
background-position: -28px -305px;
margin-top: -8.5px;
left: 12px;
}
.banner .center-wrap .banner-nav ul li .menu {
/* 让menu隐藏 */
display: none;
position: absolute;
left: 296px;
top: 0;
width: 356px;
height: 100%;
/* 加上box-sizing之后 height:100%就是盒子总高 */
/* 就不需要减padding了 */
box-sizing: border-box;
background-color: rgba(0, 0, 0, .63);
color: white;
padding: 16px;
}
.banner .center-wrap .banner-nav ul li:hover .menu {
display: block;
}
.banner .center-wrap .banner-nav ul li .menu a {
color: white;
}
.banner .center-wrap .banner-nav ul li .menu a:hover {
color: orange;
}
.banner .center-wrap .banner-nav ul li .menu dl {
margin-bottom: 9px;
}
.banner .center-wrap .banner-nav ul li .menu dl dt {
line-height: 30px;
font-size: 18px;
}
.banner .center-wrap .banner-nav ul li .menu dl dd {
line-height: 25px;
font-size: 15px;
}
</style>
</head>
<body>
<!-- banner -->
<section class="banner">
<img src="images/banner1.jpg" alt="">
<div class="center-wrap">
<a href="" class="leftbtn"></a>
<a href="" class="rightbtn"></a>
<nav class="banner-nav">
<ul>
<li class="remen">
<dl>
<dt>热门出发地</dt>
<dd>
<em>北京</em>
<em>上海</em>
<em>广深</em>
<em>西南</em>
<em>国内其他</em>
</dd>
</dl>
<div class="menu">
<dl>
<dt>港澳台</dt>
<dd>
<a href="">香港</a>
<a href="">澳门</a>
<a href="">台北</a>
<a href="">高雄</a>
<a href="">香港迪士尼</a>
<a href="">香港海洋公园</a>
<a href="">交通接驳</a>
<a href="">澳门</a>
<a href="">塔新濠天地水舞间</a>
<a href="">澳门豪华自助 台北101</a>
<a href="">台湾美食</a>
</dd>
</dl>
<dl>
<dt>国内热门城市</dt>
<dd>
<a href="">三亚</a>
<a href="">东北雪乡</a>
<a href="">大理</a>
<a href="">丽江</a>
<a href="">昆明</a>
<a href="">西双版纳</a>
<a href="">拉萨</a>
<a href="">成都</a>
<a href="">重庆</a>
<a href="">长白山</a>
<a href="">厦门</a>
<a href="">长沙</a>
<a href="">桂林</a>
<a href="">北京</a>
<a href="">西安</a>
<a href="">敦煌</a>
<a href="">杭州</a>
<a href="">上海</a>
<a href="">无锡</a>
<a href="">南京</a>
<a href="">广州</a>
<a href="">黄山</a>
<a href="">莫干山</a>
<a href="">新疆</a>
<a href="">北海</a>
<a href="">九华山</a>
<a href="">太原</a>
<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>
</li>
<li class="gat">
<dl>
<dt>港澳台 国内</dt>
<dd>
<em>香港</em>
<em>澳门</em>
<em>台湾</em>
<em>国内其他</em>
</dd>
</dl>
<div class="menu" data-t="hk">
<dl>
<dt>港澳台</dt>
<dd>
<a href="#">香港</a>
<a href="#">澳门</a>
<a href="#">台北</a>
<a href="#">高雄</a>
<a href="#">香港迪士尼</a>
<a href="#">香港海洋公园</a>
<a href="#">交通接驳</a>
<a href="#">澳门塔</a>
<a href="#">新濠天地水舞间</a>
<a href="#">澳门豪华自助</a>
<a href="#">台北101</a>
<a href="#">台湾美食</a>
</dd>
</dl>
</div>
</li>
<li class="rh">
<dl>
<dt>日本 韩国</dt>
<dd>
<em>东京</em>
<em>大版</em>
<em>冲绳</em>
<em>北海道</em>
<em>福冈</em>
</dd>
</dl>
<div class="menu" data-t="jp">
<dl>
<dt>日本</dt>
<dd>
<a href="#">东京</a>
<a href="#">大阪</a>
<a href="#">冲绳</a>
<a href="#">北海道</a>
<a href="#">札幌</a>
<a href="#">京都</a>
<a href="#">名古屋</a>
<a href="#">福冈</a>
<a href="#">长崎</a>
<a href="#">鹿儿岛</a>
<a href="#">JR</a>
<a href="#">Pass</a>
<a href="#">米其林餐厅</a>
<a href="#">东京迪士尼</a>
<a href="#">大阪环球影城</a>
<a href="#">冲绳一日游</a>
<a href="#">City</a>
<a href="#">Walk</a>
<a href="#">西瓜卡</a>
<a href="#">京都日游</a>
<a href="#">和服体验</a>
<a href="#">包车服务</a>
<a href="#">富士山日游</a>
</dd>
</dl>
</div>
</li>
<li class="as">
<dl>
<dt>东南亚南亚</dt>
<dd>
<em>泰国</em>
<em>新加坡</em>
<em>印尼</em>
<em>马来西亚</em>
<em>越南</em>
</dd>
</dl>
<div class="menu" data-t="as">
<dl>
<dt>泰新马</dt>
<dd>
<a href="#">普吉岛</a>
<a href="#">清迈</a>
<a href="#">曼谷</a>
<a href="#">苏梅岛</a>
<a href="#">甲米</a>
<a href="#">芭堤雅</a>
<a href="#">拜县</a>
<a href="#">新加坡</a>
<a href="#">马来西亚</a>
<a href="#">沙巴</a>
<a href="#">吉隆坡</a>
<a href="#">皇帝岛</a>
<a href="#">泰国人妖</a>
<a href="#">泰国丛林飞跃</a>
<a href="#">泰国spa按摩</a>
<a href="#">清迈夜间动物园</a>
<a href="#">泰拳表演清莱一日游</a>
<a href="#">新加坡环球影城</a>
<a href="#">新加坡日游</a>
<a href="#">新加坡滨海湾花园</a>
<a href="#">沙巴美人鱼岛</a>
<a href="#">沙巴红树林萤火虫</a>
</dd>
</dl>
<dl>
<dt>东南亚</dt>
<dd>
<a href="#">巴厘岛</a>
<a href="#">长滩岛</a>
<a href="#">马尼拉</a>
<a href="#">薄荷岛</a>
<a href="#">美娜多芽庄</a>
<a href="#">岘港</a>
<a href="#">富国岛</a>
<a href="#">柬埔寨</a>
<a href="#">缅甸</a>
<a href="#">老挝</a>
<a href="#">文莱</a>
<a href="#">蓝梦岛</a>
<a href="#">巴厘岛SPA</a>
<a href="#">网红漂浮下午茶</a>
<a href="#">珍珠岛游乐园</a>
<a href="#">富国岛浮潜海钓</a>
<a href="#">吴哥窟</a>
<a href="#">西哈努克</a>
</dd>
</dl>
<dl>
<dt>西亚</dt>
<dd>
<a href="#">马尔代夫</a>
<a href="#">斯里兰卡</a>
<a href="#">印度</a>
<a href="#">尼泊尔</a>
<a href="#">格鲁吉亚阿塞拜疆</a>
<a href="#">亚美尼亚</a>
</dd>
</dl>
</div>
</li>
<li class="eu">
<dl>
<dt>欧洲 美洲</dt>
<dd>
<em>英国</em>
<em>法国</em>
<em>美国</em>
<em>加拿大</em>
</dd>
</dl>
<div class="menu" data-t="eu">
<dl>
<dt>欧洲</dt>
<dd>
<a href="#">法国</a>
<a href="#">意大利</a>
<a href="#">土耳其</a>
<a href="#">俄罗斯</a>
<a href="#">西班牙</a>
<a href="#">瑞士</a>
<a href="#">英国</a>
<a href="#">希腊</a>
<a href="#">荷兰</a>
<a href="#">德国</a>
<a href="#">捷克</a>
<a href="#">葡萄牙</a>
<a href="#">奥地利</a>
<a href="#">瑞典</a>
<a href="#">丹麦</a>
<a href="#">挪威</a>
<a href="#">冰岛</a>
<a href="#">芬兰</a>
<a href="#">罗瓦涅米</a>
<a href="#">奥斯陆</a>
<a href="#">雷克雅未克</a>
<a href="#">因特拉肯</a>
<a href="#">巴塞罗那</a>
<a href="#">伦敦</a>
<a href="#">巴黎</a>
<a href="#">塞纳河</a>
<a href="#">慕尼黑</a>
<a href="#">普罗旺斯</a>
<a href="#">温莎日游</a>
<a href="#">巴黎迪斯尼</a>
<a href="#">伊斯坦布</a>
<a href="#">尔阿尔罕布拉宫</a>
<a href="#">唐顿庄园</a>
<a href="#">埃菲尔铁塔</a>
<a href="#">凡尔赛宫</a>
<a href="#">北欧破冰船</a>
<a href="#">极光之旅</a>
<a href="#">英国天空岛</a>
</dd>
</dl>
<dl>
<dt>美洲</dt>
<dd>
<a href="#">美国</a>
<a href="#">加拿大</a>
<a href="#">墨西哥</a>
<a href="#">巴西</a>
<a href="#">阿根廷</a>
<a href="#">智利</a>
<a href="#">秘鲁</a>
<a href="#">玻利维亚</a>
<a href="#">洛杉矶</a>
<a href="#">纽约</a>
<a href="#">拉斯维加斯</a>
<a href="#">旧金山</a>
<a href="#">圣地亚哥芝加哥</a>
<a href="#">西雅图</a>
<a href="#">华盛顿</a>
<a href="#">奥兰多</a>
<a href="#">夏威夷</a>
<a href="#">塞班岛</a>
<a href="#">关岛</a>
<a href="#">环球影城</a>
<a href="#">迪士尼</a>
<a href="#">演出票</a>
<a href="#">尼亚加拉大瀑布</a>
<a href="#">帝国大厦</a>
<a href="#">奥特莱斯</a>
<a href="#">黄石国家公园</a>
<a href="#">纽约大都会博物馆</a>
<a href="#">美国大峡谷西峡</a>
<a href="#">拉斯维加斯摩天轮</a>
<a href="#">羚羊峡谷</a>
<a href="#">马蹄湾</a>
</dd>
</dl>
</div>
</li>
<li class="au">
<dl>
<dt>澳新 中东非</dt>
<dd>
<em>澳大利亚</em>
<em>新西兰</em>
<em>迪拜</em>
</dd>
</dl>
<div class="menu" data-t="au">
<dl>
<dt>澳新 南太平洋</dt>
<dd>
<a href="#">墨尔本</a>
<a href="#">悉尼</a>
<a href="#">黄金海岸</a>
<a href="#">凯恩斯</a>
<a href="#">布里斯班奥克兰</a>
<a href="#">斐济</a>
<a href="#">珀斯</a>
<a href="#">圣灵群岛</a>
<a href="#">大堡礁</a>
<a href="#">墨尔本之星</a>
<a href="#">悉尼热气球</a>
<a href="#">水上飞机</a>
<a href="#">海港大桥</a>
<a href="#">皇后镇霍比特人村</a>
<a href="#">怀托莫萤火虫洞</a>
<a href="#">米尔福德峡湾</a>
<a href="#">新西兰滑雪</a>
<a href="#">瓦纳卡</a>
<a href="#"></a>
</dd>
</dl>
<dl>
<dt>中东非</dt>
<dd>
<a href="#">迪拜</a>
<a href="#">摩洛哥</a>
<a href="#">毛里求斯</a>
<a href="#">埃及</a>
<a href="#">塞舌尔</a>
<a href="#">马达加斯加</a>
<a href="#">以色列</a>
<a href="#">肯尼亚</a>
<a href="#">南非</a>
<a href="#">伊朗</a>
<a href="#">约旦</a>
<a href="#">突尼斯</a>
<a href="#">迪拜</a>
<a href="#">塔法拉利主题公园</a>
<a href="#">迪拜七星帆船酒店用餐</a>
<a href="#">夜游迪拜河</a>
<a href="#">亚特兰蒂斯水上乐园</a>
<a href="#">动物大迁徙</a>
<a href="#">撒哈拉沙漠</a>
<a href="#">金字塔</a>
<a href="#">纳米比亚</a>
<a href="#"></a>
</dd>
</dl>
</div>
</li>
</ul>
</div>
</section>
</body>
</html>
2回答
-
好帮手慕慕子
2021-03-10
同学你好，老师第一次给出同学的解决方案，确实是可以实现鼠标移入一级菜单，让与之对应的二级菜单显示出来。效果如下：
但是上面这个实现效果，老师没有考虑到二级菜单的位置问题，接下来老师给同学提供另一种解决方案，同学可以参考调整下。
（1）去掉给一级菜单li设置的相对定位，让二级菜单参考设置了定位属性的center-wrap元素进行定位，这样二级菜单的高度就可以铺满整个banner区域了。示例：
（2）由于去掉一级菜单li的相对定位后，它下面设置绝对定位的子元素位置会发生改变，建议：去掉子元素的绝对定位，设置为行内块元素在一排显示，然后通过margin等属性调整元素的位置，示例：
（3）去掉给::before单独设置的marign-top属性
（4）去掉给dd设置的固定高度，让其由内容撑开高度即可
修改完之后的效果如下：
修改后的css代码如下：
<style>
.banner {
position: relative;
}
.banner img {
width: 100%;
/* 使用min-width 表示限制最小宽度*/
min-width: 1152px;
/* 图片可能和盒子的底部产生缝隙 此时可以使用一个小技巧*/
/* 这是一个小技巧，添加上之后图片就不会产生缝隙了 */
vertical-align: middle;
}
.banner .center-wrap {
/* 只要有压盖就要第一时间想到绝对定位 */
position: absolute;
left: 0;
top: 0;
width: 1152px;
left: 50%;
margin-left: -576px;
height: 100%;
/* background-color: orange; */
}
.banner .center-wrap .banner-nav {
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(0, 0, 0, .45);
border: 1px solid #9e9e9e;
/* box-sizing:border-box 属性作用是让height属性是盒子的总高度 */
/* 此时让盒子的边框涵盖在height里面 就要使用box-sizng*/
box-sizing: border-box;
}
.banner .center-wrap .banner-nav>ul>li:last-child {
border-bottom: none;
}
.banner .center-wrap .leftbtn {
position: absolute;
width: 28px;
height: 44px;
background: url(../images/icons.png) no-repeat -21px -94px;
top: 50%;
left: -38px;
margin-top: -22px;
/* background-color: orange; */
}
.banner .center-wrap .rightbtn {
position: absolute;
width: 28px;
height: 44px;
background: url(../images/icons.png) no-repeat -21px -29px;
top: 50%;
right: -38px;
margin-top: -22px;
/* background-color: orange; */
}
.banner .center-wrap .leftbtn:hover,
.banner .center-wrap .rightbtn:hover {
opacity: 0.8;
}
/* .banner .center-wrap .banner-nav>ul>li {
position: relative;
} */
/* 使用子选择器，只给一级菜单的dl设置样式 */
/* .banner .center-wrap .banner-nav>ul>li dl { */
.banner .center-wrap .banner-nav>ul>li > dl {
/* position: absolute; */
height: 48px;
/* */
/* left: 42px;
top: 50%;
margin-top: -24px; */
color: white;
display: inline-block;
vertical-align: middle;
margin-top: 28px;
}
.banner .center-wrap .banner-nav>ul>li dl dt {
font-size: 17px;
height: 26px;
line-height: 26px;
}
.banner .center-wrap .banner-nav>ul>li dl dd {
font-size: 15px;
line-height: 22px;
/* height: 22px; */
}
.banner .center-wrap .banner-nav>ul>li::before {
content: '';
display: inline-block;
vertical-align: middle;
margin-top: 28px;
margin-left: 20px;
margin-right: 10px;
/* position: absolute; */
background-image: url(./images/icons.png);
/* top: 50%;
left: 10px; */
}
.banner .center-wrap .banner-nav>ul>li.remen::before {
width: 22px;
height: 18px;
background-position: -29px -399px;
/* margin-top: -9px; */
}
.banner .center-wrap .banner-nav>ul>li.gat::before {
width: 18px;
height: 21px;
background-position: -28px -217px;
/* margin-top: -10.5px; */
left: 13px;
}
.banner .center-wrap .banner-nav>ul>li.rh::before {
width: 24px;
height: 19px;
background-position: -29px -399px;
/* margin-top: -9px; */
}
.banner .center-wrap .banner-nav>ul>li.as::before {
width: 18px;
height: 19px;
background-position: -28px -262px;
/* margin-top: -9.5px;
left: 12px; */
}
.banner .center-wrap .banner-nav>ul>li.eu::before {
width: 20px;
height: 14px;
background-position: -29px -351px;
/* margin-top: -7px;
left: 11px; */
}
.banner .center-wrap .banner-nav>ul>li.au::before {
width: 18px;
height: 17px;
background-position: -28px -305px;
/* margin-top: -8.5px;
left: 12px; */
}
.banner .center-wrap .banner-nav ul li .menu {
/* 让menu隐藏 */
display: none;
position: absolute;
left: 296px;
top: 0;
width: 356px;
height: 100%;
/* 加上box-sizing之后 height:100%就是盒子总高 */
/* 就不需要减padding了 */
box-sizing: border-box;
background-color: rgba(0, 0, 0, .63);
color: white;
padding: 16px;
}
.banner .center-wrap .banner-nav ul li:hover .menu {
display: block;
}
.banner .center-wrap .banner-nav ul li .menu a {
color: white;
}
.banner .center-wrap .banner-nav ul li .menu a:hover {
color: orange;
}
.banner .center-wrap .banner-nav ul li .menu dl {
margin-bottom: 9px;
}
.banner .center-wrap .banner-nav ul li .menu dl dt {
line-height: 30px;
font-size: 18px;
}
.banner .center-wrap .banner-nav ul li .menu dl dd {
line-height: 25px;
font-size: 15px;
}
</style>同学可以参考修改下，如果修改后没有效果，可以将你修改后的代码粘贴过来，老师帮助同学再测试下。
祝学习愉快~
0 -
好帮手慕慕子
2021-03-09
同学你好， 可以参考如下步骤修改：
（1）给menu设置的百分百高度，是参考menu父元素li高度计算的，导致所有的menu高度都是一样的，效果不对，建议：去掉menu设置的height属性，让其由里面的内容撑开高度
（2）由于给一级菜单中的dl设置绝对定位等样式时，使用了后代选择器，导致menu下的dl也受到了影响，变成了绝对定位，脱离文档流，无法撑开父元素menu盒子的高度了，建议通过子选择器，只给一级菜单的dl设置绝对定位，menu下的dl正常布局即可
（3）去掉给dd设置的固定高度，让其由里面的文字内容撑开高度
修改后的效果，以一个为示例：鼠标移入第一个一级菜单，与之对应的二级菜单内容显示出来，如下图所示：
祝学习愉快~
0h021-03-09
相似问题