当前位置：首页>网站源码>HTML+CSS+JS制作外贸网站(内附源码,含5个页面)

HTML+CSS+JS制作外贸网站(内附源码,含5个页面)

2026-06-26 03:38:09

一、作品介绍

HTML+CSS+JS制作一个外贸网站，包含首页、产品中心页、解决方案页、关于我们页、联系我们页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。

二、页面结构

顶部导航区

包含公司logo、多语言切换按钮、搜索框、联系方式（邮箱/电话）、询盘按钮

主视觉横幅

展示公司主打产品的大幅图片轮播，配有简短的公司优势说明和'立即咨询'按钮

产品分类展示

以网格布局展示主要产品类别，每个类别配有代表性产品图片和简要描述

公司优势板块

展示公司核心竞争力，如质量认证、年出口额、主要市场分布等，配有数据可视化图表

热销产品推荐

展示4-6个最受欢迎的产品，包含产品图片、简要参数和询价按钮

认证展示区

展示各类国际认证证书、专利证书、企业资质等

底部信息栏

包含公司详细联系方式、快速导航链接、社交媒体图标和版权信息

三、作品演示

四、代码目录

五、首页代码

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

    <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" />

    <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 shadow-sm z-50">
        <div class="container mx-auto px-6">
          <div class="flex items-center justify-between h-20">
            <div class="flex items-center space-x-16">
              <a href="#" class="text-3xl font-['Pacifico'] text-custom">logo</a>
              <nav class="hidden md:flex space-x-8">
                <a href="./index.html" class="text-custom hover:text-custom">首页</a>
                <a href="./products.html" class="text-gray-700 hover:text-custom">产品中心</a>
                <a href="./solution.html" class="text-gray-700 hover:text-custom">解决方案</a>
                <a href="./about-us.html" class="text-gray-700 hover:text-custom">关于我们</a>
                <a href="./contact-us.html" class="text-gray-700 hover:text-custom">联系我们</a>
              </nav>
            </div>
            <div class="flex items-center space-x-4">
              <div class="relative">
                <input type="text" placeholder="搜索产品"
                  class="pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-custom" />
                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
              </div>
              <button class="!rounded-button bg-custom text-white px-6 py-2 text-sm hover:bg-opacity-90">联系我们</button>
            </div>
          </div>
        </div>
      </header>

      <main class="pt-20">
        <section class="relative h-[600px] overflow-hidden">
          <img src="./images/b1.jpg" alt="banner"
            class="w-full h-full object-cover object-top" />
          <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center">
            <div class="container mx-auto px-6">
              <div class="max-w-2xl text-white">
                <h1 class="text-5xl font-bold mb-6">全球领先的贸易解决方案</h1>
                <p class="text-xl mb-8">为您提供专业的国际贸易服务，连接全球商机</p>
                <button class="!rounded-button bg-custom text-white px-8 py-3 text-lg hover:bg-opacity-90">了解更多</button>
              </div>
            </div>
          </div>
        </section>

        <section class="py-20 bg-gray-50">
          <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-16">我们的优势</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div class="bg-white p-8 rounded-lg shadow-sm">
                <img src="./images/y1.jpg" alt="全球网络"
                  class="w-full h-48 object-cover rounded-lg mb-6" />
                <h3 class="text-xl font-bold mb-4">全球贸易网络</h3>
                <p class="text-gray-600">覆盖超过150个国家和地区的贸易网络，为您提供无缝对接的国际贸易服务</p>
              </div>
              <div class="bg-white p-8 rounded-lg shadow-sm">
                <img src="./images/y2.jpg" alt="安全保障"
                  class="w-full h-48 object-cover rounded-lg mb-6" />
                <h3 class="text-xl font-bold mb-4">安全支付保障</h3>
                <p class="text-gray-600">专业的跨境支付解决方案，确保您的每笔交易安全可靠</p>
              </div>
              <div class="bg-white p-8 rounded-lg shadow-sm">
                <img src="./images/y3.jpg" alt="客户服务"
                  class="w-full h-48 object-cover rounded-lg mb-6" />
                <h3 class="text-xl font-bold mb-4">24小时服务</h3>
                <p class="text-gray-600">专业的多语言客服团队，为您提供全天候的贸易支持服务</p>
              </div>
            </div>
          </div>
        </section>

        <section class="py-20">
          <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-16">热门产品</h2>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <img src="./images/c1.jpg" alt="电子产品"
                  class="w-full h-64 object-cover" />
                <div class="p-6">
                  <h3 class="text-lg font-bold mb-2">智能电子产品</h3>
                  <p class="text-gray-600 mb-4">高品质消费电子产品</p>
                  <button
                    class="!rounded-button bg-custom text-white px-4 py-2 text-sm hover:bg-opacity-90 w-full">查看详情</button>
                </div>
              </div>
              <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <img src="./images/c2.jpg" alt="纺织品"
                  class="w-full h-64 object-cover" />
                <div class="p-6">
                  <h3 class="text-lg font-bold mb-2">优质纺织品</h3>
                  <p class="text-gray-600 mb-4">环保面料，国际认证</p>
                  <button
                    class="!rounded-button bg-custom text-white px-4 py-2 text-sm hover:bg-opacity-90 w-full">查看详情</button>
                </div>
              </div>
              <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <img src="./images/c3.jpg" alt="家具"
                  class="w-full h-64 object-cover" />
                <div class="p-6">
                  <h3 class="text-lg font-bold mb-2">时尚家具</h3>
                  <p class="text-gray-600 mb-4">现代设计，优质材质</p>
                  <button
                    class="!rounded-button bg-custom text-white px-4 py-2 text-sm hover:bg-opacity-90 w-full">查看详情</button>
                </div>
              </div>
              <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <img src="./images/c4.jpg" alt="汽配"
                  class="w-full h-64 object-cover" />
                <div class="p-6">
                  <h3 class="text-lg font-bold mb-2">汽车配件</h3>
                  <p class="text-gray-600 mb-4">原厂品质，价格优惠</p>
                  <button
                    class="!rounded-button bg-custom text-white px-4 py-2 text-sm hover:bg-opacity-90 w-full">查看详情</button>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="bg-gray-50 py-20">
          <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-16">合作伙伴</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
              <div class="bg-white p-8 rounded-lg shadow-sm flex items-center justify-center">
                <span class="text-xl font-['Pacifico'] text-gray-600">劳力士</span>
              </div>
              <div class="bg-white p-8 rounded-lg shadow-sm flex items-center justify-center">
                <span class="text-xl font-['Pacifico'] text-gray-600">雅兰</span>
              </div>
              <div class="bg-white p-8 rounded-lg shadow-sm flex items-center justify-center">
                <span class="text-xl font-['Pacifico'] text-gray-600">华为</span>
              </div>
              <div class="bg-white p-8 rounded-lg shadow-sm flex items-center justify-center">
                <span class="text-xl font-['Pacifico'] text-gray-600">比亚迪</span>
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer class="bg-gray-900 text-white py-16">
        <div class="container mx-auto px-6">
          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 class="text-xl font-bold mb-4">关于我们</h3>
              <p class="text-gray-400">专业的外贸服务平台，为全球客户提供优质的产品和服务</p>
            </div>
            <div>
              <h3 class="text-xl font-bold mb-4">联系方式</h3>
              <p class="text-gray-400">电话：+86 400-888-8888</p>
              <p class="text-gray-400">邮箱：info@company.com</p>
              <p class="text-gray-400">地址：上海市浦东新区张江高科技园区</p>
            </div>
            <div>
              <h3 class="text-xl font-bold mb-4">快速链接</h3>
              <ul class="space-y-2">
                <li><a href="#" class="text-gray-400 hover:text-white">产品中心</a></li>
                <li><a href="#" class="text-gray-400 hover:text-white">解决方案</a></li>
                <li><a href="#" class="text-gray-400 hover:text-white">新闻资讯</a></li>
                <li><a href="#" class="text-gray-400 hover:text-white">加入我们</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-xl font-bold mb-4">关注我们</h3>
              <div class="flex space-x-4">
                <a href="#" class="text-gray-400 hover:text-white text-xl">
                  <i class="fab fa-weixin"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white text-xl">
                  <i class="fab fa-weibo"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white text-xl">
                  <i class="fab fa-linkedin"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
            <p>&copy; 2024 Company Name. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </body>

    </html>

六、获取代码

内附源码，含5个页面。欢迎关注与留言。

本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。

HTML+CSS+JS制作外贸网站(内附源码,含5个页面)

一、作品介绍

二、页面结构

三、作品演示

四、代码目录

五、首页代码

六、获取代码

最新文章

热门文章

随机文章

HTML+CSS+JS制作外贸网站(内附源码,含5个页面)

一、作品介绍

二、页面结构

三、作品演示

四、代码目录

五、首页代码

六、获取代码

怎么样注册自己的网站?新手小白零代码实操参考指南(流程步骤)

胡彦斌一个月手搓了个 App,歌手都会写代码了?

最新文章

热门文章

随机文章