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

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

时间:2024-11-03 23:46:02浏览次数:6  
标签: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 中

在代码中,我们将所有文字内容(例如 topIconsfooterLinksfooterInfo)抽取到 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

相关文章