体系课

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

leftbtn盒子显示不出来

来源：2-9 大Banner的布局（2）

丶墨弈丶

2022-05-20 10:42:52

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

<meta name="keywords" content="机票，酒店，旅游攻略，签证，出国，自由行" />

<meta name="description" content="慕云游商城有10多年旅游行业经验，为您提供全方位旅游服务" />

<link rel="stylesheet" type="text/css" href="css/reset.css" />

<link rel="stylesheet" type="text/css" href="css/base.css" />

<link rel="stylesheet" type="text/css" href="css/css.css" />

</head>

<body>

<header class="site-head">

<div class="topbar">

<div class="center-wrap">

<nav class="shortcut-links">

<ul>

<li>

<a href=""></a>

</li>

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

<a href="" class="btn iconfont"></a>

</div>

</div>

</div>

</header>

<!-- banner -->

<section class="banner">

<img src="images/banner1.jpg">

<div class="center-wrap">

<a href="" class="leftbtn"></a>

<a href="" class="rightbtn"></a>

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

min-width: 1152px;

height: 150px;

}


.site-head .topbar {

min-width: 1152px;

height: 32px;

background-color: #2A2A2A;

color: white;

line-height: 32px;

}


.site-head .topbar a {

color: white;

}


.site-head .topbar .shortcut-links {

float: left;

}


.site-head .topbar .shortcut-links>ul>li {

float: left;

margin-right: 18px;

font-size: 12px;

}


.site-head .topbar .shortcut-links>ul>li.have-menu {

padding-right: 12px;

position: relative;

}


.site-head .topbar .shortcut-links>ul>li.have-menu .arrow {

position: absolute;

right: 0;

top: 50%;

margin-top: -6px;

width: 12px;

height: 12px;

transition: transform .5s ease 0s;

}


.site-head .topbar .shortcut-links>ul>li.have-menu:hover .arrow {

transform: rotate(180deg);

}


.site-head .topbar .shortcut-links>ul>li.have-menu .arrow b {

position: absolute;

left: 3px;

top: 1px;

width: 6px;

height: 6px;

background-color: white;

transform: rotate(45deg);

}


.site-head .topbar .shortcut-links>ul>li.have-menu .arrow i {

position: absolute;

left: 3px;

top: 0px;

width: 6px;

height: 6px;

background-color: #2A2A2A;

transform: rotate(45deg);

}


.site-head .topbar .shortcut-links>ul>li.have-menu .menu {

position: absolute;

top: 32px;

left: 0;

z-index: 999;

/* 隐藏 */

display: none;

padding: 10px;

background: #FFFFFF;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);

}


.site-head .topbar .shortcut-links>ul>li.have-menu .sqmenu {

width: 114px;

}


.site-head .topbar .shortcut-links>ul>li.have-menu .scmenu {

width: 60px;

}


.site-head .topbar .shortcut-links>ul>li.have-menu .jdmsmenu {

width: 48px;

}


/* 触碰显示 */

.site-head .topbar .shortcut-links>ul>li.have-menu:hover .menu {

display: block;

}


.site-head .topbar .shortcut-links>ul>li.have-menu .menu .menu-list li {

height: 20px;

line-height: 20px;

}


.site-head .topbar .shortcut-links>ul>li.have-menu .menu .menu-list a {

font-size: 12px;

color: #1C1F21;

line-height: 20px;

}


.site-head .topbar .shortcut-links>ul>li.have-menu .menu .menu-list a:hover {

color: cyan;

}


.site-head .topbar .topbar-r {

float: right;

width: 225px;

}


.site-head .topbar .topbar-r a,

.site-head .topbar .topbar-r span {

margin-right: 11px;

font-size: 14px;

}


.site-head .topbar .topbar-r a:last-child {

margin-right: 0;

}


.site-head .main-nav {

min-width: 1152px;

height: 40px;

background-color: #20BD9A;

}


.site-head .main-nav ul li {

float: left;

margin-right: 18px;

}


.site-head .main-nav ul .have-menu {

padding-right: 16px;

position: relative;

}


.site-head .main-nav ul li a {

line-height: 40px;

color: #1C1F21;

font-size: 16px;

}


.site-head .main-nav ul li.have-menu::before {

content: '';

position: absolute;

right: 0;

top: 18px;

width: 0px;

height: 0px;

border: 5px solid transparent;

border-bottom: none;

border-top-color: white;

transition: transform .5s ease 0s;

}


.site-head .main-nav ul li.have-menu:hover::before {

transform: rotate(180deg);

}


.site-head .main-nav ul li .menu {

position: absolute;

top: 35px;

left: 0;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);

background-color: white;

padding: 10px;

display: none;

}


.site-head .main-nav ul li:hover .menu {

display: block;

}


.site-head .main-nav ul li .menu dl dd a:hover {

color: aqua;

}


.site-head .main-nav ul li .jjzyxmenu {

width: 150px;

}


.site-head .main-nav ul li .gtymenu {

width: 90px;

}


.site-head .main-nav ul li .ddwlmenu {

width: 190px;

}


.site-head .main-nav ul li .sdlymenu {

width: 160px;

}


.site-head .main-nav ul li .menu dl dt {

font-size: 14px;

font-weight: bold;

}


.site-head .main-nav ul li .menu dl dd a {

font-size: 12px;

color: #1C1F21;

}


.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: 2px;

}


.site-head .header-con .soso-box input {

width: 361px;

height: 28px;

border: 1px solid #20BD9A;

border-radius: 4px 0 0 4px;

/* 取消默认的外线 */

outline: none;

padding-left: 10px;

float: left;

}


.site-head .header-con .soso-box .btn {

display: inline-block;

float: left;

width: 32px;

height: 30px;

background: #20BD9A;

color: white;

text-align: center;

line-height: 30px;

font-size: 20px;

border-radius: 0 4px 4px 0;

}


.banner {

position: relative;

}


.banner img {

width: 100%;

min-width: 1152px;

vertical-align: middle;

}


.banner .banner-nav {

position: absolute;

top: 0;

width: 1152px;

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: aqua;

}


.banner .center-wrap .leftbtn {

position: absolute;

width: 28px;

height: 44px;

background: url(../images/icons.png) no-repeat -21px -94px;

top: 50%;

left: -38px;

margin-top: -22px;

}


写回答

1回答

好帮手慕久久

2022-05-20

同学你好，使用absolute定位的时候，一定要注意元素是相对于谁定位的。左按钮使用了absolute，由于父元素中，只有.banner设置了定位，所以按钮会相对于.banner定位。.banner宽度是100%（全屏的），按钮的left是-38px，即按钮在可视区外面，所以看不见。

实际上，按钮需要相对于.center-wrap定位，而.center-wrap需要居中显示，所以要给.center-wrap设置定位居中：

https://img.mukewang.com/climg/62870473090a2afb07000401.jpg

祝学习愉快！

0

0 学习 · 15276 问题

查看课程

相似问题

请问老师，这里怎么和视频中不一样，在menu里面套一个盒子，这个盒子不是显示在menu的下方，而是显示在上方呢？

回答 2

老师帮我看一下，menu菜单栏下方橙色盒子显示不出来

回答 1

回答 3

老师我菜单栏定位好之后，设置margin发现定位位置有点不对。照说橙色盒子应该在右下角显示呀！

回答 2

老师我给a1绝对定位一个菜单栏，为什么我的橙色盒子没能显示出来呢。

回答 3

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