创建边距，同时具有 z 索引和叠加层的背景图像不影响导航栏
我正在尝试创建一个网页，其中左右边距固定为 50px，页面图像有一个索引，使其更接近屏幕，而边距看起来更远。我也想实现像我一样的固定页脚我尝试将左右边距设置为 50px 并将它们设置为固定位置，并尝试使用包装类添加到部分，但都没有产生所需的结果。
下面是我的代码
HTML 代码：
<!DOCTYPE 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="bg1">
<header>
<div id="navbar">
<nav class="nav-list">
<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>
</div>
</header>
</div>
</div>
</section>
<section id="about">
<div class="bg1">
<div class="about_us">
<a name="#about">
<p>
<h1>ABOUT US</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
itaque
minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
rem.
Sit, illum, non.
</p>
</a>
</div>
</div>
</div>
</section>
</html>
缥缈止盈1回答
-
潇湘沐
您没有使用 id 选择器来引用 css 页面中的页脚部分，可能您在 CSS 文件的底部引用了 #fixed 来代替页脚。// 使用这个代替 #footer{ position: fixed; bottom: 0; left: 0; height :50px; width:100%; background-color: transparent;}您在菜单导航、部分和细分 (#portfiolio) 上使用了相同的选择器，您需要学习如何正确创建布局并正确使用 css 选择器。您可以在 udemy 网页设计简介上免费学习。他们的解释非常好，还有 Youtube 上的 Kenvin Powell 介绍 css 课程。快速修复 获取一个父级 div 和 2 个子级<div class="parentDiv"> <div class="bgDiv"></div> <div class="contentDiv></div></div>假设当前屏幕尺寸为 746px，您可以使用这些单位来获得所需的输出.parentDiv{ width: 646px; max-width: 100%; position: relative; max-width: 100%; margin: auto; perspective: 500px; height: 100%; }.bgDiv{ box-shadow: inset -3px -70px 8px 6vw rgba(255, 255, 255, 0.8); background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255, 255, 255, 0.5)), url(https://placebear.com/500/300); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; z-index: -999; background-size: cover;} .contentDiv{ position: absolute; z-index: 999; top: 20px; left: 50px; transform: translate3d(25px, 25px, 50px); padding: 4rem;}
随时随地看视频慕课网APP
相关分类
Html5