当前位置：首页 > 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实现网页上下滑动的方法使用CSS实现基础滚动通过CSS的overflow-y属性控制容器滚动，适用于静态内容滚动： .scroll-container { height: 100vh…

jquery网页

jQuery 网页开发基础 jQuery 是一个快速、简洁的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。以下是一些 jQuery 在网页开发中的核心…

用css制作淘宝网页

页面布局设计淘宝网页通常采用响应式布局，确保在不同设备上都能良好显示。主要结构包括顶部导航栏、搜索栏、轮播图、商品分类展示和页脚。使用CSS的Flexbox或Grid布局可以快速实现这些结构。F…

vue实现网页功能

Vue 实现网页功能的核心方法创建 Vue 项目使用 Vue CLI 或 Vite 快速初始化项目。Vue CLI 适合传统项目，Vite 适合现代轻量级应用。 npm init vue@lat…

vue实现网页打印

Vue 实现网页打印的方法在 Vue 项目中实现网页打印功能可以通过以下几种方式完成，具体选择取决于需求和场景。使用 window.print() 方法调用浏览器原生的打印功能是最简单的方式。…

用vue实现网页

Vue.js 网页开发基础步骤安装 Vue.js 开发环境通过 npm 或 yarn 安装 Vue CLI（命令行工具），用于快速初始化项目。 npm install -g @vue/cli…

css网页尾部制作