正文底部的页脚 - CSS

如果你想在你的网站上添加一个漂亮的页脚，这里提供了一些CSS技巧。页脚是网站中经常会被忽略的重要元素，它可以为你的网站增添美观并提供有用的信息。此外，有一个好页面底部的页脚可以提高用户体验。

1. 创建一个基本的页脚

首先，我们要创建一个基本的页脚。一个基本的页脚由几个组成部分组成，如版权信息和一个包含有用链接的列表。当然，这只是一个基本的页脚，你可以更改它以匹配你的网站风格。下面是一个基本的页脚HTML结构：

<footer>
  <div class="container">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <div class="copy">&copy; 2021 Your Name</div>
  </div>
</footer>

我们会使用一个带有类.container的div，它将容纳我们的链接列表和版权信息。链接列表是一个无序列表，使用<ul>标签模拟，每个链接是一个列表项，并使用<li>标签包裹链接。版权信息包含在一个带有类.copy的<div>中。

接下来我们要使用CSS来美化我们的基本页脚。

2. 样式化基本页脚

首先让我们通过添加一些样式来调整footer元素。

footer {
  padding: 30px 0;
  background-color: #f4f4f4;
  color: #555;
  font-size: 16px;
}

这段CSS代码添加了一个背景色和一个内边距，以及一些基本颜色和字体大小。

现在让我们来为div.container添加一些样式，使我们的页脚看起来更好看。

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

这段CSS代码使我们的容器成为一个弹性盒子，并且在容器内部分散布置子元素。此外，它还将容器的max-width属性设置为800px，将容器居中在页面上。

3. 样式化链接列表

我们要将链接列表变成一个漂亮的水平导航，让它在容器的左侧显示。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

ul li {
  margin-right: 20px;
}

ul li:last-child {
  margin-right: 0;
}

这段CSS代码使用flex布局将链接排列为水平行，并移除了所有列表的默认样式。margin-right属性用于间距，而ul li:last-child选择器用于去除最后一个列表项的间距。

我们还可以为链接添加一些样式，使其看起来更好看。

a {
  color: #555;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #222;
}

这段CSS代码将链接颜色设置为与容器文本颜色相同，并将它们的text-decoration属性设置为none，这样它们就不会有下划线。font-weight规则将使链接看起来更加粗体，而当用户将鼠标悬停在链接上时，它们会变更颜色。

4. 样式化版权信息

我们的版权信息位于容器右侧，我们必须使用CSS来将其调整到正确的位置。

.copy {
  font-size: 14px;
}

这段CSS代码添加了一个字体大小规则，使我们的版权信息看起来比文本小一些。

结论

这个简单的CSS教程教你如何创建一个漂亮的网站页脚。我们首先创建了一个基本的页脚结构，然后样式化了它的不同部分，使它更具吸引力。 你可以将这些技巧应用到你的网站上，并根据需要进行定制化。现在你已经创建了一个漂亮的页脚，它可以与你的网站的主体内容相辅相成，提升用户体验。

以上是关于如何创建正文底部的页脚的CSS教程。