请老师检查优化，谢谢

首页课程实战体系课手记专栏慕课教程

请老师检查优化，谢谢

来源：2-12 项目作业

派大星爱学习

2022-05-04 22:05:24

<!DOCTYPE html>

<head>

<title>慕云游商城 - 机票、酒店、旅游攻略</title>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<b></b>

<i></i>

</em>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

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

</li>

<li>

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

</li>

<li>

<a href="#">Biu伴(原结伴同游)</a>

</li>

<li>

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

</li>

<li>

</li>

</ul>

</div>

</li>

<li>

</li>

<b></b>

<i></i>

</em>

<ul>

<li>

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

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</li>

<b></b>

<i></i>

</em>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</li>

<li>

</li>

</ul>

</nav>

</div>

<ul>

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

<dl>

<dt>

</dt>

<dd>

</dd>

</dl>

</div>

</li>

<li>

</li>

<dl>

<dt>

</dt>

<dd>

</dd>

</dl>

</div>

</li>

<li>

</li>

<dl>

<dt>

</dt>

<dd>

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

</dd>

</dl>

</div>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<dl>

<dt>

</dt>

<dd>

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

</dd>

</dl>

</div>

</li>

<li>

</li>

</ul>

</div>

</nav>

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

</div>

</header>

<li>

</li>

</ul>

<ul>

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

<dd>

</dd>

</dl>

<dd>

<a href="">香港迪士尼</a>

<a href="">香港海洋公园</a>

<a href="">新濠天地水舞间</a>

<a href="">澳门豪华自助</a>

</dd>

</dl>

<dt>国内热门城市</dt>

<dd>

</dd>

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

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

<dd>

</dd>

</dl>

<dd>

<a href="">香港迪士尼</a>

<a href="">香港海洋公园</a>

<a href="">新濠天地水舞间</a>

<a href="">澳门豪华自助</a>

</dd>

</dl>

</div>

</li>

<dd>

</dd>

</dl>

<!-- <div class="menu-macao">

</div> -->

<dd>

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

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

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

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

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

</dd>

</dl>

</div>

</li>

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

<dd>

</dd>

</dl>

<!-- <div class="menu-macao">

</div> -->

<dd>

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

<dd>

<a href="#">美娜多芽庄</a>

<a href="#">巴厘岛SPA</a>

<a href="#">网红漂浮下午茶</a>

<a href="#">珍珠岛游乐园</a>

<a href="#">富国岛浮潜海钓</a>

</dd>

</dl>

<dd>

<a href="#">格鲁吉亚阿塞拜疆</a>

</dd>

</dl>

</div>

</li>

<dd>

</dd>

</dl>

<!-- <div class="menu-macao">

</div> -->

<dd>

<a href="#">雷克雅未克</a>

<a href="#">巴黎迪斯尼</a>

<a href="#">尔阿尔罕布拉宫</a>

<a href="#">埃菲尔铁塔</a>

<a href="#">北欧破冰船</a>

<a href="#">英国天空岛</a>

</dd>

</dl>

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

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

<dd>

</dd>

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

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

</ul>

</nav>

</div>

</section>

</body>

</html>

.site-head {
height: 150px;
}

.site-head .topbra {
min-width: 1792px;
height: 32px;
background-color: #2a2a2a;
line-height: 32px;
}

.site-head .topbra a {
color: #fff;
}

.site-head .topbra .shortcut-links {
float: left;
}

.site-head .topbra .shortcut-links>ul>li {
float: left;
margin-right: 18px;
}

.site-head .topbra .shortcut-links>ul>li.have-menu {
padding-right: 12px;
position: relative;
}

.site-head .topbra .shortcut-links>ul>li.have-menu .menu {
width: 100px;
background-color: #ffffff;
position: absolute;
padding: 10px;
left: 0;
top: 32px;
z-index: 999;
display: none;
}

.site-head .topbra .shortcut-links>ul>li.have-menu .scmenu {
width: 60px;
}

.site-head .topbra .shortcut-links>ul>li.have-menu .jdmenu {
width: 50px;
}

.site-head .topbra .shortcut-links>ul>li.have-menu:hover .menu {
display: block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
}

.site-head .topbra .shortcut-links>ul>li.have-menu .menu ul li {
height: 20px;
line-height: 20px;
}

.site-head .topbra .shortcut-links>ul>li.have-menu .menu ul li a {
font-size: 12px;
line-height: 20px;
color: #2a2a2a;
}

.site-head .topbra .shortcut-links>ul>li.have-menu .menu ul li a:hover {
color: orange;
}

.site-head .topbra .shortcut-links>ul>li.have-menu em {
width: 12px;
height: 12px;
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
transition: transform .4s ease 0s;
}

