2-12 项目作业
来源：2-12 项目作业
慕移动4506339
2022-10-27 12:28:22
老师，请检查
日本北海道--
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/css-1.css"> </head> <body> <section class="banner"> <!-- 轮播图 --> <img src="images/banner2.jpg" class="img"> <div class="center-wrap"> <!-- 左右轮播按钮 --> <a class="left-btn" href=""></a> <a class="right-btn" href=""></a> <!-- 菜单 --> <div class="menu"> <!-- 一级菜单 --> <ul class="first-menu"> <li class="hot"> <dl> <dt>出门出发地</dt> <dd> <em>北京</em> <em>上海</em> <em>广深</em> <em>西南</em> <em>国内其他</em> </dd> </dl> </li> <li class="hk"> <dl> <dt>港澳台 国内</dt> <dd> <em>香港</em> <em>澳门</em> <em>国内其他</em> </dd> </dl> </li> <li class="jp"> <dl> <dt>日本 韩国</dt> <dd> <em>东京</em> <em>大阪</em> <em>冲绳</em> <em>北海道</em> <em>福冈</em> </dd> </dl> </li> <li class="as"> <dl> <dt>东南亚 </dt> <dd> <em>泰国</em> <em>新加坡</em> <em>印尼</em> <em>马来西亚</em> <em>越南</em> </dd> </dl> </li> <li class="eu"> <dl> <dt>欧洲 美洲</dt> <dd> <em>英国</em> <em>法国</em> <em>美国</em> <em>加拿大</em> </dd> </dl> </li> <li class="ao"> <dl> <dt>奥新 中东非</dt> <dd> <em>澳大利亚</em> <em>新西兰</em> <em>迪拜</em> </dd> </dl> </li> </ul> <!-- 二级菜单 --> <ul class="second-menu"> <li> <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> </li> <li> <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> </li> <li> <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> </li> </ul> </div> <!-- 底部轮播按钮 --> <div class="bottom"> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </div> </section> </body> </html>
css--
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
em {
font-style: normal;
}
section.banner {
width: 100%;
position: relative;
}
.banner img {
width: 100%;
min-width: 1152px;
vertical-align: middle;
}
section.banner .center-wrap {
width: 1152px;
height: 100%;
position: absolute;
top: 0;
left: 50%;
margin-left: -576px;
}
section.banner .center-wrap .left-btn {
position: absolute;
width: 52px;
height: 88px;
left: -62px;
top: 50%;
margin-top: -44px;
background-image: url(../images/spider.png);
background-position: -77px -145px;
}
section.banner .center-wrap .right-btn {
position: absolute;
width: 52px;
height: 88px;
right: -62px;
top: 50%;
margin-top: -44px;
background-image: url(../images/spider.png);
background-position: -198px -145px;
}
section.banner .center-wrap .menu {
height: 100%;
width: 652px;
float: left;
}
section.banner .center-wrap .menu:hover .second-menu {
display: block;
}
section.banner .center-wrap ul.first-menu {
color: white;
font-size: 18px;
color: #FFFFFF;
float: left;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
section.banner .center-wrap ul.first-menu>li {
height: 16.6%;
width: 296px;
border: 1px solid gray;
padding-left: 40px;
box-sizing: border-box;
position: relative;
}
section.banner .center-wrap ul.first-menu>li::before {
position: absolute;
content: '';
background-image: url(../images/spider.png);
left: 0px;
top: 50%
}
section.banner .center-wrap ul.first-menu>li.hot::before {
width: 42px;
height: 37px;
background-position: -699px -170px;
margin-top: -18.5px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.hk::before {
width: 36px;
height: 42px;
background-position: -494px -490px;
margin-top: -21px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.jp::before {
width: 43px;
height: 36px;
background-position: -704px -284px;
margin-top: -18px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.as::before {
width: 35px;
height: 35px;
background-position: -708px -359px;
margin-top: -17.5px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.eu::before {
width: 40px;
height: 28px;
background-position: -712px -452px;
margin-top: -14px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.ao::before {
width: 36px;
height: 32px;
background-position: -718px -540px;
margin-top: -16px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li dl {
height: 48px;
position: absolute;
top: 50%;
margin-top: -24px;
}
section.banner .center-wrap ul.first-menu>li dt {
height: 26px;
line-height: 26px;
font-size: 18px;
}
section.banner .center-wrap ul.first-menu>li dd {
height: 22px;
line-height: 22px;
font-size: 14px;
}
section.banner .center-wrap ul.second-menu {
width: 356px;
height: 100%;
float: left;
color: #FFFFFF;
background-color: rgba(0, 0, 0, .6);
display: none;
}
section.banner .center-wrap ul.second-menu li {
padding: 10px;
}
section.banner .center-wrap ul.second-menu li dt {
font-size: 16px;
color: #FFFFFF;
line-height: 24px;
}
section.banner .center-wrap ul.second-menu li dd a {
color: white;
font-size: 14px;
color: #FFFFFF;
}
section.banner .center-wrap .bottom {
position: absolute;
width: 160px;
height: 20px;
bottom: 20px;
left: 50%;
margin-left: -80px;
}
section.banner .center-wrap .bottom p {
width: 20px;
height: 20px;
background-color: lightgreen;
border-radius: 50%;
margin-right: 10px;
float: left;
}
section.banner .center-wrap .bottom p:nth-child(2) {
width: 40px;
border-radius: 10px
}
section.banner .center-wrap .bottom p:last-child {
margin-right: 0;
}神价甩尾--
<!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/css-2.css" </head> <body> <section class="banner"> <!-- 轮播图 --> <img src="images/banner5.jpg" class="img"> <div class="center-wrap"> <!-- 左右轮播按钮 --> <a class="left-btn" href=""></a> <a class="right-btn" href=""></a> <!-- 一级菜单 --> <ul class="first-menu"> <li class="hot"> <dl> <dt>出门出发地</dt> <dd> <em>北京</em> <em>上海</em> <em>广深</em> <em>西南</em> <em>国内其他</em> </dd> </dl> </li> <li class="hk"> <dl> <dt>港澳台 国内</dt> <dd> <em>香港</em> <em>澳门</em> <em>国内其他</em> </dd> </dl> </li> <li class="jp"> <dl> <dt>日本 韩国</dt> <dd> <em>东京</em> <em>大阪</em> <em>冲绳</em> <em>北海道</em> <em>福冈</em> </dd> </dl> </li> <li class="as"> <dl> <dt>东南亚 </dt> <dd> <em>泰国</em> <em>新加坡</em> <em>印尼</em> <em>马来西亚</em> <em>越南</em> </dd> </dl> </li> <li class="eu"> <dl> <dt>欧洲 美洲</dt> <dd> <em>英国</em> <em>法国</em> <em>美国</em> <em>加拿大</em> </dd> </dl> </li> <li class="ao"> <dl> <dt>奥新 中东非</dt> <dd> <em>澳大利亚</em> <em>新西兰</em> <em>迪拜</em> </dd> </dl> </li> </ul> <!-- 二级菜单 --> <ul class="second-menu"> <li class="cur"> <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> </li> <li> <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> </li> <li> <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> </li> </ul> <!-- 底部轮播按钮 --> <div class="bottom"> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </div> </section> </body> </html>
css.css
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
em {
font-style: normal;
}
section.banner {
width: 100%;
position: relative;
}
.banner img {
width: 100%;
min-width: 1152px;
vertical-align: middle;
}
section.banner .center-wrap {
width: 1152px;
height: 100%;
position: absolute;
top: 0;
left: 50%;
margin-left: -576px;
}
section.banner .center-wrap .left-btn {
position: absolute;
width: 52px;
height: 88px;
left: -62px;
top: 50%;
margin-top: -44px;
background-image: url(../images/spider.png);
background-position: -77px -145px;
}
section.banner .center-wrap .right-btn {
position: absolute;
width: 52px;
height: 88px;
right: -62px;
top: 50%;
margin-top: -44px;
background-image: url(../images/spider.png);
background-position: -198px -145px;
}
section.banner .center-wrap .menu {
height: 100%;
width: 652px;
float: left;
}
section.banner .center-wrap ul.first-menu {
color: white;
font-size: 18px;
color: #FFFFFF;
float: left;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
section.banner .center-wrap ul.first-menu>li {
height: 16.6%;
width: 296px;
border: 1px solid gray;
padding-left: 40px;
box-sizing: border-box;
position: relative;
}
section.banner .center-wrap ul.first-menu>li::before {
position: absolute;
content: '';
background-image: url(../images/spider.png);
left: 0px;
top: 50%
}
section.banner .center-wrap ul.first-menu>li.hot::before {
width: 42px;
height: 37px;
background-position: -699px -170px;
margin-top: -18.5px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.hk::before {
width: 36px;
height: 42px;
background-position: -494px -490px;
margin-top: -21px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.jp::before {
width: 43px;
height: 36px;
background-position: -704px -284px;
margin-top: -18px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.as::before {
width: 35px;
height: 35px;
background-position: -708px -359px;
margin-top: -17.5px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.eu::before {
width: 40px;
height: 28px;
background-position: -712px -452px;
margin-top: -14px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li.ao::before {
width: 36px;
height: 32px;
background-position: -718px -540px;
margin-top: -16px;
transform: scale(0.7)
}
section.banner .center-wrap ul.first-menu>li dl {
height: 48px;
position: absolute;
top: 50%;
margin-top: -24px;
}
section.banner .center-wrap ul.first-menu>li dt {
height: 26px;
line-height: 26px;
font-size: 18px;
}
section.banner .center-wrap ul.first-menu>li dd {
height: 22px;
line-height: 22px;
font-size: 14px;
}
section.banner .center-wrap ul.second-menu {
width: 356px;
height: 100%;
float: left;
color: #FFFFFF;
}
section.banner .center-wrap ul.second-menu li {
height: 100%;
display: none;
box-sizing: border-box;
background-color: rgba(0, 0, 0, .6);
padding: 10px;
}
section.banner .center-wrap .second-menu li.cur {
display: block;
}
section.banner .center-wrap ul.second-menu li dt {
font-size: 16px;
color: #FFFFFF;
line-height: 24px;
}
section.banner .center-wrap ul.second-menu li dd a {
color: white;
font-size: 14px;
color: #FFFFFF;
}
section.banner .center-wrap .bottom {
position: absolute;
width: 160px;
height: 20px;
bottom: 20px;
left: 50%;
margin-left: -80px;
}
section.banner .center-wrap .bottom p {
width: 20px;
height: 20px;
background-color: lightgreen;
border-radius: 50%;
margin-right: 10px;
float: left;
}
section.banner .center-wrap .bottom p:nth-child(2) {
width: 40px;
border-radius: 10px
}
section.banner .center-wrap .bottom p:last-child {
margin-right: 0;
}写回答
1回答
-
好帮手慕久久
2022-10-27
同学你好，效果不是特别对，可能理解错题意了。题目本意让同学实现鼠标移入一级菜单，就显示对应的二级菜单：
功能在一套代码中实现，不是分着实现。
建议参考如下实现：
<!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> <style> * { margin: 0; padding: 0; list-style: none; } a { color: #fff; text-decoration: none; } .banner { position: relative; margin-top: 100px; } .banner img { width: 100%; /* 白边的处理 */ vertical-align: middle; } .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 .banner-nav { /* 注意，这里的100%也非常重要，因为如果省略了，它的height就是0 */ /* 那么它的子盒子设置16.6%就没有意义了 */ height: 100%; position: relative; } .banner .center-wrap .banner-nav>ul { /* 注意，这里的100%也非常重要，因为如果省略了，它的height就是0 */ /* 那么它的子盒子设置16.6%就没有意义了 */ height: 100%; } .banner .center-wrap .banner-nav>ul>li { /* 父元素高度是100%，分6份 */ height: 16.666667%; width: 296px; background-color: rgba(0, 0, 0, .53); /*子元素 需要相对自己定位 */ position: relative; } /* 把:after当成每个li的下横线 */ .banner .center-wrap .banner-nav>ul>li:after { display: block; content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; background: #9e9e9e; } /* 一级菜单中的文字样式 */ .banner .center-wrap .banner-nav>ul>li>dl { position: absolute; height: 48px; top: 50%; left: 42px; margin-top: -24px; color: white; font-size: 18px; line-height: 26px; height: 26px; } /* 一级菜单的图标样式 */ .banner .center-wrap .banner-nav>ul>li::before { content: ''; position: absolute; background-image: url(images/icons.png); top: 50%; left: 10px; width: 22px; height: 18px; background-position: -29px -399px; margin-top: -9px; } /* 每个一级菜单下的二级菜单样式 */ .banner .center-wrap .banner-nav>ul>li .menu { /* 让menu隐藏 */ display: none; position: relative; width: 356px; left: 296px; top: 0; /* 高度是自己父元素的6倍，就和center-wrap 一样高了 */ height: 600%; background-color: rgba(0, 0, 0, .63); color: white; padding: 16px; box-sizing: border-box; z-index: 99999; } /* 设置每一个二级菜单的位置 */ .banner .center-wrap .banner-nav>ul>li:nth-child(2) .menu { top: -100%; } .banner .center-wrap .banner-nav>ul>li:nth-child(3) .menu { top: -200%; } .banner .center-wrap .banner-nav>ul>li:nth-child(4) .menu { top: -300%; } .banner .center-wrap .banner-nav>ul>li:nth-child(5) .menu { top: -400%; } .banner .center-wrap .banner-nav>ul>li:nth-child(6) .menu { top: -500%; } /* 鼠标移入一级菜单，显示二级菜单 */ .banner .center-wrap #banner-nav li:hover .menu { display: block; } </style> </head> <body> <section class="banner" id="banner"> <!-- 底图 --> <img src="images/banner2.jpg" alt=""> <!-- 菜单区 --> <div class="center-wrap"> <nav class="banner-nav" id="banner-nav"> <ul id="banner-nav-ul"> <!-- 第一组菜单 --> <li> <!-- 一级菜单中的文字 --> <dl> <dt>热门出发地</dt> <dd> <em>北京</em> <em>上海</em> </dd> </dl> <!-- 二级菜单 --> <div class="menu"> <!-- 这里的内容，可以自定义 --> <dl> <dt>港澳台</dt> <dd> <a href="">香港</a> </dd> </dl> </div> </li> <!-- 第二组菜单 --> <li> <dl> <dt>港澳台 国内</dt> <dd> <em>香港</em> <em>澳门</em> </dd> </dl> <div class="menu"> <dl> <dt>港澳台</dt> <dd> <a href="#">香港</a> <a href="#">澳门</a> </dd> </dl> </div> </li> <!-- 第三组菜单 --> <li> <dl> 第三组菜单 </dl> <div class="menu"> 第三组菜单子菜单 </div> </li> <!-- 第四组菜单 --> <li> <dl> 第四组菜单 </dl> <div class="menu"> 第四组菜单子菜单 </div> </li> <!-- 第五组菜单 --> <li> <dl> 第五组菜单 </dl> <div class="menu"> 第五组菜单子菜单 </div> </li> <!-- 第六组 --> <li> <dl> 第六组菜单 </dl> <div class="menu"> 第六组菜单子菜单 </div> </li> </ul> </nav> </div> </section> </body> </html>二级菜单的具体内容，老师没有写，同学自己补齐。
效果如下（点开查看gif图）：
祝学习愉快！
0
相似问题