HTML+CSS+JS制作手表商城网站（内附源码，含6个页面）_腕表管理系统前端项目源码-CSDN博客

本文链接：https://blog.csdn.net/WebDesign_Mu/article/details/144679468

一、作品介绍

HTML+CSS+JS制作一个手表商城网站，包含首页、商品详情页、购物车页、结算页、我的订单页、支付成功页等6个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。

二、页面结构

1. 顶部横幅导航区

包含品牌logo、主导航菜单（男表、女表、智能手表、限量款等）、搜索栏和购物车入口

2. 大型展示横幅

轮播展示区，展示精选手表系列、新品发布和促销活动

3. 热门分类快速入口

以网格形式展示主要手表分类（奢华系列、运动系列、商务系列、时尚系列），每个分类配有精美图片和简短描述

4. 新品推荐区

展示最新上市的手表产品，包含产品图片、名称、简介和价格

5. 品牌故事模块

简要介绍品牌历史和工艺特色，配以精美图片

6. 热销推荐区

展示最受欢迎的手表款式，包含产品图片、名称、评分和价格

7. 售后服务承诺

以图标形式展示正品保证、全球联保、快速发货等服务承诺

8. 页面底部

包含联系方式、关于我们、售后服务、社交媒体链接等信息

三、作品演示

四、代码目录

五、首页代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>手表商城 - 首页</title>
  <link type="text/css" href="css/family.css" rel="stylesheet" />
  <link type="text/css" href="css/all.min.css" rel="stylesheet" />
</head>

<body>
  <div class="water-mark water-mark-left">
    公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span>
  </div>
  <div class="water-mark water-mark-right">
    公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span>
  </div>

  <header class="fixed top-0 left-0 right-0 bg-white z-50 shadow-sm">
    <div class="container mx-auto px-4">
        <nav class="flex items-center justify-between h-20">
            <div class="flex items-center">
                <h1 class="text-3xl font-[&#39;Pacifico&#39;] text-custom">logo</h1>
            </div>
            <div class="flex items-center space-x-8">
                <a href="#" class="text-gray-700 hover:text-custom">男表</a>
                <a href="#" class="text-gray-700 hover:text-custom">女表</a>
                <a href="#" class="text-gray-700 hover:text-custom">智能手表</a>
                <a href="#" class="text-gray-700 hover:text-custom">限量款</a>
            </div>
            <div class="flex items-center space-x-6">
                <div class="relative">
                    <input type="text" placeholder="搜索手表"
                        class="pl-10 pr-4 py-2 w-64 border border-gray-200 rounded-lg focus:outline-none focus:border-custom" />
                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <a href="./shopping-cart.html" class="!rounded-button relative">
                    <i class="fas fa-shopping-cart text-2xl text-gray-700"></i>
                    <span
                        class="absolute -top-2 -right-2 bg-custom text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">1</span>
                </a>
            </div>
        </nav>
    </div>
  </header>

  <div class="min-h-screen bg-gray-50 mt-20">

    <main>
      <section class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
          <div>
            <h1 class="text-4xl font-bold mb-4">精致工艺，卓越品质</h1>
            <p class="text-gray-600 mb-6">探索我们精选的高端腕表系列，每一款都凝聚着精湛工艺与时尚设计的完美结合</p>
            <a href="./product-details.html" class="!rounded-button bg-custom text-white px-8 py-3 text-lg">立即选购</a>
          </div>
          <div>
            <img src="./images/bs1.jpg" alt="精品手表展示"
              class="w-full rounded-lg shadow-lg">
          </div>
        </div>
      </section>

      <section class="bg-white py-12">
        <div class="container mx-auto px-4">
          <h2 class="text-2xl font-bold text-center mb-8">热门系列</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-gray-50 rounded-lg p-6">
              <img src="./images/r9.jpg" alt="经典系列"
                class="w-full h-64 object-cover rounded-lg mb-4">
              <h3 class="text-xl font-semibold mb-2">经典系列</h3>
              <p class="text-gray-600 mb-4">传承百年工艺，演绎永恒魅力</p>
              <a href="./product-details.html" class="!rounded-button text-custom border border-custom px-4 py-2 w-full">查看详情</a>
            </div>
            <div class="bg-gray-50 rounded-lg p-6">
              <img src="./images/r10.jpg" alt="智能系列"
                class="w-full h-64 object-cover rounded-lg mb-4">
              <h3 class="text-xl font-semibold mb-2">智能系列</h3>
              <p class="text-gray-600 mb-4">科技与时尚的完美融合</p>
              <a href="./product-details.html" class="!rounded-button text-custom border border-custom px-4 py-2 w-full">查看详情</a>
            </div>
            <div class="bg-gray-50 rounded-lg p-6">
              <img src="./images/r11.jpg" alt="运动系列"
                class="w-full h-64 object-cover rounded-lg mb-4">
              <h3 class="text-xl font-semibold mb-2">运动系列</h3>
              <p class="text-gray-600 mb-4">为积极生活注入动力</p>
              <a href="./product-details.html" class="!rounded-button text-custom border border-custom px-4 py-2 w-full">查看详情</a>
            </div>
          </div>
        </div>
      </section>

      <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4">
          <h2 class="text-2xl font-bold text-center mb-8">品牌优势</h2>
          <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="text-center">
              <i class="fas fa-certificate text-custom text-3xl mb-4"></i>
              <h3 class="text-lg font-semibold mb-2">正品保证</h3>
              <p class="text-gray-600">官方授权，品质保证</p>
            </div>
            <div class="text-center">
              <i class="fas fa-shipping-fast text-custom text-3xl mb-4"></i>
              <h3 class="text-lg font-semibold mb-2">全球配送</h3>
              <p class="text-gray-600">快速安全的物流服务</p>
            </div>
            <div class="text-center">
              <i class="fas fa-undo text-custom text-3xl mb-4"></i>
              <h3 class="text-lg font-semibold mb-2">无忧退换</h3>
              <p class="text-gray-600">7天无理由退换</p>
            </div>
            <div class="text-center">
              <i class="fas fa-headset text-custom text-3xl mb-4"></i>
              <h3 class="text-lg font-semibold mb-2">专业售后</h3>
              <p class="text-gray-600">24小时贴心服务</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="bg-gray-800 text-white py-12">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 class="text-lg font-semibold mb-4">关于我们</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-300 hover:text-white">品牌故事</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white">企业文化</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white">加入我们</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">购物指南</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-300 hover:text-white">购买流程</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white">支付方式</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white">配送说明</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">售后服务</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-300 hover:text-white">退换政策</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white">保养维修</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white">常见问题</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">联系我们</h3>
            <ul class="space-y-2">
              <li class="text-gray-300">客服电话：400-888-8888</li>
              <li class="text-gray-300">服务时间：09:00-21:00</li>
              <li class="text-gray-300">电子邮箱：service@example.com</li>
            </ul>
          </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
          <p>&copy; 2024 奢华腕表. 保留所有权利</p>
        </div>
      </div>
    </footer>
  </div>
</body>

</html>