nav的样式如何共用
来源：3-4 当地玩乐部分开发（1）
qq_慕仰20210716
2022-06-15 22:37:39
问题描述：
老师我这里按照老师说的把机酒自由行.jjzyx改为了。centent-part，反而发现机酒自由行的nav乱了，而当地玩乐nav样式成功了，而且当地玩乐的h2的字体是小的
相关代码：css
/* 主攻的样式表 */
/***************************************header第一部分 */
.site-head {
/* 宽度先不设置 */
height: 150px;
min-width: 1152px;
}
.site-head .topbar {
min-width: 1152px;
height: 32px;
background-color: #2a2a2a;
line-height: 32px;
}
.site-head .topbar .center-wrap a {
color: white;
}
.site-head .topbar .center-wrap .short-links {
float: left;
}
/* 将来某个文字下还会有下拉菜单（ul和li）所以这里要用后代选择器 */
.site-head .topbar .center-wrap .short-links > ul > li {
float: left;
/* 刚刚解释了半天，为什么这里又要用margin呢: */
margin-right: 18px;
font-size: 14px;
}
/* 绝对定位的元素可以漂浮在padding中 */
.site-head .topbar .center-wrap .short-links > ul > li.have-menu {
padding-right: 12px;
position: relative;
}
.site-head .topbar .center-wrap .short-links > ul > li.have-menu .arrow {
width: 9px;
height: 9px;
position: absolute;
top: 11px;
right: 0px;
transition: transform 0.3s ease 0s;
}
.site-head .topbar .center-wrap .short-links > ul > li.have-menu:hover .arrow {
transform: rotate(180deg);
}
.site-head .topbar .center-wrap .short-links > ul > li.have-menu .arrow b {
width: 7px;
height: 7px;
position: absolute;
top: 0.5px;
right: 0px;
background-color: white;
transform: rotate(45deg);
}
.site-head .topbar .center-wrap .short-links > ul > li.have-menu .arrow i {
width: 7px;
height: 7px;
position: absolute;
top: -1px;
right: 0px;
background-color: #2a2a2a;
transform: rotate(45deg);
}
.site-head .topbar .center-wrap .short-links > ul > li.have-menu .menu {
position: absolute;
top: 32px;
left: 0px;
background-color: white;
z-index: 9999;
/* 隐藏 */
display: none;
padding-top: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 121px;
height: 168px;
}
.site-head .topbar .center-wrap .short-links > ul > li.have-menu:hover .menu {
display: block;
}
.site-head .topbar .center-wrap .short-links > ul > li.have-menu .sqmenu {
width: 121px;
height: 168px;
}
.site-head .topbar .center-wrap .short-links > ul > li.have-menu .scmenu {
width: 86px;
height: 185px;
}
.site-head .topbar .center-wrap .short-links > ul > li.have-menu .jdmsmenu {
width: 80px;
height: 65px;
}
.site-head
.topbar
.center-wrap
.short-links
> ul
> li.have-menu
.menu
.menu-list
a {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #1c1f21;
line-height: 10px;
}
.site-head
.topbar
.center-wrap
.short-links
> ul
> li.have-menu
.menu
.menu-list
li {
height: 20px;
padding-left: 10px;
line-height: 21px;
}
.site-head
.topbar
.center-wrap
.short-links
> ul
> li.have-menu
.menu
.menu-list
a:hover {
color: orange;
}
.site-head .topbar .topbar-r {
float: right;
width: 225px;
}
.site-head .topbar .topbar-r span,
.site-head .topbar .topbar-r a {
margin-right: 11px;
font-size: 14px;
color: white;
}
.site-head .topbar .topbar-r a:last-child {
margin-right: 0;
}
/*************************************************header第二部分 */
.site-head .main-nav {
min-width: 1152px;
height: 40px;
background-color: #20bd9a;
}
.site-head .main-nav .center-wrap ul li.have-menu .menu {
position: absolute;
top: 35px;
left: 0;
background-color: bold;
}
.site-head .main-nav ul li {
float: left;
margin-right: 18px;
}
.site-head .main-nav ul li.have-menu {
padding-right: 16px;
position: relative;
}
.site-head .main-nav ul li.have-menu .menu {
position: absolute;
top: 35px;
background-color: white;
display: none;
padding: 4px;
}
.site-head .main-nav ul li.have-menu:hover .menu {
display: block;
}
.site-head .main-nav ul li.have-menu .menu dl dt {
color: #1c1f21;
font-size: 14px;
}
.site-head .main-nav ul li.have-menu .menu dl dd a {
color: #1c1f21;
font-size: 12px;
}
.site-head .main-nav ul li.have-menu .menu dl dd a:hover {
color: orange;
}
.site-head .main-nav ul li.have-menu .jjzyxmenu {
width: 150px;
}
.site-head .main-nav ul li.have-menu .gtymenu {
width: 90px;
}
.site-head .main-nav ul li.have-menu .ddwlmenu {
width: 190px;
}
.site-head .main-nav ul li.have-menu .sdlymenu {
width: 160px;
}
.site-head .main-nav ul li.have-menu::before {
content: "";
position: absolute;
top: 18px;
right: 0;
width: 0px;
height: 0px;
border: 5px solid transparent;
/* 待会儿试试下边这一行 */
border-bottom: none;
/* border-bottom-color:red; */
border-top-color: #ffffff;
transition: transform 0.5s ease 0s;
}
.site-head .main-nav ul li.have-menu:hover::before {
transform: rotate(180deg);
}
.site-head .main-nav ul > li > a {
line-height: 40px;
color: #ffffff;
font-size: 16px;
}
/*********************************************header第三部分 */
.site-head .header-con {
height: 36px;
padding: 21px 0;
}
.site-head .header-con h1 {
float: left;
font-size: 24px;
color: #20bd9a;
line-height: 36px;
font-weight: bold;
}
.site-head .header-con .soso-box {
float: left;
margin-left: 20px;
width: 405px;
height: 30px;
}
.site-head .header-con .soso-box input {
float: left;
width: 361px;
height: 28px;
/* 取消默认的外线（外线是文本框特有的东西。不取消的话选中就会有一圈黑线） */
outline: none;
border: 1px solid #20bd9a;
border-radius: 4px 0 0 4px;
font-size: 14px;
padding-left: 10px;
}
.site-head .header-con .soso-box .btn {
float: left;
width: 32px;
height: 30px;
background-color: #20bd9a;
}
/* *****************************************************banner部分 */
.banner {
position: relative;
}
.banner img {
/* 这里我看上边也都不设置宽，网页先不设置 */
/* width: 1366px; */
/* 设置宽度为浏览器窗口的100% */
width: 100%;
/* 限制最小宽度为1152px */
min-width: 1152px;
height: 420px;
/* 图片可能和盒子底部产生一些缝隙，使用小技巧 */
/* 小技巧：添加后图片不产生缝隙 */
vertical-align: middle;
}
.banner .center-wrap {
width: 1152px;
position: absolute;
top: 0;
left: 50%;
margin-left: -576px;
height: 420px;
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, 0.53);
position: relative;
border-bottom: 1px solid #9e9e9e;
/* box-sizing:border-box属性的作用就是让height属性是盒子的总高度，这种情况，在盒子的高度是百分比写的，但是盒子有边框的时候，此时就要让盒子的边框涵盖在height里面，就要使用box-sizing属性 */
box-sizing: border-box;
}
.banner .center-wrap .banner-nav > ul > li:last-child {
border-bottom: none;
}
.banner .center-wrap .leftbtn {
position: absolute;
top: 50%;
margin-top: -22px;
left: -38px;
width: 28px;
height: 44px;
background: url(./../images/icons.png) no-repeat -21px -94px;
}
.banner .center-wrap .rightbtn {
position: absolute;
top: 50%;
margin-top: -22px;
right: -38px;
width: 28px;
height: 44px;
background-color: #000000;
background: url(./../images/icons.png) no-repeat -21px -29px;
}
.banner .center-wrap .leftbtn:hover,
.banner .center-wrap .rightbtn:hover {
opacity: 0.8;
}
.banner .center-wrap .banner-nav > ul > li dl {
position: absolute;
top: 50%;
margin-top: -24px;
height: 48px;
left: 40px;
color: white;
}
.banner .center-wrap .banner-nav > ul > li dl dt {
font-size: 18px;
line-height: 26px;
height: 26px;
}
.banner .center-wrap .banner-nav > ul > li dl dd {
font-size: 16px;
line-height: 22px;
height: 22px;
}
.banner .center-wrap .banner-nav > ul > li:before {
/* 用before充当小图形 */
content: "";
position: absolute;
top: 50%;
left: 10px;
background-image: url(./../images/icons.png);
}
.banner .center-wrap .banner-nav > ul > li.hot:before {
width: 24px;
height: 24px;
margin-top: -12px;
background-position: -29px -399px;
}
.banner .center-wrap .banner-nav > ul > li.hk:before {
width: 24px;
height: 24px;
margin-top: -12px;
background-position: -28px -217px;
}
.banner .center-wrap .banner-nav > ul > li.jp:before {
width: 24px;
height: 24px;
margin-top: -12px;
left: 7px;
background-position: -25px -171px;
}
.banner .center-wrap .banner-nav > ul > li.as:before {
width: 24px;
height: 24px;
margin-top: -12px;
background-position: -28px -262px;
}
.banner .center-wrap .banner-nav > ul > li.eu:before {
width: 24px;
height: 24px;
margin-top: -12px;
background-position: -29px -351px;
}
.banner .center-wrap .banner-nav > ul > li.au:before {
width: 24px;
height: 24px;
margin-top: -12px;
background-position: -28px -305px;
}
.banner .center-wrap .banner-nav {
position: relative;
}
.banner .center-wrap .banner-nav .menus-box .menu {
/* 让menu隐藏 */
display: none;
position: absolute;
top: 0;
left: 296px;
width: 356px;
height: 100%;
background-color: rgba(0, 0, 0, 0.73);
color: white;
padding: 16px;
/* 这里加上padding值后，盒子高度会超出。加上box-sizing属性后，height为100%为盒子总高度，不需要减padding了，因为百分比不能减padding */
box-sizing: border-box;
}
.banner .center-wrap .banner-nav .menus-box .menu dl dd a {
color: white;
}
.banner .center-wrap .banner-nav .menus-box .menu dl {
margin-bottom: 12px;
}
.banner .center-wrap .banner-nav .menus-box .menu dl dt {
line-height: 30px;
font-size: 16px;
}
.banner .center-wrap .banner-nav .menus-box .menu dl dt {
line-height: 22px;
font-size: 15px;
}
.banner .center-wrap .banner-nav .menus-box .current {
display: block;
}
/* *****************************************************热门广告 */
.hot-ads {
margin: 32px 0;
}
.hot-ads ul li {
float: left;
width: 264px;
height: 110px;
margin-right: 32px;
}
.hot-ads ul li:last-child {
margin-right: 0;
}
/* *****************************************************新鲜甩尾 */
.xxsw {
padding: 40px;
height: 698px;
background-color: #f7f7f7;
}
.xxsw .center-wrap .hd {
margin-bottom: 32px;
}
.xxsw .center-wrap .hd h2 {
float: left;
font-size: 36px;
font-weight: bold;
color: #1c1f21;
}
.xxsw .center-wrap .hd em {
float: left;
color: #1c1f21;
/* 微调位置用相对定位 */
position: relative;
top: 23px;
left: 12px;
}
.xxsw .center-wrap ul li {
float: left;
width: 264px;
height: 270px;
margin-right: 32px;
margin-bottom: 32px;
background-color: white;
}
.xxsw .center-wrap ul li:nth-child(4n) {
margin-right: 0;
}
.xxsw .center-wrap ul li:hover {
/* 这时候我们发现第四个和第八个盒子溢出隐藏掉了右边的阴影，所以ul的clearfix去掉先 */
box-shadow: 4px 3px 2px rgba(0, 0, 0, 0.2);
}
.xxsw .center-wrap ul li a .wordbox {
width: 236px;
height: 44px;
font-size: 14px;
color: #1c1f21;
padding: 22px 14px;
}
/* *****************************************************机酒自由行 */
.jjzyx {
height: 698px;
padding-top: 40px;
}
.jjzyx .center-wrap {
/* 这里终于知道为什么背景颜色设置不上去了，因为粉色的盖住了蓝色！！！ */
/* 高是瞎写的，有安全感，写完再删 */
height: 2000px;
/* background-color: gray; */
}
.jjzyx .center-wrap .hd {
height: 54px;
/* background-color: pink; */
}
.content-part h2 {
font-size: 36px;
font-weight: bold;
color: #1c1f21;
}
.jjzyx .center-wrap .hd h2 {
float: left;
width: 180px;
height: 54px;
line-height: 54px;
/* background-color: blue; */
}
.jjzyx .center-wrap .hd em {
float: left;
width: 204px;
height: 18px;
line-height: 18px;
font-size: 12px;
color: #000000;
/* background-color: green; */
position: relative;
top: 30px;
left: 12px;
}
.centent-part .center-wrap .hd nav {
float: right;
width: 464px;
height: 22px;
/* background-color: purple; */
/* 或者不用相对定位微调也可以，用padding-top向下挤就可以 */
position: relative;
top: 50%;
right: 0;
margin-top: -11px;
}
.centent-part .center-wrap .hd nav ul li {
float: left;
/* width: 56px; */
height: 22px;
margin-right: 14px;
}
.centent-part .center-wrap .hd nav ul li:last-child {
margin-right: 0;
}
.centent-part .center-wrap .hd nav ul li a {
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
text-align: center;
line-height: 22px;
}
.centent-part .center-wrap .hd nav ul li.current a {
color: #20bd9a;
border-bottom: 4px solid #20bd9a;
}
.jjzyx .bd {
padding-top: 32px;
}
.jjzyx .bd ul li {
float: left;
margin-right: 32px;
margin-bottom: 32px;
box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.08);
}
.jjzyx .bd ul li:hover {
box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.2);
}
.jjzyx .bd ul li:nth-child(3),
.jjzyx .bd ul li:nth-child(7) {
margin-right: 0;
}
.jjzyx .bd ul li.big-grid {
width: 560px;
height: 270px;
/* background-color: blue; */
}
.jjzyx .bd ul li.big-grid a {
position: relative;
}
.jjzyx .bd ul li.big-grid a em {
/* background-color:pink; */
position: absolute;
top: -59px;
left: 50%;
margin-left: -253px;
width: 508px;
height: 44px;
font-size: 14px;
color: #ffffff;
line-height: 22px;
}
.jjzyx .bd ul li.big-grid a em.tag {
position: absolute;
top: -100px;
left: 253px;
background-color: red;
height: 40px;
width: 74px;
opacity: 0.6;
background: #1c1f21;
font-size: 14px;
color: #ffffff;
text-align: center;
line-height: 40px;
}
.jjzyx .bd ul li.pro-grid {
width: 264px;
height: 270px;
/* background-color: red; */
}
.jjzyx .bd ul li.pro-grid .picbox {
position: relative;
}
.jjzyx .bd ul li.pro-grid .picbox em {
position: absolute;
bottom: 5px;
left: 0;
width: 48px;
height: 22px;
color: white;
opacity: 0.6;
background: #1c1f21;
padding: 9px 16px;
text-align: center;
line-height: 22px;
/* box-sizing: border-box; */
}
.jjzyx .bd ul li.pro-grid .wordbox {
padding: 14px;
font-size: 14px;
color: #1c1f21;
line-height: 22px;
}
.jjzyx .bd ul li.more-grid {
width: 264px;
height: 270px;
background-image: linear-gradient(180deg, #34e3bc 0%, #15af7a 98%);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
position: relative;
color: #ffffff;
}
.jjzyx .bd ul li.more-grid span {
position: absolute;
top: 50%;
left: 50%;
/* background-color: pink; */
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
font-size: 48px;
text-align: center;
line-height: 48px;
}
.jjzyx .bd ul li.more-grid .p1{
text-align: center;
margin-top: 46px;
font-size: 14px;
}
.jjzyx .bd ul li.more-grid .p2{
text-align: center;
margin-top: 100px;
font-size: 14px;
}
/* *****************************************************当地玩乐 */
.ddwl{
padding-top: 40px;
height: 546px;
background-color: #F7F7F7;
}相关代码：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> <!-- 下边两条有效增加搜索引擎权重，content里的逗号中文英文都可以 --> <meta name="keywords" content="机票，酒店，旅游攻略，签证，出国，自由行" /> <meta name="Description" content="暮云游商城有十多年旅游行业经验，为您提供全方位旅游服务" /> <link rel="stylesheet" href="./css/reset.css" /> <link rel="stylesheet" href="./css/base.css" /> <link rel="stylesheet" href="./css/css.css" /> </head> <body> <!-- 通栏有版心：贯穿一个底色，内容居中(大盒子+小盒子) --> <hearer class="site-head"> <!-- ****************************************第一部分 --> <div class="topbar"> <div class="center-wrap"> <nav class="short-links"> <ul> <li> <a href="">目的地</a> </li> <li> <a href="">锦囊</a> </li> <li class="have-menu"> <a href="">社区</a> <!-- 这里的em和b和i标签是随便用的 --> <em class="arrow"> <b></b> <i></i> </em> <div class="menu sqmenu"> <ul class="menu-list"> <li><a href="">旅行论坛</a></li> <li><a href="">旅行专栏</a></li> <li><a href="">旅行问答</a></li> <li><a href="">旅行生活分享平台</a></li> <li><a href="">JNE旅行生活美学</a></li> <li><a href="">Biu伴(原结伴同游)</a></li> <li><a href="">负责任的旅行</a></li> <li><a href="">特别策划</a></li> </ul> </div> </li> <li> <a href="">行程助手</a> </li> <li class="have-menu"> <a href="">商城</a> <em class="arrow"> <b></b> <i></i> </em> <div class="menu scmenu"> <ul class="menu-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="have-menu"> <a href="">酒店·民宿</a> <em class="arrow"> <b></b> <i></i> </em> <div class="menu jdmsmenu"> <ul class="menu-list"> <li><a href="">酒店</a></li> <li><a href="">爱彼迎</a></li> <li><a href="">华人旅馆</a></li> </ul> </div> </li> <li> <a href="">特价酒店</a> </li> </ul> </nav> <div class="topbar-r"> <a href="" class="iconfont"></a> <span>|</span> <a href="" class="iconfont"></a> <a href="" class="iconfont"></a> <a href="" class="iconfont"></a> <a href="">登录</a> <a href="">注册</a> </div> </div> </div> <!-- ****************************************第二部分 --> <nav class="main-nav"> <div class="center-wrap"> <ul> <li class="have-menu"> <a href="">机酒自由行</a> <div class="menu jjzyxmenu"> <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> <li> <a href="">优惠机票</a> </li> <li class="have-menu"> <a href="">跟团游</a> <div class="menu gtymenu"> <dl> <dt>全部</dt> <dd> <a href="#">跟团游</a> <a href="#">半自助游</a> </dd> </dl> </div> </li> <li> <a href="">酒店</a> </li> <li class="have-menu"> <a href="">当地玩乐</a> <div class="menu ddwlmenu"> <dl> <dt>全部</dt> <dd> <a href="#">日游小团</a> <a href="#">深度体验</a> <a href="#">门票票券</a> <a href="#">餐饮美食</a> <a href="#">WiFi电话卡</a> <a href="#">购物</a> <a href="#">交通票券</a> </dd> </dl> </div> </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 class="have-menu"> <a href="">深度旅游</a> <div class="menu sdlymenu"> <dl> <dt>全部</dt> <dd> <a href="#">CityWalk</a> <a href="#">特色长线</a> <a href="#">Q-Home</a> </dd> </dl> </div> </li> <li> <a href="">私人订制</a> </li> </ul> </div> </nav> <!-- ****************************************第三部分: 页面顶部主要内容 --> <div class="header-con"> <div class="center-wrap"> <h1>暮云游商城</h1> <div class="soso-box"> <input type="text", placeholder="查询目的地/酒店/机票攻略"> <a href="" class="btn"></a> </div> </div> </div> </hearer> <!-- 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="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> <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="au"> <dl> <dt>澳新 中东菲</dt> <dd> <em>澳大利亚</em> <em>新西兰</em> <em>迪拜</em> </dd> </dl> </li> </ul> <!-- ****************************************右边 --> <div class="menus-box"> <!-- *****************热门出发地 --> <div class="menu menu1"> <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> </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> <!-- *****************港澳台 --> <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> </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="">City Walk</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="">泰国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> </div> </nav> </section> <!-- 热门广告 --> <section class="hot-ads clearfix"> <div class="center-wrap"> <ul> <li> <a href=""> <img src="./images/small01.png" alt=""> </a> </li> <li> <a href=""> <img src="./images/small02.png" alt=""> </a> </li> <li> <a href=""> <img src="./images/small03.png" alt=""> </a> </li> <li> <a href=""> <img src="./images/small04.png" alt=""> </a> </li> </ul> </div> </section> <!-- 新鲜甩尾 --> <section class="xxsw content-part"> <div class="center-wrap"> <div class="hd clearfix"> <h2>新鲜甩尾</h2> <em>每日不可不看的好货</em> </div> <ul> <li> <a href=""> <div class="picbox"> <img src="./images/xxsw1.png" alt=""> </div> <div class="wordbox"> 北京直飞马尔代夫6-7天往返含税机票(首都航空/售完为止)… </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="./images/xxsw2.png" alt=""> </div> <div class="wordbox"> [甩尾狂欢] 北京/天津直飞日本东京/大阪/冲绳/札幌/福冈4-7天往返含 </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="./images/xxsw3.png" alt=""> </div> <div class="wordbox"> [拒签全退][全国25城联运] 北京往返格鲁吉亚+阿塞拜疆7-30天自由行… </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="./images/xxsw4.png" alt=""> </div> <div class="wordbox"> [樱花季] 北京直飞东京/大阪/名古屋/冲绳/札幌/福冈/仙台2-30天往返 </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="./images/xxsw5.png" alt=""> </div> <div class="wordbox"> [品质小团/快速确认] 新西兰福克斯冰川直升机观光+冰川徒步（提供… </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="./images/xxsw6.png" alt=""> </div> <div class="wordbox"> [北欧破冰船] 芬兰+瑞典极地探险号破冰船活动+冰上漂浮+瑞典小… </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="./images/xxsw7.png" alt=""> </div> <div class="wordbox"> [指定班期特惠][全程中文伴游] 摩洛哥全景深度10日游（卡萨进出… </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="./images/xxsw8.png" alt=""> </div> <div class="wordbox"> 马来西亚天空之镜+河口赏鹰+夜游萤火虫+寻找蓝眼泪（马来西亚瓜拉雪… </div> </a> </li> </ul> </div> </section> <!-- 机酒自由行 --> <section class="jjzyx content-part"> <div class="center-wrap"> <div class="hd clearfix"><!--内部有浮动就要清除--> <h2>机酒自由行</h2> <em>挑选全球机票、酒店、游轮等旅行产品</em> <nav> <ul> <li class="current"><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> </nav> </div> <div class="bd"> <ul> <li class="big-grid"> <a href=""> <img src="./images/机酒配图01.png" alt=""> <em class="tag">机票</em> <em> [樱花季]天津直飞东京/大阪/名古屋/冲绳/札幌2-30天往返</br> 含税机票【甩尾/多团期】 </em> </a> </li> <li class="pro-grid"> <a href=""> <div class="picbox"> <img src="./images/机酒配图02.png" alt=""> <em>跟团游</em> </div> <div class="wordbox"> 北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票（赠送旅游意外险… </div> </a> </li> <li class="pro-grid"> <a href=""> <div class="picbox"> <img src="./images/机酒配图03.png" alt=""> <em>机票</em> </div> <div class="wordbox"> 北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票(赠送旅游意外险… </div> </a> </li> <li class="pro-grid"> <a href=""> <div class="picbox"> <img src="./images/机酒配图04.png" alt=""> <em>机票</em> </div> <div class="wordbox"> [樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返… </div> </a> </li> <li class="pro-grid"> <a href=""> <div class="picbox"> <img src="./images/机酒配图05.png" alt=""> <em>机票</em> </div> <div class="wordbox"> 杭州/上海/宁波/义乌直飞越南芽庄/岘港4-6天往返含税机票(20KG行… </div> </a> </li> <li class="pro-grid"> <a href=""> <div class="picbox"> <img src="./images/机酒配图06.png" alt=""> <em>机票</em> </div> <div class="wordbox"> [赠自由行礼包] 上海/杭州/南京/合肥/宁波/徐州直飞日本东京/大阪… </div> </a> </li> <li class="more-grid"> <p class="p1">查看更多<br> 机酒自由行产品</p> <span class="iconfont"></span> <p class="p2">机票 | 酒店 | 机+酒 | 邮轮</p> </li> </ul> </div> </div> </section> <!-- 当地玩乐 --> <section class="ddwl centent-part"> <div class="center-wrap"> <div class="hd"> <h2>当地玩乐</h2> <em>像当地人一样，体验本土的吃喝玩乐</em> <nav> <ul> <li class="current"><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> </nav> </div> </div> </section> </body> </html>
写回答
1回答
-
同学你好，问题解答如下：
1、当地玩乐添加的类名书写有误，应该是content-part。建议修改：
2、css代码并没有统一设置nav的样式，建议添加上，示例：
修改后的效果如下：
祝学习愉快~
1
相似问题