极客观点
项目管理
HarmonyOS
所以我遇到了一个问题，我无法在互联网上找到我想要的东西。我想创建一个页脚，就像您在所有专业网站上看到的那样，带有链接、版权信息等。就像我们在 stackoverflow 下方看到的那样。我想也许可以像我的导航栏一样创建它（见下文），但这对我来说似乎没有用。我如何想要页脚：一个细条（不要太细），带有所需的基本链接（隐私政策，站点地图等），下面的一段文字，如版权 2016 或类似的东西，当然，我希望它留在页面底部，我想我已经做到了。希望你明白我的要求。
提前致谢
html {
background: url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
}
nav {
height: 40px;
background: black;
background: rgba(40, 40, 40, 0.7);
}
nav ul {
padding: 0;
width: 400px;
margin: 0 auto;
}
nav ul li {
list-style: none;
font-family: arial;
font-size: 15px;
}
nav ul li a {
text-decoration: none;
float: left;
display: block;
padding: 10px 20px;
color: white;
}
nav ul li a:hover {
color: #2a70d9;
}
.content {
width: 800px;
display: block;
}
.content p {
text-align: center;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #6cf;
background: red;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="indexStyleSheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Project</title>
</head>
<body>
<div class="wrapper">
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Gallery</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</nav>
<div class="content">
<div class="contentLogo">
</div>
<p>blah blah</p>
</div>
<footer>
<div class="footerLinks">
<ul>
<li><a href="#">Privacy Policy</a>
</li>
<li><a href="#">Legal</a>
</li>
<li><a href="#">Site Map</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="copyright">
<p>Copyright © 2016</p>
</div>
</footer>
</div>
</body>
</html>
原文由 Sat10 发布，翻译遵循 CC BY-SA 4.0 许可协议
好的，所以我已经设法弄清楚如何得到我想要的东西。我基本上又开始研究整个
display:东西是如何工作的，以获得更好的理解。我所做的是：首先创建 3 个 div（页脚、页脚链接和版权）。使用这 3 个 div，我为每个 div 在它们周围创建了不同颜色的边框，这样我就可以看到在我弄乱了display:东西之后每个 div 是如何变化的。在最终得到我想要的布局后，有了正确的边距和填充。我不得不研究页脚的定位以粘在底部。我用position: absolute;使用bottom:0;将其向下推并使用左右0，因为页脚的宽度变得非常小，因为我添加了position: absolute;，左右 0 为我纠正了它。完成了，我就是这样做的。查看我的解决方案：