首页 > 其他分享 >用 Vue 和 CSS 快速实现电商风格的底部信息区域 从零开始：Vue 实现响应式电商底部布局 新手必学！使用 Vue 构建精美电商底部导航 Vue 项目实战：构建电商风格的底部信息区域 简单易懂！

用 Vue 和 CSS 快速实现电商风格的底部信息区域 从零开始：Vue 实现响应式电商底部布局 新手必学！使用 Vue 构建精美电商底部导航 Vue 项目实战：构建电商风格的底部信息区域 简单易懂！

时间：2024-11-03 23:46:02浏览次数：3  
标签：Vue links footer text 底部 div 电商 margin

效果图

在这里插入图片描述

博客标题推荐

  1. 用 Vue 和 CSS 快速实现电商风格的底部信息区域
  2. 从零开始：Vue 实现响应式电商底部布局
  3. 新手必学！使用 Vue 构建精美电商底部导航
  4. Vue 项目实战：构建电商风格的底部信息区域
  5. 简单易懂！用 Vue 实现电商网站底部信息模块

博客正文

目录
  1. 引言
  2. 步骤一：创建基本 HTML 结构
  3. 步骤二：使用 Vue 绑定数据
  4. 步骤三：添加 CSS 样式
  5. 步骤四：将内容抽取到 Vue 的 data 中
  6. 总结
引言

在电商网站中，底部信息区域是非常重要的一部分，它通常包含网站导航、服务信息、版权声明等内容。今天我们将使用 Vue 和简单的 CSS 来创建一个电商风格的底部信息区域。通过这个教程，你将学习如何使用 Vue 来实现数据绑定，简化内容管理。

步骤一：创建基本 HTML 结构

首先，我们需要一个 HTML 页面来展示底部信息区域。在 #app 中创建各个部分的 HTML 结构，包括图标区域、链接区域、信息文本和认证标志。以下是基本的 HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>底部信息区域 - Vue 实现</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <!-- 顶部图标区域 -->
  <div class="top-icons">
    <div v-for="icon in topIcons" :key="icon.text">
      <div class="icon"></div>
      <p>{{ icon.text }}</p>
    </div>
  </div>

  <!-- 底部链接区域 -->
  <div class="footer-links">
    <div v-for="linkGroup in footerLinks" :key="linkGroup.title">
      <h4>{{ linkGroup.title }}</h4>
      <p v-for="link in linkGroup.links" :key="link">{{ link }}</p>
    </div>
  </div>

  <!-- 底部信息 -->
  <div class="footer-info">
    <div v-for="info in footerInfo" :key="info">{{ info }}</div>
  </div>

  <!-- 认证图标区域 -->
  <div class="certificates">
    <img v-for="certificate in certificates" :key="certificate" :alt="certificate" :src="certificate">
  </div>
</div>
</body>
</html>
步骤二：使用 Vue 绑定数据

在 HTML 结构中，我们使用了 v-for 指令来循环渲染数据。接下来，在页面底部添加 Vue 的实例代码，将所有内容抽取到 Vue 的 data 中，方便后续管理和修改。

<script>
new Vue({
  el: '#app',
  data: {
    topIcons: [
      { text: '品类齐全，轻松购物' },
      { text: '多仓直发，极速配送' },
      { text: '正品行货，精致服务' },
      { text: '天天低价，畅选无忧' }
    ],
    footerLinks: [
      {
        title: '购物指南',
        links: ['购物流程', '会员介绍', '生活旅行/团购', '常见问题', '联系客服']
      },
      {
        title: '配送方式',
        links: ['上门自提', '211限时达', '配送服务查询', '配送费收取标准']
      },
      {
        title: '支付方式',
        links: ['货到付款', '在线支付', '分期付款', '公司转账']
      },
      {
        title: '售后服务',
        links: ['售后政策', '价格保护', '退款说明', '返修/退换货', '取消订单']
      },
      {
        title: '特色服务',
        links: ['夺宝岛', 'DIY装机', '延保服务', '京东E卡', '京东通信']
      }
    ],
    footerInfo: [
      '关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测',
      '京公网安备 11000002000088号 | 京ICP证070359号 | 京ICP证010808号',
      'Copyright © 2004-2024 京东JINGDONG 版权所有'
    ],
    certificates: [
      'https://via.placeholder.com/50', 
      'https://via.placeholder.com/50', 
      'https://via.placeholder.com/50', 
      'https://via.placeholder.com/50', 
      'https://via.placeholder.com/50'
    ]
  }
});
</script>
步骤三：添加 CSS 样式

