体系课

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

2-12 项目作业

来源：2-12 项目作业

慕移动4506339

2022-10-28 19:30:34

老师，已修改，请检查

<!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/css.css">
</head>

<body>
<section class="nav-banner">
<img src="images/banner2.jpg">
<div class="center-wrap">
<a href="" class="l-btn"></a>
<a href="" class="r-btn"></a>
<nav>
<ul class="fir-nav">
<li class="hot">
<!-- 一级菜单 -->
<dl class="fir-menu">
<dt>热门出发地</dt>
<dd>
<em>北京</em>
<em>上海</em>
<em>广深</em>
<em>西南</em>
<em>国内其他</em>
</dd>
</dl>
<!-- 二级菜单 -->
<div class="sec-menu hot">
<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>
</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="hk">
<dl class="fir-menu">
<dt>港澳台 国内</dt>
<dd>
<em>香港</em>
<em>澳门</em>
<em>台湾</em>
<em>国内其他</em>
</dd>
</dl>
<!-- 二级菜单 -->
<div class="sec-menu 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="">澳门豪华自助 台北101</a>
<a href="">台湾美食</a>
</dd>
</dl>
</div>

</li>
<li class="jp">
<dl class="fir-menu">
<dt> 日本 韩国</dt>
<dd>
<em>东京</em>
<em>大阪</em>
<em>冲绳</em>
<em>北海道</em>
<em>福冈</em>
</dd>
</dl>
<!-- 二级菜单 -->
<div class="sec-menu 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="">JR Pass</a>
<a href="">米其林餐厅</a>
<a href="">东京迪士尼</a>
<a href="">大阪环球影城</a>
<a href="">冲绳一日游</a>
<a href="">CityWalk</a>
<a href="">西瓜卡</a>
<a href="">京都日游</a>
<a href="">和服体验</a>
<a href="">包车服务</a>
<a href="">富士山日游</a>
</dd>
</dl>

</div>

</li>
<li class="as">
<dl class="fir-menu">
<dt> 东南亚 南亚</dt>
<dd>
<em>泰国</em>
<em>新加坡</em>
<em>马来西亚</em>
<em>马尔代夫</em>
</dd>
</dd>
</dl>
<!-- 二级菜单 -->
<div class="sec-menu 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>
<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 class="fir-menu">
<dt> 欧洲 美洲</dt>
<dd>
<em>英国</em>
<em>法国</em>
<em>美国</em>
<em>加拿大</em>
</dd>
</dl>
<!-- 二级菜单 -->
<div class="sec-menu 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>

</div>

</li>
<li class="au">
<dl class="fir-menu">
<dt> 澳新 中东非</dt>
<dd>
<em>澳大利亚</em>
<em>新西兰</em>
<em>迪拜</em>
</dd>
</dl>
<!-- 二级菜单 -->
<div class="sec-menu 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>
</nav>
</div>
</section>
</body>

</html>
section {
width: 100%;
overflow: hidden;
position: relative;
}


section img {
width: 100%;
vertical-align: middle;
}

section .center-wrap {
position: absolute;
top: 0;
width: 1152px;
left: 50%;
margin-left: -576px;
height: 100%;
}

section .center-wrap a.l-btn {
position: absolute;
width: 28px;
height: 44px;
background: url(../images/icons.png) no-repeat -21px -94px;
top: 50%;
left: -38px;
margin-top: -22px;
}

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

section .center-wrap nav {
height: 100%;
}

section .center-wrap nav>ul {
height: 100%;
color: #fff;
}

section .center-wrap nav>ul>li {
height: 16.6667%;
width: 296px;
background-color: rgba(0, 0, 0, .53);
position: relative;
border-bottom: 1px solid #9e9e9e;
}

section .center-wrap nav>ul>li dl.fir-menu {
position: absolute;
height: 48px;
top: 50%;
margin-top: -24px;
padding-left: 42px;
box-sizing: border-box;
}

section .center-wrap nav>ul>li::before {
content: '';
position: absolute;
left: 10px;
background-image: url(../images/icons.png);
top: 50%;
}

section .center-wrap nav>ul>li.hot::before {
width: 22px;
height: 18px;
background-position: -29px -399px;
margin-top: -9px;
}

section .center-wrap nav>ul>li.hk::before {
width: 18px;
height: 21px;
background-position: -28px -217px;
margin-top: -10.5px;
left: 13px;
}

section .center-wrap nav>ul>li.jp::before {
width: 24px;
height: 19px;
background-position: -25px -171px;
margin-top: -9.5px;
}

section .center-wrap nav>ul>li.as::before {
width: 18px;
height: 19px;
background-position: -28px -262px;
margin-top: -9.5px;
left: 12px;
}

section .center-wrap nav>ul>li.eu::before {
width: 20px;
height: 14px;
background-position: -29px -351px;
margin-top: -7px;
left: 11px;
}

section .center-wrap nav>ul>li.au::before {
width: 18px;
height: 17px;
background-position: -28px -305px;
margin-top: -8.5px;
left: 12px;
}

section .center-wrap nav>ul>li dl.fir-menu dt {
height: 26px;
font-size: 16px;
line-height: 26px;
}

section .center-wrap nav>ul>li dl.fir-menu dd {
height: 22px;
font-size: 12px;
line-height: 22px;
}

section .center-wrap nav>ul>li .sec-menu {
position: relative;
left: 296px;
width: 356px;
height: 600%;
color: #ffffff;
padding: 16px;
box-sizing: border-box;
background-color: rgba(0, 0, 0, .53);
display: none;
}

/* 每个二级菜单的位置 */
section .center-wrap nav>ul>li.hot .sec-menu {
top: 0;
}

section .center-wrap nav>ul>li.hk .sec-menu {
top: -100%;
}

section .center-wrap nav>ul>li.jp .sec-menu {
top: -200%;
}

section .center-wrap nav>ul>li.as .sec-menu {
top: -300%;
}

section .center-wrap nav>ul>li.eu .sec-menu {
top: -400%;
}

section .center-wrap nav>ul>li.au .sec-menu {
top: -500%;
}

section .center-wrap nav>ul>li:hover .sec-menu {
display: block;
}

section .center-wrap nav>ul>li .sec-menu dl {
margin-bottom: 12px;
}

section .center-wrap nav>ul>li .sec-menu dl a {
color: #ffffff
}

section .center-wrap nav>ul>li .sec-menu dt {
font-size: 16px;
line-height: 24px;

}

section .center-wrap nav>ul>li .sec-menu dd {
font-size: 14px;
line-height: 22px;

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

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

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

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

fieldset,
img {
border: 0
}

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

ol,
ul {
list-style: none
}

caption,
th {
text-align: left
}

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

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

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

sup {
vertical-align: text-top
}

sub {
vertical-align: text-bottom
}

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

legend {
color: #000
}

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

a {
text-decoration: none;
}


写回答

1回答

好帮手慕星星

2022-10-29

同学你好，从第二个二级菜单开始，会与顶部有些间隙

https://img.mukewang.com/climg/635c863a0952489507220112.jpg

需要考虑计算精确问题，建议更改top值，参考：

https://img.mukewang.com/climg/635c868609b5594a06060550.jpg

祝学习愉快！

0

0 学习 · 15276 问题

查看课程

相似问题

2-12 项目作业

回答 1

2-12 项目作业

回答 1

项目作业可否重新上传？

回答 1

老师，我把作业压缩后再解压，打开index时就不显示css效果，但打开未经过压缩解压的index是有效果的，这是怎么回事呢？

回答 2

老师,提交的作业可以撤回吗

回答 1

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