html - 如何使用 CSS 制作带链接的页脚？

所以我遇到了一个问题，我无法在互联网上找到我想要的东西。我想创建一个页脚，就像您在所有专业网站上看到的那样，带有链接、版权信息等。就像我们在 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>

最佳答案

好的，所以我已经设法弄清楚如何得到我想要的东西。我基本上又开始研究整个 display: 东西是如何工作的，以便更好地理解。我所做的是: 首先创建 3 个 div(页脚、页脚链接和版权)。有了这 3 个 div，我为每个 div 创建了不同颜色的边框，这样我就可以看到在我乱用 display: 东西之后每个 div 是如何变化的。在最终得到我想要的布局后，有了正确的边距和填充。我不得不研究页脚的定位以粘在底部。我使用 position: absolute; 使用 bottom:0; 将其向下推并使用 left 和 right 0 因为页脚的宽度变得非常小，因为我添加了 position: absolute;, 左右0帮我改正了。完成了，我就是这样做的。

查看我的解决方案:

nav {
	height: 40px;
	background: black;
	background: rgba(0, 0, 0, 0.9);
}
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 img {
	max-width: 800px;
	height: auto;
}
.contentLogo{
	width: 900px;
	height: 500px;
	background: rgba(201, 201, 201, 0.35);
	margin: auto;
}
.content p {
	text-align: center;
}

footer {
	background: #333333;
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-family: arial;
}
.footerLinks {
   text-align: center;
}
.footerLinks ul {
	padding: 0;
    list-style-type: none;
    margin: 0;
}
.footerLinks li {
	display: inline;
}
.footerLinks a {
	color: #d9d9d9;
	text-decoration: none;
	font-size: 13px;
}
.copyright {
    text-align: center;
}

.copyright p {
	margin: 0;
	color: #b3b3b3;
	font-size: 11px;
}

<!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="#">Projects</a></li>
  	<li><a href="#">Contact Us</a></li>
	</ul>
</nav>


<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>

关于html - 如何使用 CSS 制作带链接的页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38505021/

html - 如何使用 CSS 制作带链接的页脚？

上一篇：html - CSS:创建 Material 设计阴影问题

下一篇：javascript - JS html css 改css需要了解