校园网开发问题
<!DOCTYPE html>
<html>
<head>
<title>校园网首页</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="auth">
<ul>
<li class="auth1"><a href="#">CONTACT</a></li>
<li class="auth1"><a href="#">EVENTS</a></li>
<li class="auth1"><a href="#">GALLERY</a></li>
<li class="auth1"><a href="#">FACULTY</a></li>
<li class="auth1"><a href="#">ABOUT</a></li>
<li class="auth1"><a href="#">HOME</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="banner3">
<img src="images/banner3.jpg" >
</div>
</div>
<div class="ABOUT"></div>
<div class="GALLERY"></div>
<div class="footer"></div>
</body>
</html>
问题描述：
如何让banner区的图片接在顶部图片之下显示，不是顶部盖在banner图片之上，将banner图片width：100%之后，下面还有横向滚动条。
相关截图：
17
收起
正在回答
2回答
同学你好，
1、导航栏应该固定在页面的顶部，不随页面滚动。建议设置一下top值。
参考代码如下：
2、banner区应该设置margin-top值，并设置banner区中图片的宽度为100%，如下：
修改后的css代码如下：
*{
padding:0px;
margin:0px;
font-family:微软雅黑;
}
.header{
/*border:1px solid black;*/
background-color:#07cbc9;
width:100%;
float:left;
position:fixed;
z-index:100;
top: 0px;
}
.header .logo{
margin-left:100px;
margin-top: 5px;
position:relative;
float:left;
}
.header .auth{
float:right;
margin-right: 70px;
}
.header .auth ul{
text-align: center;
}
.header .auth ul li{
/*border:1px solid black;*/
width:85px;
height:60px;
line-height:60px;
list-style:none;
float:right;
position:relative;
}
.header .auth1:hover{
background-color:#000;
}
a{
text-decoration:none;
}
.banner{
margin-top: 60px;
}
.banner .banner3 img{
width: 100%;
}
.banner .img-banner{
width:20px;
}
.banner .div1{
width:500px;
position: absolute;
top:350px;
margin-top: -150px;
right:50%;
margin-right: -250px;
text-align: center;
}
.banner .div1 input[type="text"]{
color:#bdbdbd;
width:97%;
padding:10px;
margin:10px;
background-color:transparent;
border:2px solid #07cbc9;
}
.banner .div1 input[type="texteara"]{
color:#bdbdbd;
width:97%;
padding:10px;
margin:10px;
height:50px;
background-color:transparent;
border:2px solid #07cbc9;
}
.banner .div1 input[type="button"]{
color:#bdbdbd;
padding:10px;
margin:10px;
background-color:transparent;
border:2px solid #07cbc9;
cursor:pointer;
}
.ABOUT .about{
margin-top:20px;
text-align: center;
}
.ABOUT .about span{
border-bottom: 2px solid #07cbc9;
}
.ABOUT p{
/*border:2px solid red;*/
width:500px;
text-align:center;
margin:10px auto 0px auto;
}
.ABOUT .img-about{
border:2px solid red;
float:left;
margin: 0px auto;
}
.ABOUT .div2{
float:right;
border:2px solid #07cbc9;
margin-left: 25px;
width:200px;
height:150px;
}
.ABOUT .div2 h1{
margin:15% 25% 0 25%;
}
.ABOUT .div2 span{
border-bottom: 3px solid #07cbc9;
}
.ABOUT .div2 h5{
margin:10% 0 0 35%;
}html代码如下：
<!DOCTYPE html> <html> <head> <title>校园网首页</title> <link rel="stylesheet" type="text/css" href="css/a2.css"> </head> <body> <div class="header"> <div class="logo"> <img src="images/logo.png"> </div> <div class="auth"> <ul> <li class="auth1"><a href="#">CONTACT</a></li> <li class="auth1"><a href="#">EVENTS</a></li> <li class="auth1"><a href="#">GALLERY</a></li> <li class="auth1"><a href="#">FACULTY</a></li> <li class="auth1"><a href="#">ABOUT</a></li> <li class="auth1"><a href="#">HOME</a></li> </ul> </div> </div> <div class="banner"> <div class="banner3"> <img src="images/banner3.jpg"> </div> </div> <div class="ABOUT"></div> <div class="GALLERY"></div> <div class="footer"></div> </body> </html>
祝学习愉快~
java工程师2020版
- 参与学习 人
- 提交作业 9401 份
- 解答问题 16556 个
综合就业常年第一，编程排行常年霸榜，无需脱产即可学习，北上广深月薪过万 无论你是未就业的学生还是想转行的在职人员，不需要基础，只要你有梦想，想高薪
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星