粘性页脚引导程序 3 - CSS (1)

📌 相关文章

📜 粘性页脚引导程序 3 - CSS (1)

📅 最后修改于: 2023-12-03 14:56:45.385000 🧑 作者: Mango

粘性页脚引导程序 3 - CSS

本程序是一款使用CSS实现的粘性页脚引导程序，能够在页面滚动时保持页脚在视图底部并保持可见。本程序具有以下特点：

通过CSS实现，无需JavaScript
可定制粘性页脚的颜色、高度和背景色
适用于移动端和PC端网页

使用方法

将下列代码添加至HTML中的head标签内

<style>
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
}
</style>

在HTML中添加一个footer标签，用于显示粘性页脚，例如：

<footer>
  这里是页脚内容
</footer>

根据需要修改CSS样式中的height、background-color和color属性。

position: fixed用于将页脚固定在视口底部；left: 0和width: 100%用于水平铺满整个视口；bottom: 0用于将页脚置于页面底部。其余样式可根据具体需求进行修改。

示例

这是一个简单的示例，演示如何使用本程序。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>粘性页脚引导程序 3 - CSS 示例</title>
  <style>
    footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 50px;
      background-color: #333;
      color: #fff;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>这是一个示例页面</h1>
  <p>这里是页面内容</p>
  <p>这里是页面内容</p>
  <p>这里是页面内容</p>
  <footer>
    这里是页脚内容
  </footer>
</body>
</html>

结论

这款粘性页脚引导程序的实现方式简单、方便，只需使用CSS即可，在提高用户体验的同时为网页添加一份美观的设计。