轮播图的....显示在图片下面而不是上面
轮播图是1920*640，我笔记本1600*900。
这部分按照老师的写法写的，轮播图的....显示在图片的下面了。而且图片不再是640px的高了
注：直接在浏览器中打开老师给的素材页面也是这样。
相关截图：
相关代码：
* {
margin: 0;
padding: 0;
}
html,body{
width:100%;
font-family: "微软雅黑";
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapperBox {
width: 100%;
}
.navBox {
width: 100%;
height: 40px;
background: #00848A;
}
.navBar {
width: 1400px;
min-width: 1400px;
margin: 0 auto;
}
.navBar .logo{
width:34px;
height:31px;
float:left;
}
.logo img {
margin-top: 5px;
}
.navBar nav{
float:right;
}
.navBar nav ul li{
float:left;
}
.navBar nav li a{
display:inline-block;
height:40px;
line-height:40px;
padding:0 10px;
color:#fff;
}
.navBar nav li a:hover{
color:#008484;
background:#fff;
}
/* banner部分 */
.bannerBox {
width: 100%;
height: 640px;
overflow: hidden;
position: relative;
}
.bannerBox li img {
width:100%;
height:100%;
display: none;
}
.bannerBox li .current {
display: block;
}
.bannerBox .dots{
position:absolute;
width:100px;
bottom:60px;
left:50%;
margin-left:-50px;
}
.bannerBox .dots>span{
display:inline-block;
width:11px;
height:11px;
background:#fff;
border-radius:15px;
cursor:pointer;
box-sizing:border-box;
}
.bannerBox .dots>span:not(:last-child){
margin-right:5px;
}
.bannerBox .dots>span.square{
background:#00848A;
}
相关代码：
<!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>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrapperBox">
<!-- 导航 -->
<div class="navBox">
<div class="navBar">
<div class="logo"><img src="/img/icon/logo.png" alt="">
</div>
<nav>
<ul>
<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>
<!-- banner -->
<div class="bannerBox">
<!-- 图片展示 -->
<ul>
<li><img src="/img/banner/banner01.png" class="img current" alt=""></li>
<li><img src="/img/banner/banner02.png" class="img" alt=""></li>
<li><img src="/img/banner/banner03.png" class="img" alt=""></li>
<li><img src="/img/banner/banner04.png" class="img" alt=""></li>
<li><img src="/img/banner/banner05.png" class="img" alt=""></li>
</ul>
<!-- 上一张 下一张 -->
<div class="lf"></div>
<div class="lr"></div>
<!-- 圆点展示 -->
<div class="dots">
<span class="square"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>
42
收起
正在回答
2回答
同学你好，可以将轮播盒子设置的高度去掉
图片会撑起盒子高度，小圆点会根据撑起来的高度定位显示，例如：
祝学习愉快！
零基础 前端工程师体验营
- 参与学习 人
- 解答问题 171 个
0基础跨行跨专业想学习编程却难以抉择技术方向？别慌！本课程专为想了解前端开发的小伙伴量身打造，采用案例驱动与互动式教学，开发倾慕客栈项目的同时，还可以对前端基础知识点进行学习！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星