老师，我想问下如下图这种情况是为什么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>慕课轮播图</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<!--子菜单 -->
<div class="sub-menu">
<div class="sub-top">
<div class="items1">
<div class="title">前沿技术</div>
<div class="line"></div>
</div>
<div class="items2"></div>
</div>
<div class="sub-buttom"></div>
</div>
<!--菜单栏-->
<div class="menu">
<div class="menu-item">
<a href="">
<span>前沿</span>
<span>/</span>
<span>区块链</span>
<span>/</span>
<span>人工智能</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>前端</span>
<span>/</span>
<span>小程勋</span>
<span>/</span>
<span>JS</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>后端</span>
<span>/</span>
<span>JAVA</span>
<span>/</span>
<span>Python</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>移动</span>
<span>/</span>
<span>Andrion</span>
<span>/</span>
<span>iOS</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>云计算</span>
<span>/</span>
<span>大数据</span>
<span>/</span>
<span>容器</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>运维</span>
<span>/</span>
<span>测试</span>
<span>/</span>
<span>数据库</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>UI设计</span>
<span>/</span>
<span>3D动画</span>
<span>/</span>
<span>游戏</span>
<i></i>
</a>
</div>
</div>
<!--轮播图-->
<div class="slides" id="slides">
<a href="">
<div class="pic-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="pic-slide slide2"></div>
</a>
<a href="">
<div class="pic-slide slide3"></div>
</a>
<a href="">
<div class="pic-slide slide4"></div>
</a>
<a href="">
<div class="pic-slide slide5"></div>
</a>
<a href="">
<div class="pic-slide slide6"></div>
</a>
</div>
<!--上下箭头-->
<a href="javascript:void(0)" class="buttom prev" id="prev"><div></div></a>
<a href="javascript:void(0)" class="buttom next" id="next"><div></div></a>
<!--小圆点-->
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="javascript/script.js"></script>
</body>
</html>
css:
*{
margin:0;
padding:0;
}
@font-face {
font-family:'iconfont';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
url('font/iconfont.woff') format('woff'),
url('font/iconfont.ttf') format('truetype'),
url('font/iconfont.svg#iconfont') format('svg');
}
@font-face {
font-family:'iconfont2';
src: url('JT/iconfont.eot');
src: url('JT/iconfont.eot?#iefix') format('embedded-opentype'),
url('JT/iconfont.woff') format('woff'),
url('JT/iconfont.ttf') format('truetype'),
url('JT/iconfont.svg#iconfont') format('svg');
}
.main{
width:1151px;
height:420px;
margin:20px auto;
/* padding:15px 0 15px 15px;*/
position:relative;
}
.menu{
width:200px;
height:100%;
padding:15px 0 15px 15px;
background-color:rgba(0,0,0,0.8);
border-radius:8px 0 0 8px;
}
.menu-item{
width:100%;
height:60px;
font-size:14px;
line-height:60px;
position:relative;
}
.menu-item a{
color:#ccc;
text-decoration:none;
margin-left:10px;
}
.menu-item a i{
position:absolute;
font-family:"iconfont";
font-size:12px;
right:10px;
font-style:normal;
}
.slides{
width:936px;
height:316px;
position:absolute;
top:0;
left:215px;
overflow:hidden;
border-radius:0 8px 0 0;
}
.pic-slide{
width:936px;
height:316px;
background:no-repeat;
display:none;
}
.slide1{
background-image:url("../imgs/slide1.png");
}
.slide2{
background-image:url("../imgs/slide2.jpg");
}
.slide3{
background-image:url("../imgs/slide3.jpg");
}
.slide4{
background-image:url("../imgs/slide4.jpg");
}
.slide5{
background-image:url("../imgs/slide5.jpg");
}
.slide6{
background-image:url("../imgs/slide6.jpg");
}
.slide-active{
display:block;
}
.buttom{
position:absolute;
width:35px;
height:55px;
line-height:55px;
text-align:center;
left:215px;
top:158px;
/*background:lightpink;*/
margin-top:-25px;
font-family:"iconfont2";
font-size:26px;
text-decoration:none;
color:#fff;
}
.buttom:hover{
background:rgba(1,17,27,0.5);
}
.prev{
border-radius:0 5px 5px 0;
}
.prev div{
transform:rotate(180deg);
}
.next{
left:auto;
right:0;
border-radius:5px 0 0 5px;
}
.dots{
position:absolute;
right:20px;
bottom:124px;
}
.dots span{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
margin-right:5px;
background:rgba(1,17,17,0.3);
box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset;
cursor:pointer;
}
.dots span.active{
background:#ffffff;
box-shadow:0 0 0 1px rgba(1,17,27,0.5) inset;
}
.sub-menu{
position:absolute;
top:-15px;
left:215px;
width:740px;
height:420px;
z-index:1;
}
.sub-menu .sub-top{
width:100%;
height:210px;
background:#fff;
}
.sub-menu .sub-top .items1{
height:30px;
margin:15px 25px;
/*overflow:hidden;*/
/*zoom:1;*/
}
.sub-menu .sub-top .items1 .title{
float:left;
font-size:14px;
font-weight:bold;
color:#FF0000;
height:30px;
line-height:30px;
}
.sub-menu .sub-top .items1 .line{
float:right;
width:622px;
height:15px;
/*line-height:14px;*/
border-bottom:1px solid rgba(1,17,27,0.1);
}0
收起
正在回答
2回答
同学你好，我试了一下，发现同学是整个sub-menu都比导航项向上一点。建议同学调整一下sub-menu的定位。
关于子菜单，建议同学再去学习一下轮播图。
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快！
相似问题
登录后可查看更多问答，登录/注册
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星