.site-head .topbra .shortcut-links>ul>li.have-menu:hover em {
transform: rotate(180deg);
}

.site-head .topbra .shortcut-links>ul>li.have-menu em b {
width: 6px;
height: 6px;
background-color: rgb(251, 251, 250);
transform: rotate(45deg);
position: absolute;
left: 3px;
top: 3px;
}

.site-head .topbra .shortcut-links>ul>li.have-menu em i {
width: 6px;
height: 6px;
background-color: #2a2a2a;
transform: rotate(45deg);
position: absolute;
left: 3px;
top: 1px;
}

.site-head nav.main-nav {
min-width: 1792px;
height: 30px;
padding-top: 10px;
background-color: #20BD9A;
}

.site-head nav.main-nav .center-wrap>ul>li {
float: left;
margin-right: 18px;
height: 30px;
}

.site-head nav.main-nav .center-wrap>ul>li a {
color: white;
font-size: 16px;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu {
padding-right: 16px;
position: relative;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu .menu {
width: 160px;
padding: 10px;
background-color: #ffffff;
position: absolute;
left: 0;
top: 30px;
display: none;
z-index: 999;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu .jjzyxmenu {
width: 150px;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu .gtymenu {
width: 90px;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu .ddwlmenu {
width: 158px;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu .sdlymenu {
width: 110px;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu:hover .menu {
display: block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu .menu dt a {
font-size: 14px;
font-weight: bold;
color: #2a2a2a;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu .menu a:hover {
color: orange;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu .menu dd a {
font-size: 12px;
color: #2a2a2a;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu::after {
content: "";
width: 0px;
height: 0px;
position: absolute;
right: 0px;
top: 10px;
border: 5px solid transparent;
border-top-color: white;
border-bottom: none;
transition: transform .4s ease 0s;
}

.site-head nav.main-nav .center-wrap>ul>li.have-menu:hover::after {
transform: rotate(180deg);
}

.site-head .header-con {
min-width: 1792px;
height: 78px;
background-color: white;
}

.site-head .header-con .center-wrap h1 {
height: 36px;
font-size: 24px;
color: #20BD9A;
font-weight: bold;
padding-top: 21px;
float: left;
}

.site-head .header-con .center-wrap .soso-box {
float: left;
width: 405px;
margin: 22px 0 0 20px;
}

.site-head .header-con .center-wrap .soso-box input {
width: 372px;
height: 28px;
border: 1px solid #20BD9A;
border-radius: 3px 0 0 3px;
float: left;
outline: none;
border-right: none;
font-size: 14px;
}

.site-head .header-con .center-wrap .soso-box a.btn {
display: block;
width: 30px;
height: 30px;
background-color: #20BD9A;
float: left;
border-radius: 0px 3px 3px 0;
}

.site-head .topbra-r {
width: 225px;
float: right;
}

.site-head .topbra-r a,
.site-head .topbra-r span {
margin-left: 8px;
color: white;
}

.site-head .header-con .soso-box a.iconfont {
color: #fff;
text-align: center;
line-height: 30px;
font-size: 20px;
}

/* 大banner图片布局 */
.banner {
position: relative;
}

.banner .carousel_list {
width: 600%;
overflow: hidden;
}

.banner .carousel_list li {
float: left;
width: 16.666%;
}

.banner .carousel_list li img {
min-width: 1792px;
width: 100%;
/* 白边的处理，增加上vertical-align属性，图片就不会产生缝隙了 */
vertical-align: middle;
}

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

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

.banner .center-wrap .banner-nav>ul {
height: 100%;
}

.banner .center-wrap .banner-nav>ul>li {
height: 16.66%;
width: 296px;
background-color: rgba(0, 0, 0, .53);
border-bottom: 1px solid #9e9e9e;
/* box-sizing:border-box属性的作用就是让height属性是盒子的总高度，这种情况：在盒子的高度是百分比写的，但是盒子有边框的时候 */
/* 此时就要让盒子的边框涵盖在height里面，就要使用box-sizing属性 */
box-sizing: border-box;
position: relative;

}

/* banner按钮 */
.banner .center-wrap a.leftbtn {
width: 28px;
height: 44px;
background: url("../images/icons.png");
position: absolute;
left: -42px;
top: 50%;
margin-top: -22px;
background-position: -21px -94px;
opacity: 0.8;
}

.banner .center-wrap a.rightbtn {
width: 28px;
height: 44px;
background: url("../images/icons.png");
position: absolute;
right: -42px;
top: 50%;
margin-top: -22px;
background-position: -21px -29px;
opacity: 0.8;
}

.banner .center-wrap a.leftbtn:hover,
.banner .center-wrap a.rightbtn:hover {
opacity: 1;
}

.banner .center-wrap .banner-nav>ul>li.yees {
background-color: rgba(0, 0, 0, .7);
}

.banner .center-wrap .banner-nav>ul>li::before {
content: "";
/* 图片小精灵 小属性层叠大属性*/
background-image: url("../images/icons.png");
position: absolute;
left: 12px;
top: 50%;
}

.banner .center-wrap .banner-nav>ul>li.hot::before {
width: 20px;
height: 17px;
/* 结合background-image属性使用 */
background-position: -30px -400px;
margin-top: -8.5px;
}

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

.banner .center-wrap .banner-nav>ul>li.hgo::before {
width: 22px;
height: 18px;
background-position: -26px -172px;
margin-top: -9px;
}

.banner .center-wrap .banner-nav>ul>li.dny::before {
width: 18px;
height: 18px;
background-position: -28px -263px;
margin-top: -9px;
}

.banner .center-wrap .banner-nav>ul>li.ouz::before {
width: 20px;
height: 14px;
background-position: -28px -351px;
margin-top: -7px;
}

.banner .center-wrap .banner-nav>ul>li.aux::before {
width: 18px;
height: 16px;
background-position: -28px -306px;
margin-top: -8px;
}

.banner .center-wrap .banner-nav>ul>li dl.content1 {
position: absolute;
height: 48px;
top: 50%;
left: 45px;
margin-top: -24px;
}

/* 一级菜单箭头 */
.banner .center-wrap .banner-nav>ul>li::after {
content: "";
width: 10px;
height: 10px;
border-bottom: 1.5px solid white;
border-left: 1.5px solid white;
transform: rotate(227deg);
position: absolute;
right: 20px;
top: 50%;
margin-top: -5px;
}

.banner .center-wrap .banner-nav>ul>li dl.content1 dt {
font-size: 18px;
height: 26px;
color: #fff;
}

.banner .center-wrap .banner-nav>ul>li dl.content1 dd {
font-size: 14px;
height: 22px;
color: #fff;
}

/* 二级菜单 */

.banner .center-wrap .banner-nav>ul>li .men-box {
width: 356px;
height: 550px;
position: absolute;
left: 296px;
padding: 16px;
box-sizing: border-box;
background-color: rgba(0, 0, 0, .4);
}

.banner .center-wrap .banner-nav>ul>li.hot .men-box {
top: 0;
}

.banner .center-wrap .banner-nav>ul>li.gau .men-box {
top: -92px;
}

.banner .center-wrap .banner-nav>ul>li.hgo .men-box {
top: -184px;
}

.banner .center-wrap .banner-nav>ul>li.dny .men-box {
top: -275px;
}

.banner .center-wrap .banner-nav>ul>li.ouz .men-box {
bottom: -92px;
}

.banner .center-wrap .banner-nav>ul>li.aux .men-box {
bottom: -2px;
}

/* 列表字体调整 */
.banner .center-wrap .banner-nav>ul>li .men-box dl.box12 {
margin-bottom: 20px;
}

.banner .center-wrap .banner-nav>ul>li .men-box dl.box12 dt {
font-size: 16px;
color: white;
height: 24px;
font-weight: bold;
}

.banner .center-wrap .banner-nav>ul>li .men-box dl.box12 dd a {
color: white;
font-size: 14px;
}

/* 鼠标移入一级菜单，对应将二级菜单显示出来 */
.banner .center-wrap .banner-nav>ul>li.hot .cur1 {
display: none;
}

.banner .center-wrap .banner-nav>ul>li.hot:hover .cur1 {
display: block;
}

.banner .center-wrap .banner-nav>ul>li.gau .cur2 {
display: none;
}

.banner .center-wrap .banner-nav>ul>li.gau:hover .cur2 {
display: block;
}

.banner .center-wrap .banner-nav>ul>li.hgo .cur3 {
display: none;
}

.banner .center-wrap .banner-nav>ul>li.hgo:hover .cur3 {
display: block;
}

.banner .center-wrap .banner-nav>ul>li.dny .cur4 {
display: none;
}

.banner .center-wrap .banner-nav>ul>li.dny:hover .cur4 {
display: block;
}

.banner .center-wrap .banner-nav>ul>li.ouz .cur5 {
display: none;
}

.banner .center-wrap .banner-nav>ul>li.ouz:hover .cur5 {
display: block;
}

.banner .center-wrap .banner-nav>ul>li.aux .cur6 {
display: none;
}

.banner .center-wrap .banner-nav>ul>li.aux:hover .cur6 {
display: block;
}

.banner .center-wrap .banner-nav>ul>li.hot:hover .men-box {
display: block;
}

写回答

1回答