请问老师为什么我的盒子位置不对
来源：2-8 大Banner的布局（1）
Swan不是HeySwan
2020-11-20 21:15:18
为什么我的没有压盖
在这里输入代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>慕云游</title>
<meta name="keywords" content="机票，酒店，旅游攻略，签证，出国，自由行">
<meta name="Description" content="慕云游商城有十多年旅游行业经验，为您提供全方位旅游服务">
<link rel="stylesheet" href="myy.css">
<link rel="stylesheet" href="cssbeas.css">
<link rel="stylesheet" href="ce.css">
</head>
<body>
<header class="site-head">
<div class="topbar">
<div class="centent-wrap">
<nav class="shortcur-links">
<ul>
<li>
<a href="">目的地</a>
</li>
<li>
<a href="">锦囊</a>
</li>
<li class="have-menu">
<a href="">社区</a>
<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="">JEN旅行生活美学</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="nar-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="centent-wrap">
<ul>
<li class="have-main">
<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-main">
<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-main">
<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-main">
<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="centent-wrap">
<h1>慕云游商城</h1>
<div class="soso-box">
<input type="text" placeholder="请输入">
<a href="" class="btn iconfont"></a>
</div>
</div>
</div>
</header>
<section class="banner">
<img src="./慕云游项目静态开发/images/banner1.jpg" alt="">
<div class="centent-wrap">
<nav class="banner-nav">
<ul>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>
CSS
.site-head{
height: 32px;
min-width: 1152px;
}
.site-head .topbar{
height: 32px;
background-color: #2A2A2A;
color: white;
line-height: 32px;
}
.site-head .topbar a{
color: white;
}
.site-head .topbar .nar-r{
float: right;
width: 285px;
font-size: 14px;
}
.site-head .topbar .nar-r a, .site-head .topbar .nar-r span{
margin-right: 16px;
}
.site-head .topbar .nar-r a:last-child{
margin-right: 0;
}
.site-head .topbar .shortcur-links{
float: left;
}
.site-head .topbar .shortcur-links ul{
color: white;
}
/* 这段话的意思就是害怕影响后面嵌套标签。＞大于号选择符表示子元素
就表示.shortcur-links这个盒子儿子的ul的li标签来浮动
*/
.site-head .topbar .shortcur-links >ul >li{
float: left;
margin-right: 18px;
font-size: 12px;
}
.site-head .topbar .shortcur-links >ul > .have-menu{
padding-right: 12px;
position: relative;
}
.site-head .topbar .shortcur-links >ul > .have-menu .arrow{
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
transition: transform .2s ease 0s;
}
.site-head .topbar .shortcur-links >ul > .have-menu .arrow b{
position: absolute;
width: 6px;
height: 6px;
left: 3px;
top: 2.5px;
background-color: white;
transform: rotate(45deg);
}
.site-head .topbar .shortcur-links >ul > .have-menu .arrow i{
position: absolute;
width: 6px;
height: 6px;
left: 3px;
top: 1px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
.site-head .topbar .shortcur-links >ul > .have-menu:hover .arrow {
transform: rotate(180deg);
}
.main-nav{
height: 40px;
background-color: #20BD9A;
}
.main-nav ul li {
float: left;
margin-left: 18px;
}
.main-nav ul li:nth-child(1){
margin-left: 0;
}
.main-nav ul li a{
line-height: 40px;
color: white;
font-size: 16px;
}
.main-nav ul li.have-main{
padding-right: 16px;
position: relative;
}
.main-nav ul li.have-main::before{
content: '';
position: absolute;
right: 0;
top: 25px;
margin-top: -8px;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: white;
transition: transform .3s ease 0s;
}
.main-nav ul li.have-main:hover::before{
transform: rotate(-180deg);
}
.site-head .header-con{
height: 36px;
padding: 21px 0;
}
.site-head .header-con h1{
float: left;
font-size: 24px;
color:#20BD9A ;
font-weight: bold;
line-height: 36px;
}
.site-head .header-con .soso-box{
float: left;
margin-left: 20px;
width: 405px;
padding-top: 6px;
}
.site-head .header-con .soso-box input{
float: left;
width: 361px;
height: 20px;
border: 1px solid #20BD9A;
border-radius: 4px 0 0 4px;
outline: none;
font-size: 14px;
margin-left: 10px;
}
.site-head .header-con .soso-box .btn{
float: left;
color: white;
width: 32px;
height: 22px;
background-color: #20BD9A;
text-align: center;
line-height: 22px;
font-size: 18px;
}
.site-head .topbar .shortcur-links >ul > li.have-menu .menu{
position: absolute;
top: 30px;
left: 0;
padding-top: 4px;
background-color: white;
z-index: 9999;
display: none;
box-shadow: 0 4px 8px 0 rgba(0, 0,0, 0.20);
}
.site-head .topbar .shortcur-links >ul > li.have-menu:hover .menu{
display: block;
}
.site-head .topbar .shortcur-links >ul > li.have-menu .sqmenu {
width: 110px;
}
.site-head .topbar .shortcur-links >ul > li.have-menu .scmenu{
width: 80px;
}
.site-head .topbar .shortcur-links >ul > li.have-menu .jdmsmenu{
width: 80px;
}
.site-head .topbar .shortcur-links >ul > li.have-menu .menu .menu-list a{
font-size: 12px;
color: #1C1F21;
line-height: 20px;
}
.site-head .topbar .shortcur-links >ul > li.have-menu .menu .menu-list a:hover{
color: orange;
}
.site-head .main-nav .menu{
position: absolute;
top: 35px;
left: 0;
background-color: white;
display: none;
}
.site-head .main-nav ul li:hover .menu{
display: block;
}
.site-head .main-nav .menu dl dd a{
color: #1C1F21;
font-size: 12px;
line-height: 20px;
}
.site-head .main-nav ul li.menu .jjzyxmenu{
width: 150px;
}
.site-head .main-nav ul li.menu .gtymenu{
width: 90px;
}
.site-head .main-nav ul li.menu .ddwlmenu{
width: 190px;
}
.site-head .main-nav ul li.menu .sdlymenu{
width: 160px;
}
.site-head .main-nav ul li .menu dl dd a:hover{
color: orange;
}
.banner{
position: relative;
}
.banner img{
min-width: 1152px;
width: 100%;
}
.banner .banner-nav{
position: absolute;
top: 0;
left: 0;
width: 1152px;
left: 50%;
margin-left: -576px;
height: 100px;
background-color: orange;
}
，可通过选择【代码语言】突出显示
1回答
-
同学你好，因为顶部.site-head元素的高度设置的值太小了，导致效果不对。建议调整.site-head高度，让其包裹所有的内容。
祝学习愉快~
0
相似问题