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

时间：2016-07-21 13:02:24

标签： html css footer sticky-footer

所以我遇到了一个我无法在互联网上找到的问题。 我想创建一个页脚，就像你在所有专业网站上看到的那样，链接，版权资料等。就像我们在stackoverflow下面的那个。 我想也许可以创建它像我的导航栏（见下文），但这似乎并不适合我。 我如何想要页脚：一个细条（不薄），你需要的基本链接（隐私政策，网站地图等），下面的一段文字，如版权2016或类似的东西，当然，我希望它留在页面的底部，我想我已经完成了。 希望你能理解我的要求。

提前致谢

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

好的，所以我设法弄清楚如何得到我想要的东西。 我基本上开始再次研究整个display:的东西是如何工作以更好地理解的。 我做的是： 首先创建3个div（页脚，页脚链接和版权）。有了这3个div，我为每个div创建了不同颜色的边框，这样我就可以看到每个div在我弄乱display:之后的变化。最后通过正确的边距和填充来获得我想要的布局。我不得不研究脚部贴在底部的位置。我使用position: absolute;使用bottom:0;将其向下推并使用左右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>
</footer>


</div>	
</body>

</html>

答案 1 :(得分：0)

从页脚中删除position:absolute; 

.footerLinks ul {
    display: inline-block;
}

.footerLinks ul li {
    display: inline-block;
}

.footerLinks {
    float: right;
}

.copyright {
    float: left;
}

答案 2 :(得分：0)

希望这涵盖问题

＆＃13;
＆＃13; 
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: 40px;
  background: #6cf;
  background: red;
}
.footer ul{
  display: inline-block;
  }
.footerLinks ul li {
    display: inline-block;
}

.footerLinks {
    float: right;
}

.copyright {
    float: left;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：-1)

从页脚列表中移除样式，从链接中删除文本并更改页脚高度。同时浮动列表项并添加一些边距。它并不完美，但您可以根据自己的需求和偏好进行调整。

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%;
  background: #6cf;
  background: red;
}
footer .footerLinks ul{
  list-style-type: none;  
  padding-bottom:5px;
}
footer .footerLinks ul li{  
   float: left;
}
footer .footerLinks ul li a{ 
    padding: 16px;
    text-decoration: none;
}
<!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>

相关问题
最新问题