在 head 标签中加入 <style> 标签，为页面添加样式。这些样式定义了各个部分的布局和样式，使页面看起来更美观。

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
  }
  #app {
    max-width: 1200px;
    width: 100%;
  }
  .top-icons, .footer-links, .footer-info, .certificates {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
  }
  .top-icons div, .footer-links div, .certificates img {
    text-align: center;
    font-size: 14px;
  }
  .top-icons div {
    width: 180px;
    padding: 10px;
  }
  .top-icons .icon {
    width: 50px;
    height: 50px;
    background-color: #e6e6e6;
    border-radius: 50%;
    margin: 0 auto 10px;
  }
  .footer-links {
    justify-content: space-between;
  }
  .footer-links div h4 {
    margin-bottom: 10px;
    font-weight: bold;
  }
  .footer-links div p {
    margin: 5px 0;
    color: #666;
  }
  .footer-info {
    flex-direction: column;
    text-align: center;
    color: #999;
    font-size: 12px;
  }
  .footer-info div {
    margin: 5px 0;
  }
  .certificates {
    justify-content: center;
    margin-top: 10px;
  }
  .certificates img {
    width: 50px;
    height: 50px;
    background-color: #e6e6e6;
  }
</style>
步骤四：将内容抽取到 Vue 的 data 中

在代码中，我们将所有文字内容（例如 topIcons、footerLinks 和 footerInfo）抽取到 data 中，通过 v-for 循环指令渲染这些内容。这样，如果需要更新内容，可以直接修改 data 中的内容，而不必手动更改 HTML。

步骤五：运行并测试

完成代码后，将代码保存为 HTML 文件并在浏览器中打开。你应该会看到一个整齐的电商底部区域，包含顶部图标、底部链接、信息文本和认证标志。确保所有文字和布局显示正确。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>底部信息区域 - Vue 实现</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f9f9f9;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
    }
    #app {
      max-width: 1200px;
      width: 100%;
    }
    .top-icons, .footer-links, .footer-info, .certificates {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 20px 0;
    }
    .top-icons div, .footer-links div, .certificates img {
      text-align: center;
      font-size: 14px;
    }
    .top-icons div {
      width: 180px;
      padding: 10px;
    }
    .top-icons .icon {
      width: 50px;
      height: 50px;
      background-color: #e6e6e6;
      border-radius: 50%;
      margin: 0 auto 10px;
    }
    .footer-links {
      justify-content: space-between;
    }
    .footer-links div h4 {
      margin-bottom: 10px;
      font-weight: bold;
    }
    .footer-links div p {
      margin: 5px 0;
      color: #666;
    }
    .footer-info {
      flex-direction: column;
      text-align: center;
      color: #999;
      font-size: 12px;
    }
    .footer-info div {
      margin: 5px 0;
    }
    .certificates {
      justify-content: center;
      margin-top: 10px;
    }
    .certificates img {
      width: 50px;
      height: 50px;
      background-color: #e6e6e6;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 顶部图标区域 -->
  <div class="top-icons">
    <div v-for="icon in topIcons" :key="icon.text">
      <div class="icon"></div>
      <p>{{ icon.text }}</p>
    </div>
  </div>

  <!-- 底部链接区域 -->
  <div class="footer-links">
    <div v-for="linkGroup in footerLinks" :key="linkGroup.title">
      <h4>{{ linkGroup.title }}</h4>
      <p v-for="link in linkGroup.links" :key="link">{{ link }}</p>
    </div>
  </div>

  <!-- 底部信息 -->
  <div class="footer-info">
    <div v-for="info in footerInfo" :key="info">{{ info }}</div>
  </div>

  <!-- 认证图标区域 -->
  <div class="certificates">
    <img v-for="certificate in certificates" :key="certificate" :alt="certificate" :src="certificate">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    topIcons: [
      { text: '品类齐全，轻松购物' },
      { text: '多仓直发，极速配送' },
      { text: '正品行货，精致服务' },
      { text: '天天低价，畅选无忧' }
    ],
    footerLinks: [
      {
        title: '购物指南',
        links: ['购物流程', '会员介绍', '生活旅行/团购', '常见问题', '联系客服']
      },
      {
        title: '配送方式',
        links: ['上门自提', '211限时达', '配送服务查询', '配送费收取标准']
      },
      {
        title: '支付方式',
        links: ['货到付款', '在线支付', '分期付款', '公司转账']
      },
      {
        title: '售后服务',
        links: ['售后政策', '价格保护', '退款说明', '返修/退换货', '取消订单']
      },
      {
        title: '特色服务',
        links: ['夺宝岛', 'DIY装机', '延保服务', '京东E卡', '京东通信']
      }
    ],
    footerInfo: [
      '关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测',
      '京公网安备 11000002000088号 | 京ICP证070359号 | 京ICP证010808号',
      'Copyright © 2004-2024 京东JINGDONG 版权所有'
    ],
    certificates: [
      'https://via.placeholder.com/50', 
      'https://via.placeholder.com/50', 
      'https://via.placeholder.com/50', 
      'https://via.placeholder.com/50', 
      'https://via.placeholder.com/50'
    ]
  }
});
</script>
</body>
</html>

