老师，请您帮忙看一下我的宣传图片上的leftbtn按钮盒子为什么会没有效果呢
来源：1-1 课程简介
慕粉1924517932
2022-03-09 20:08:57
问题描述：
老师，请您帮忙看一下我的宣传图片上的leftbtn按钮盒子为什么会没有效果呢？
相关代码：HTML5
<!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"> <meta name="keywords" content="机票，酒店，旅游攻略，签证，出国，自由行"> <meta name="Description" content="慕云游拥有10多年的旅游经验，可以为您提供全方位的旅游服务"> <title>慕云游-商城，机票，酒店，旅游攻略</title> <link rel="stylesheet" href="css/css.css"> <link rel="stylesheet" href="css/reset.css"> </head> <body> <!-- 页首顶部大盒子 --> <header class="top-box"> <!-- 深色盒子 --> <div class="dark-box"> <!-- 深色盒子版心 --> <div class="core"> <ul> <li> <a href="javascript:;">目的地</a> </li> <li> <a href="javascript:;">锦囊</a> </li> <li class="cli"> <a href="javascript:;">社区</a> <em class="away"> <i></i> <b></b> </em> <div class="menus sqmenus"> <ul class="menus-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="javascript:;">行程助手</a> </li> <li class="cli"> <a href="javascript:;">商城</a> <em class="away"> <i></i> <b></b> </em> <div class="menut sqmenut"> <ul class="menut-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="cli"> <a href="javascript:;">酒店·民宿</a> <em class="away"> <i></i> <b></b> </em> <div class="menur jdmenur"> <ul class="menur-list"> <li><a href="#">酒店</a></li> <li><a href="#">爱彼迎</a></li> <li><a href="#">华人旅馆</a></li> </ul> </div> </li> <li> <a href="javascript:;">特价酒店</a> </li> </ul> </div> <div class="right-layout"> <ul> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/fangdajing.png"> </a> </li> <li class="lis"> <a href="javascript:;"> <p></p> </a> </li> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/qq-fill.png"> </a> </li> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/xinlangweibo.png"> </a> </li> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/weixin.png"> </a> </li> <li> <a href="javascript:;"> <p>注册</p> </a> </li> <li> <a href="javascript:;"> <p>登录</p> </a> </li> </ul> </div> </div> <!-- 绿色的小盒子 --> <nav class="green-box"> <!-- 绿色盒子的版心 --> <div class="layout"> <ul> <li class="have"> <a href="javascript:;">机酒自由行</a> <p> <b></b> <i></i> </p> <div class="qb qbs"> <dl class="qb-list"> <dt class="lit"><a href="#"><h1>全部</h1></a></dt> <dd><a href="#">自由行</a></dd> <dd><a href="#">优惠机票</a></dd> <dd><a href="#">酒店</a></dd> <dd><a href="#">邮轮</a></dd> <dd><a href="#">定制游</a></dd> <dd><a href="#">马尔代夫</a></dd> <dd><a href="#">海岛游</a></dd> </dl> </div> </li> <li> <a href="javascript:;">优惠机票</a> </li> <li class="have"> <a href="javascript:;">跟团游</a> <p> <b></b> <i></i> </p> <div class="gt gts"> <dl class="gtss"> <dt><a href="#"><h1>全部</h1></a></dt> <dd><a href="#">跟团游</a></dd> <dd><a href="#">半自助游</a></dd> </dl> </div> </li> <li> <a href="javascript:;">酒店</a> </li> <li class="have"> <a href="javascript:;">当地玩乐</a> <p> <b></b> <i></i> </p> <div class="dd"> <dl class="ddwl"> <dt><a href="#"><h1>全部</h1></a></dt> <dd><a href="#">日游小团</a></dd> <dd><a href="#">深度体验</a></dd> <dd><a href="#">门票票券</a></dd> <dd><a href="#">餐饮美食</a></dd> <dd><a href="#">WIFI电话卡</a></dd> <dd><a href="#">购物</a></dd> <dd><a href="#">交通票券</a></dd> </dl> </div> </li> <li> <a href="javascript:;">签证</a> </li> <li> <a href="javascript:;">邮轮</a> </li> <li> <a href="javascript:;">河轮</a> </li> <li> <a href="javascript:;">保险</a> </li> <li> <a href="javascript:;">租车自驾</a> </li> <li class="have"> <a href="javascript:;">深度旅游</a> <p> <b></b> <i></i> </p> <div class="sd"> <dl class="sdly"> <dt><a href="#"><h1>全部</h1></a></dt> <dd><a href="#">City Walk</a></dd> <dd><a href="#">特色长线</a></dd> <dd><a href="#">Q-Home</a></dd> </dl> </div> </li> <li> <a href="javascript:;">私人定制</a> </li> </ul> </div> </nav> <!-- 图片LOGO和搜索框盒子 --> <nav class="logo-box"> <div class="log"> <div class="logo"> <h1>慕云游商城</h1> </div> <div class="Search-box"> <input type="search"> <!-- 放大镜盒子 --> <div class="magnifier"> <img src="image/icon_x2vd2ugr8r/fangdajing.png"width="20px"height="20px"> </div> </div> </div> </nav> </header> <!-- 宣传图片 --> <section class="banner"> <img src="image/banner1.jpg"> <div class="center-warp"> <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>
相关代码：css3
@font-face{
font-family: "pingFangSCRegular";
src:url(../font/PingFangSCRegular.ttf)format('truetype');
}
body{
font-family:"pingFangSCRegular";
}
.top-box{
width:100%;
min-width:1152px;
height: 150px;
}
.top-box .dark-box{
width:100%;
height:32px;
position: relative;
background-color: #2a2a2a;
display: block;
}
.top-box .dark-box .core{
width:1152px;
height:32px;
left: 107px;
margin:0 auto;
}
.top-box .dark-box .core ul{
}
.top-box .dark-box .core>ul>li{
float: left;
margin-left: 18px;
text-align: center;
line-height: 32px;
}
.top-box .dark-box .core>ul>li a{
color:white;
}
.top-box .dark-box .core>ul>li.cli{
padding-right: 15px;
position: relative;
}
.top-box .dark-box .core>ul>li.cli>.menus{
background-color: white;
position: absolute;
top:29px;
left:0;
/* 可以压盖住别的内容 */
z-index:9999;
/* 隐藏 */
display: none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
padding:10px;
}
.top-box .dark-box .core>ul>li.cli .sqmenus{
width:110px;
}
.top-box .dark-box .core>ul>li.cli .sqmenus menus-list li{
height:20px;
line-height:20px;
}
.top-box .dark-box .core>ul>li.cli:hover>.menus{
display: block;
}
.top-box .dark-box .core>ul>li.cli .sqmenus .menus-list a{
font-size: 12px;
color:#1C1F21;
line-height: 20px;
}
.top-box .dark-box .core>ul>li.cli .menut{
width:76px;
background-color:white;
position: absolute;
top:30px;
left:0px;
/* 隐藏 */
display: none;
/* 使用z-index:9999;可以使该盒子将别的内容压盖住 */
z-index: 9999;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
padding:10px;
}
.top-box .dark-box .core>ul>li.cli:hover .menut{
/* 一碰就显示 */
display: block;
}
.top-box .dark-box .core>ul>li.cli .menut .sqmenut{
width:76px;
}
.top-box .dark-box .core>ul>li.cli .menut .menut-list a{
font-size: 12px;
color:#1C1F21;
height:20px;
line-height: 20px;
}
.top-box .dark-box .core>ul>li.cli .menur{
width:64px;
position: absolute;
top:30px;
left:40px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
z-index: 9999;
display: none;
}
.top-box .dark-box .core>ul>li.cli:hover .jdmenur{
width:64px;
display: block;
}
.top-box .dark-box .core>ul>li.cli .jdmenur .menur-list a{
font-size: 12px;
height:5px;
line-height:5px;
color:#1C1F21;
}
.top-box .dark-box .core>ul>li.cli .jdmenur .menur-list a:hover{
color:#20BD9A;
}
.top-box .dark-box .core>ul>li.cli .menut .menut-list a:hover{
color:#20BD9A;
}
.top-box .dark-box .core>ul>li.cli .sqmenus .menus-list a:hover{
color:#20BD9A;
}
.top-box .dark-box .core>ul>li.cli .away{
width:12px;
height: 12px;
position:absolute;
top:50%;
right:0px;
margin-top:-6px;
transition:.2s ease 0s;
}
.top-box .dark-box .core>ul>li.cli .away i{
position:absolute;
width:8px;
height:8px;
left:2px;
top:1.5px;
background-color: white;
transform: rotate(45deg);
}
.top-box .dark-box .core>ul>li.cli .away b{
position: absolute;
width:8px;
height:8px;
left:2px;
top:-2px;
transform: rotate(45deg);
background-color:#2a2a2a;
}
.top-box .dark-box .core>ul>li.cli:hover .away{
transform: rotate(180deg);
}
.top-box .dark-box .right-layout{
width:300px;
height:32px;
position: absolute;
right:0px;
bottom:0px;
}
.top-box .dark-box .right-layout>ul>li{
float:left;
margin-right:18px;
line-height: 32px;
}
.top-box .dark-box .right-layout>ul>li>a{
color: white;
}
.top-box .dark-box .right-layout>ul>li>a>img{
width:20px;
height:20px;
line-height: 32px;
padding-top:7px;
}
.top-box .dark-box .right-layout>ul>li.lis p{
width:1px;
height:18px;
position: absolute;
bottom: 4px;
background-color:#D8D8D8;
}
.top-box .dark-box .right-layout>ul>li:nth-child(3){
margin-left: 16px;
}
.top-box .green-box{
height:40px;
background-color: #20BD9A;
}
.top-box .green-box .layout{
width:1115px;
height:20px;
margin:0 auto;
}
.top-box .green-box .layout ul li{
float: left;
margin-right:18px;
position: relative;
}
.top-box .green-box .layout ul li>a{
font-size: 16px;
line-height: 40px;
color: white;
}
.top-box .green-box .layout ul li .qb .qb-list .lit a h1{
float:left;
padding-left: 5px;
margin-right:90px;
font-size: 14px;
font-weight:bold;
}
.top-box .green-box .layout ul li.have{
padding-right: 16px;
}
.top-box .green-box .layout ul li.have p{
width:0px;
height:0px;
border:6px solid transparent;
position: absolute;
right:0px;
top:50%;
margin-top: -3px;
border-top-color:white;
}
.top-box .green-box .layout ul li.have p:hover{
transform: rotate(90deg);
transition: .5s ease 0s;
}
.top-box .green-box .layout ul li.have .qb{
position: absolute;
left:0px;
top:35px;
background-color:white;
z-index:9999;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.20);
display:none;
}
.top-box .green-box .layout ul li.have:hover .qb{
display: block;
}
.top-box .green-box .layout ul li.have .qbs{
width:140px;
}
.top-box .green-box .layout ul li.have .qb .qb-list a{
font-size: 12px;
color:#1C1F21;
}
.top-box .green-box .layout ul li.have .qb .qb-list dd a{
float: left;
margin:5px;
}
.top-box .green-box .layout ul li.have .qb .qb-list a:hover{
color:#20BD9A;
}
.top-box .green-box .layout ul li.have .gt{
width:60px;
background-color: white;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.20);
position: absolute;
left:5px;
top:34px;
z-index:9999;
display: none;
}
.top-box .green-box .layout ul li.have:hover .gt{
display: block;
}
.top-box .green-box .layout ul li.have .gt .gtss a h1{
float: left;
left:0px;
font-size: 14px;
font-weight: bold;
margin-right: 20px;
}
.top-box .green-box .layout ul li.have .gt>dl dd a{
float: left;
margin-right:5px;
font-size: 12px;
}
.top-box .green-box .layout ul li.have .gt>dl dd:hover a{
color:#20BD9A;
}
.top-box .green-box .layout ul li.have .dd{
width:172px;
background-color: white;
position: absolute;
left:0px;
top:35px;
z-index: 9999;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.20);
display: none;
}
.top-box .green-box .layout ul li.have:hover .dd{
display: block;
}
.top-box .green-box .layout ul li.have .dd>.ddwl dt a h1{
font-size:14px;
font-weight: bold;
float: left;
margin-left:5px;
margin-right:100px;
}
.top-box .green-box .layout ul li.have .dd>.ddwl dt a h1:hover{
color:#20BD9A;
}
.top-box .green-box .layout ul li.have .dd>.ddwl dd a{
font-size: 12px;
float: left;
margin-left: 5px;
}
.top-box .green-box .layout ul li.have .dd>.ddwl dd a:hover{
color:#20BD9A;
}
.top-box .green-box .layout ul li.have .sd{
width:118px;
position: absolute;
left:0px;
top:33px;
background-color: white;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.20);
z-index: 9999;
display: none;
}
.top-box .green-box .layout ul li.have:hover .sd{
display: block;
}
.top-box .green-box .layout ul li.have .sd .sdly dt a h1{
font-size: 14px;
font-weight: bold;
float: left;
margin-right:90px;
}
.top-box .green-box .layout ul li.have .sd dl dd a{
font-size: 12px;
float:left;
left:5px;
}
.top-box .green-box .layout ul li.have .sd dl a:hover{
color:#20BD9A;
}
.top-box .logo-box{
height:78px;
position: relative;
}
.top-box .logo-box .log{
width:1000px;
height:78px;
position: absolute;
left:50%;
left:190px;
}
.top-box .logo-box .logo{
width:120px;
height:36px;
position: absolute;
}
.top-box .logo-box .logo h1{
font-size: 24px;
color: #20BD9A;
text-align: center;
font-weight:bold;
margin-top: 21px;
}
.top-box .logo-box .Search-box{
width:405px;
height: 30px;
position: absolute;
left:140px;
margin-top: 21px;
}
.top-box .logo-box .Search-box input{
width:349px;
height:30px;
padding-right: 20px;
}
.top-box .logo-box .Search-box .magnifier{
width:30px;
height:30px;
background-color: #20BD9A;
float:right;
margin-right:26px;
position: relative;
}
.top-box .logo-box .Search-box .magnifier img{
position: absolute;
margin-left:5px;
margin-top:5px;
}
.banner{
position: relative;
}
.banner img{
width:100%;
/* 使用一个新属性min-width表示限制属性的最小宽度 */
min-width:1152px;
/* 图片可能和盒子会产生一些缝隙，此时可以运用一些小技巧 */
/* 意思为垂直居中，这是一个小技巧，添加上就不会拥有小缝细了 */
vertical-align: middle;
}
.banner .center-warp .banner-nav{
position: absolute;
width:1152px;
top:0;
left:0;
left:50%;
margin-left:-576px;
/* 注意这里的100%，也很重要如果一旦省去他的height将会是0
它的盒子所设计的16.6%将会失去意义
*/
height:100%;
}
.banner .center-warp .banner-nav{
height:100%;
}
.banner .center-warp .banner-nav ul{
/* 注意这里的100%，也很重要如果一旦省去他的height将会是0
它的盒子所设计的16.6%将会失去意义
*/
height:100%;
}
.banner .center-warp .banner-nav ul li{
height: 16.66%;
width:296px;
background-image: linear-gradient(to bottom,red,blue);
}
.banner .center-warp .leftbtn{
position: absolute;
width:100px;
height:100px;
background-color: orange;
top:50%;
left:-100px;
}写回答
1回答
-
好帮手慕久久
2022-03-10
同学你好，左按钮的样式是生效了的：
之所以看不见（位置不正确），是因为左按钮是相对于banner进行定位的：
banner的宽度是100%（与浏览器窗口一样宽），左按钮left是-100px，即位置在“浏览器窗口外面（可视区外面）”，所以看不到：
左右按钮应该相对于版心center-warp定位，版心应该设置定位并居于页面中心显示，可以参考视频中老师的做法。
祝学习愉快！
0
相似问题