老师..header 部分应该怎么固定
*{
padding: 0px;
margin: 0px;
}
.header{
background-color: #07cbc9;
width: 100%;
height: 80px;
position: fixed;
}
.header .logo{
line-height: 65px;
position: absolute;
left: 5%;
}
.header img{
vertical-align: middle;
}
.menu{
float: right;
margin-right: 5%;
}
.menu div{
float: left;
margin-left: 10px;
line-height: 80px;
height: 100%;
padding-left: 5px;
padding-right: 5px;
}
.menu div:hover{
background-color: black;
}
.menu a{
text-decoration: none;
color: white;
}
.content{
border-top:0px;
/*overflow: hidden;*/
width: 100%;
}
.content .banner>.banner-img>img{
/*position: relative;*/
height: 500px;
width: 100%;
}
.content .banner{
margin-top: 80px;
width: 100%;
height: 500px;
}
.content .banner>.login{
position: relative;
width: 30%;
left: 0px;
right: 0px;
bottom: 0px;
top:0px;
margin:auto;
top: 100px;
}
.content .banner>.login input[type="text"]{
width: 100%;
height: 30px;
background-color:transparent;
margin-top: 15px;
border:2px grey solid;
outline-color:#07cbc9;
}
.content .banner>.login textarea{
height: 60px;
overflow: hidden;
width: 100%;
background-color:transparent;
margin-top: 15px;
border:2px grey solid;
color: grey;
outline-color:#07cbc9;
}
.content .banner>.login input[type="button"]{
width: 30%;
height: 40px;
border: none;
margin-top: 15px;
position: relative;
left:38%;
background-color:transparent;
border:3px grey solid;
color: grey;
outline: none;
}
.content .about .textAbout{
position: absolute;
top: 20px;
width: 100%;
}
.content .about .textAbout h1{
/*text-align: center;*/
}
.content .about{
position: absolute;
background-color: red;
width: 100%;
height: 500px;
}
.content .about .textAbout:after{
content: "";
position: absolute;
background: #07cbc9;
bottom: 0;
margin: 0 auto;
height: 6px;
width: 22px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css\indexCSS.css">
<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images\logo.png">
</div>
<div class="menu">
<div class=""><a href="#">HOME</a></div>
<div class=""><a href="#">ABOUT</a></div>
<div class=""><a href="#">GALLERY</a></div>
<div class=""><a href="#">FACULTY</a></div>
<div class=""><a href="#">FACULTY</a></div>
<div class=""><a href="#">EVENTS</a></div>
<div class=""><a href="#">CONTACT</a></div>
</div>
</div>
<div class="content">
<div class="banner">
<div class="banner-img"><img src="images/banner3.jpg"></div>
<div class="login">
<form>
<input type="text" name="" placeholder=" your Name">
<input type="text" name="" placeholder=" your Phone">
<input type="text" name="" placeholder=" your Email">
<textarea>Write Your Comment Here" multiline</textarea>
<input type="button" name="" value="SEND MESSAGE" id="SEND" onmousemove="clickBtn()" onmouseleave="clickBtn1()">
</form>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
老师header部分怎么固定,设置了margin-top..我的两个div元素一起被破坏...像参考这样的header部分应该如何写...
正在回答
你好！可以为.header添加top属性，设置其为0，这样header的内容就能在顶部固定了。
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星