导航菜单和页脚不固定
我试图确保我的导航栏和页脚保持固定我已将两个位置设置为固定，并尝试设置导航栏的顶部：0和页脚的底部：0，但我仍然没有得到想要的结果，我尝试操纵和调整div 安排使代码更清晰并使其正常工作，但仍然没有得到预期的结果。请帮助我。
HTML代码
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Archers</title>
<link rel="stylesheet" href="arch.css">
</head>
<body>
<section id="main">
<div class="parentDiv " >
<div class=" contentDiv>
<div id=" menu">
<div id="navbar">
<nav>
<ul class="ul-style ">
<li><a href="#portfolio">OUR PORTFOLIO</a></li>
<li><a href="#process">OUR PROCESS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#main">HOME</a></li>
</ul>
</nav>
</div>
</div>
<div class="mainbg boxshadow"></div>
</div>
</section>
<section id="about" >
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #about"></a>
</div>
<div class="aboutbg boxshadow"></div>
</div>
</section>
<section id=" process">
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #process"></a>
</div>
<div class="processbg boxshadow"></div>
</div>
</section>
<section id=" portfolio">
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #portfolio"></a>
</div>
<div class="portfoliobg boxshadow"></div>
</div>
</section>
<footer>
2020 DeborahPalmTree
</footer>
<script src="index.js" charset="utf-8"></script>
</body>
</html>```
***CSS CODE***
小怪兽爱吃肉浏览 99回答 2
2回答
-
holdtom
您需要应用以下 css，因为您尚未为页脚分配任何 idfooter { position: fixed; bottom: 0; width: 100%; text-align: center; padding: 10px; background-color: #ddd;}如果您可以更改它，我建议您使用下面的 html 结构，因为这样您就可以更好地控制和设计样式<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Archers</title> <style> * { padding: 0; margin: 0;}body { width: 100%; height: 100%;}#navbar { width: 100%; height: calc (100% - 58px); background-color: rgba(219, 219, 219, 1.0); position: fixed;}ul li { list-style: none; float: right; margin: 20px;}li a { text-decoration: none; color: #ffffff;}.bg1 { background-color: rgba(219, 219, 219, 1.0);}.boxshadow { box-shadow: inset 0px 0px 0px 30px rgba(0,0,0,0.5);}.parentDiv { max-width: 100%; perspective: 500px; height: 100%;}.mainbg { width: 100%; height: 100vh; background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255, 255, 255, 0.5)), url('structural-images/img_house_trees.jpg'); background-position: bottom; background-size: cover; background-repeat: no-repeat;}.aboutbg { width: 100%; height: 100vh; background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255, 255, 255, 0.5)),url('structural-images/img_construction_site.jpg'); background-size: cover; background-position: bottom; background-repeat: no-repeat;}.processbg { width: 100%; height: 100vh; background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255, 255, 255, 0.5)),url('structural-images/img_arc_plan.jpg'); background-size: cover; background-position: bottom; background-repeat: no-repeat;}.portfoliobg { width: 100%; height: 100vh; background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255, 255, 255, 0.5)),url('structural-images/img-structure-garden-car-park.jpg'); background-size: cover; background-position: bottom; background-repeat: no-repeat;}#footer { position: fixed; height: 50px; width: 100%; background-color: rgba(219, 219, 219, 1.0);}footer { position: fixed; bottom: 0; width: 100%; text-align: center; padding: 10px; background-color: #ddd;}.main-body { margin: 58px 0 38px 0;} #navbar { width: 100%; background-color: rgb(221, 221, 221); position: fixed; top: 0; left: 0; z-index: 1;} </style></head><body contenteditable="false"> <div id="navbar"> <nav> <ul class="ul-style "> <li><a href="#portfolio">OUR PORTFOLIO</a></li> <li><a href="#process">OUR PROCESS</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#main">HOME</a></li> </ul> </nav> </div> <div class="main-body"> <section id="main"> <div class="parentDiv "> <div class=" contentDiv> <div id=" menu"=""> </div> <div class="mainbg boxshadow"></div> </div> </section> <section id="about"> <div class="parentDiv "> <div class=" contentDiv> <a name=" #about"=""> </div> <div class="aboutbg boxshadow"></div> </div> </section> <section id=" process"> <div class="parentDiv "> <div class=" contentDiv> <a name=" #process"=""> </div> <div class="processbg boxshadow"></div> </div> </section> <section id="portfolio"> <div class="parentDiv "> <div class=" contentDiv> <a name=" #portfolio"=""> </div> <div class="portfoliobg boxshadow"></div> </div> </section> </div> <footer> 2020 DeborahPalmTree </footer> <script src="index.js" charset="utf-8"></script></body></html> -
守着星空守着你
请使用 z-index 和 Overflow 属性与您的固定项目。更新了CSS * { padding: 0; margin: 0; } body { width: 100%; height: 100%; } #navbar { width: 100%; height: calc (100% - 58px); background-color: rgba(219, 219, 219, 1.0); position: fixed; top:0px; left:0px; z-index:10; overflow:hidden; } ul li { list-style: none; float: right; margin: 20px; } li a { text-decoration: none; color: #ffffff; } .bg1 { background-color: rgba(219, 219, 219, 1.0); } .boxshadow { box-shadow: inset 0px 0px 0px 30px rgba(0,0,0,0.5); } .parentDiv { max-width: 100%; perspective: 500px; height: 100%; } .mainbg { width: 100%; height: 100vh; background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255, 255, 255, 0.5)), url('structural-images/img_house_trees.jpg'); background-position: bottom; background-size: cover; background-repeat: no-repeat; } .aboutbg { width: 100%; height: 100vh; background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255, 255, 255, 0.5)),url('structural-images/img_construction_site.jpg'); background-size: cover; background-position: bottom; background-repeat: no-repeat; } .processbg { width: 100%; height: 100vh; background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255, 255, 255, 0.5)),url('structural-images/img_arc_plan.jpg'); background-size: cover; background-position: bottom; background-repeat: no-repeat; } .portfoliobg { width: 100%; height: 100vh; background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255, 255, 255, 0.5)),url('structural-images/img-structure-garden-car-park.jpg'); background-size: cover; background-position: bottom; background-repeat: no-repeat; } #footer { position: fixed; height: 50px; width: 100%; background-color: rgba(219, 219, 219, 1.0);bottom:0px;left:0px;z-index:10;overflow:hidden; }
随时随地看视频慕课网APP
相关分类
Html5