当前位置：首页 > CSS

css网页尾部制作

2026-02-26 23:23:31CSS

CSS网页尾部制作方法

基础结构

使用HTML创建基本的页脚结构，通常放置在<body>末尾：

<footer class="site-footer">
  <div class="footer-content">
    <div class="footer-section about">
      <h3>关于我们</h3>
      <p>公司简介文字...</p>
    </div>
    <div class="footer-section links">
      <h3>快速链接</h3>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </div>
    <div class="footer-section contact">
      <h3>联系方式</h3>
      <p>email@example.com</p>
    </div>
  </div>
  <div class="footer-bottom">
    <p>© 2023 公司名称 保留所有权利</p>
  </div>
</footer>

核心样式

基础CSS样式确保页脚固定在页面底部：

css网页尾部制作

.site-footer {
  background-color: #2c3e50;
  color: white;
  padding: 40px 0 0;
  font-family: 'Arial', sans-serif;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-section {
  flex: 1;
  min-width: 250px;
  padding: 0 15px;
  margin-bottom: 30px;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  position: relative;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section a {
  color: #bdc3c7;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: #3498db;
}

.footer-bottom {
  text-align: center;
  padding: 15px 0;
  background-color: #1a252f;
  margin-top: 20px;
}

响应式处理

添加媒体查询确保移动端适配：

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
  }

  .footer-section {
    text-align: center;
    margin-bottom: 20px;
  }
}

粘性页脚实现

对于内容不足的页面，可使用以下CSS使页脚始终在视窗底部：

css网页尾部制作

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 150px; /* 等于页脚高度 */
}

.site-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
}

动态效果增强

添加悬停动画和图标：

.footer-section h3::after {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background: #3498db;
  margin-top: 8px;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  color: white;
  font-size: 20px;
  transition: transform 0.3s;
}

.social-icons a:hover {
  transform: translateY(-3px);
}

对应HTML部分需添加：

<div class="social-icons">
  <a href="#"><i class="fab fa-facebook"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>
</div>

注意：使用Font Awesome等图标库时需引入相关CSS文件。

标签: 尾部网页

分享给朋友：

vue实现网页分页

Vue 实现网页分页的方法使用计算属性实现分页在 Vue 中可以通过计算属性对数据进行分页处理。定义一个 currentPage 和 pageSize，利用计算属性返回当前页的数据。 data(…

vue实现网页预览

Vue 实现网页预览的方法使用 iframe 嵌入在 Vue 中可以通过 iframe 标签直接嵌入目标网页实现预览。这种方式简单直接，适合静态网页或无需交互的预览场景。 <templat…

vue怎么实现网页跳转

vue实现网页跳转的方法使用router-link组件通过Vue Router提供的<router-link>组件实现声明式导航，适合模板中使用： <router-link t…

vue数据绑定实现网页

Vue 数据绑定实现网页 Vue.js 通过数据绑定机制实现动态网页，核心是利用响应式系统将数据与 DOM 关联。以下是关键实现方式：双向数据绑定（v-model）通过 v-model 指令实现…

html css制作静态网页

HTML与CSS制作静态网页的基本方法构建HTML结构 HTML是网页的骨架，通过标签定义内容结构。基本框架如下： <!DOCTYPE html> <html> <…

用记事本制作css网页

使用记事本制作CSS网页的方法创建HTML文件打开记事本，输入基本的HTML结构代码，保存为.html文件。例如： <!DOCTYPE html> <html> <…

css网页尾部制作