纯html完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>底部信息区域 - Vue 实现</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f9f9f9;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
    }
    #app {
      max-width: 1200px;
      width: 100%;
    }
    .top-icons, .footer-links, .footer-info, .certificates {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 20px 0;
    }
    .top-icons div, .footer-links div, .certificates img {
      text-align: center;
      font-size: 14px;
    }
    .top-icons div {
      width: 180px;
      padding: 10px;
    }
    .top-icons .icon {
      width: 50px;
      height: 50px;
      background-color: #e6e6e6;
      border-radius: 50%;
      margin: 0 auto 10px;
    }
    .footer-links {
      justify-content: space-between;
    }
    .footer-links div h4 {
      margin-bottom: 10px;
      font-weight: bold;
    }
    .footer-links div p {
      margin: 5px 0;
      color: #666;
    }
    .footer-info {
      flex-direction: column;
      text-align: center;
      color: #999;
      font-size: 12px;
    }
    .footer-info div {
      margin: 5px 0;
    }
    .certificates {
      justify-content: center;
      margin-top: 10px;
    }
    .certificates img {
      width: 50px;
      height: 50px;
      background-color: #e6e6e6;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 顶部图标区域 -->
  <div class="top-icons">
    <div>
      <div class="icon"></div>
      <p>品类齐全，轻松购物</p>
    </div>
    <div>
      <div class="icon"></div>
      <p>多仓直发，极速配送</p>
    </div>
    <div>
      <div class="icon"></div>
      <p>正品行货，精致服务</p>
    </div>
    <div>
      <div class="icon"></div>
      <p>天天低价，畅选无忧</p>
    </div>
  </div>

  <!-- 底部链接区域 -->
  <div class="footer-links">
    <div>
      <h4>购物指南</h4>
      <p>购物流程</p>
      <p>会员介绍</p>
      <p>生活旅行/团购</p>
      <p>常见问题</p>
      <p>联系客服</p>
    </div>
    <div>
      <h4>配送方式</h4>
      <p>上门自提</p>
      <p>211限时达</p>
      <p>配送服务查询</p>
      <p>配送费收取标准</p>
    </div>
    <div>
      <h4>支付方式</h4>
      <p>货到付款</p>
      <p>在线支付</p>
      <p>分期付款</p>
      <p>公司转账</p>
    </div>
    <div>
      <h4>售后服务</h4>
      <p>售后政策</p>
      <p>价格保护</p>
      <p>退款说明</p>
      <p>返修/退换货</p>
      <p>取消订单</p>
    </div>
    <div>
      <h4>特色服务</h4>
      <p>夺宝岛</p>
      <p>DIY装机</p>
      <p>延保服务</p>
      <p>京东E卡</p>
      <p>京东通信</p>
    </div>
  </div>

  <!-- 底部信息 -->
  <div class="footer-info">
    <div>关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测</div>
    <div>京公网安备 11000002000088号 | 京ICP证070359号 | 京ICP证010808号</div>
    <div>Copyright © 2004-2024 京东JINGDONG 版权所有</div>
  </div>

  <!-- 认证图标区域 -->
  <div class="certificates">
    <img src="https://via.placeholder.com/50" alt="认证1">
    <img src="https://via.placeholder.com/50" alt="认证2">
    <img src="https://via.placeholder.com/50" alt="认证3">
    <img src="https://via.placeholder.com/50" alt="认证4">
    <img src="https://via.placeholder.com/50" alt="认证5">
  </div>
</div>

<script>
new Vue({
  el: '#app'
});
</script>
</body>
</html>

总结

在本篇教程中，我们学习了如何使用 Vue 和 CSS 构建一个电商风格的底部信息区域。通过将内容抽取到 Vue 的 data 中，我们可以更方便地管理和修改内容。这种方法可以用于构建任何类似的静态模块或布局。

希望这个项目帮助你理解 Vue 的基础用法！如果有任何问题，欢迎留言讨论。

标签：Vue,links,footer,text,底部,div,电商,margin
From： https://blog.csdn.net/qq_22182989/article/details/143337019

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99