HTML+CSS+JS制作汽车网站（内附源码，含5个页面）
一、作品介绍
HTML+CSS+JS制作一个汽车网站，包含首页、新车发布页、预约试驾页、最新资讯页、品牌故事页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。
二、页面结构
1. 顶部导航栏
包含logo、主导航菜单（首页、新车、二手车、资讯、论坛）、搜索框和用户入口
2. 主视觉横幅
展示最新车型促销信息、品牌活动的轮播图
3. 快速筛选区
按价格、品牌、车型、能源类型等条件快速筛选车辆
4. 热门车型推荐
以图片卡片形式展示热门车型，包含车型图片、名称、价格和简要参数
5. 新车资讯
展示最新的汽车新闻、测评文章和行业动态
6. 品牌专区
展示主流汽车品牌logo墙，点击可进入品牌详情页
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>
<div class="min-h-screen bg-gray-50">
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<a href="#" class="font-['Pacifico'] text-2xl text-custom">logo</a>
<nav class="ml-10">
<ul class="flex space-x-8">
<li><a href="./index.html" class="text-custom hover:text-custom">首页</a></li>
<li><a href="./new-cars.html" class="text-gray-700 hover:text-custom">新车发布</a></li>
<li><a href="./book-test-drive.html" class="text-gray-700 hover:text-custom">预约试驾</a></li>
<li><a href="./information.html" class="text-gray-700 hover:text-custom">最新资讯</a></li>
<li><a href="./brand-story.html" class="text-gray-700 hover:text-custom">品牌故事</a></li>
</ul>
</nav>
</div>
<div class="flex items-center">
<div class="relative mr-4">
<input type="text" placeholder="搜索车型"
class="w-64 pl-10 pr-4 py-2 border 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"></i>
</div>
<a href="#" class="flex items-center text-gray-700 hover:text-custom">
<i class="fas fa-user mr-2"></i>
<span>登录/注册</span>
</a>
</div>
</div>
</div>
</header>
<div class="glide relative">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<img src="./images/b1.jpg" alt="新车促销"
class="w-full h-[500px] object-cover">
</li>
<li class="glide__slide">
<img src="./images/b2.jpg" alt="品牌活动"
class="w-full h-[500px] object-cover">
</li>
<li class="glide__slide">
<img src="./images/b3.jpg" alt="品牌活动"
class="w-full h-[500px] object-cover">
</li>
</ul>
</div>
<div class="glide__bullets absolute bottom-4 w-full flex justify-center" data-glide-el="controls[nav]">
<button class="glide__bullet mx-1" data-glide-dir="=0"></button>
<button class="glide__bullet mx-1" data-glide-dir="=1"></button>
</div>
</div>
<div class="container mx-auto px-4 py-8">
<div class="bg-white rounded-lg shadow p-6 mb-8">
<h2 class="text-xl font-semibold mb-4">快速筛选</h2>
<div class="grid grid-cols-5 gap-4">
<select class="w-full p-2 border rounded-lg text-sm">
<option>价格区间</option>
<option>10万以下</option>
<option>10-15万</option>
<option>15-20万</option>
<option>20-30万</option>
<option>30万以上</option>
</select>
<select class="w-full p-2 border rounded-lg text-sm">
<option>品牌</option>
<option>大众</option>
<option>丰田</option>
<option>本田</option>
<option>奔驰</option>
<option>宝马</option>
</select>
<select class="w-full p-2 border rounded-lg text-sm">
<option>车型</option>
<option>轿车</option>
<option>SUV</option>
<option>MPV</option>
<option>跑车</option>
</select>
<select class="w-full p-2 border rounded-lg text-sm">
<option>能源类型</option>
<option>汽油</option>
<option>新能源</option>
<option>混动</option>
<option>纯电动</option>
</select>
<button class="!rounded-button bg-custom text-white px-4 py-2">开始筛选</button>
</div>
</div>
<div class="mb-12">
<h2 class="text-2xl font-semibold mb-6">热门车型推荐</h2>
<div class="grid grid-cols-4 gap-6">
<div class="bg-white rounded-lg shadow overflow-hidden">
<img src="./images/r1.jpg" alt="热门车型1"
class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold mb-2">奔驰 C级</h3>
<p class="text-gray-600 text-sm mb-2">2.0T 自动豪华型</p>
<p class="text-custom font-semibold">32.98万起</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<img src="./images/r2.jpg" alt="热门车型2"
class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold mb-2">宝马 X3</h3>
<p class="text-gray-600 text-sm mb-2">2.0T 自动豪华型</p>
<p class="text-custom font-semibold">39.98万起</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<img src="./images/r3.jpg" alt="热门车型3"
class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold mb-2">保时捷 718</h3>
<p class="text-gray-600 text-sm mb-2">2.0T 自动运动版</p>
<p class="text-custom font-semibold">58.80万起</p>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<img src="./images/r4.jpg" alt="热门车型4"
class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold mb-2">特斯拉 Model 3</h3>
<p class="text-gray-600 text-sm mb-2">长续航后驱版</p>
<p class="text-custom font-semibold">29.90万起</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-8 mb-12">
<div class="col-span-2">
<h2 class="text-2xl font-semibold mb-6">新车资讯</h2>
<div class="space-y-6">
<div class="bg-white rounded-lg shadow p-4 flex">
<img src="./images/x1.jpg" alt="新闻1"
class="w-48 h-32 object-cover rounded-lg">
<div class="ml-4 flex-1">
<h3 class="font-semibold mb-2">全新宝马5系正式发布，搭载全新设计语言</h3>
<p class="text-gray-600 text-sm line-clamp-2">宝马全新一代5系正式亮相，采用了全新的设计语言，内饰科技感十足，动力系统全面升级...</p>
<p class="text-gray-400 text-sm mt-2">2024-02-20</p>
</div>
</div>
<div class="bg-white rounded-lg shadow p-4 flex">
<img src="./images/x2.jpg" alt="新闻2"
class="w-48 h-32 object-cover rounded-lg">
<div class="ml-4 flex-1">
<h3 class="font-semibold mb-2">新能源汽车市场持续升温，多品牌加速布局</h3>
<p class="text-gray-600 text-sm line-clamp-2">随着新能源汽车市场的持续火热，各大汽车品牌纷纷加大在电动化领域的投入...</p>
<p class="text-gray-400 text-sm mt-2">2024-02-19</p>
</div>
</div>
</div>
</div>
<div>
<h2 class="text-2xl font-semibold mb-6">服务工具</h2>
<div class="bg-white rounded-lg shadow p-6">
<div class="grid grid-cols-2 gap-4">
<a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50">
<i class="fas fa-calculator text-2xl text-custom mb-2"></i>
<span class="text-sm">贷款计算</span>
</a>
<a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50">
<i class="fas fa-car-crash text-2xl text-custom mb-2"></i>
<span class="text-sm">违章查询</span>
</a>
<a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50">
<i class="fas fa-tags text-2xl text-custom mb-2"></i>
<span class="text-sm">汽车估价</span>
</a>
<a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50">
<i class="fas fa-map-marker-alt text-2xl text-custom mb-2"></i>
<span class="text-sm">维修网点</span>
</a>
</div>
</div>
</div>
</div>
<div class="mb-12">
<h2 class="text-2xl font-semibold mb-6">品牌专区</h2>
<div class="grid grid-cols-8 gap-4">
<a href="#"
class="bg-white rounded-lg shadow p-4 flex items-center justify-center hover:shadow-md transition-shadow">
<img src="./images/p1.jpg" alt="奔驰"
class="w-16 h-16 object-contain">
</a>
<a href="#"
class="bg-white rounded-lg shadow p-4 flex items-center justify-center hover:shadow-md transition-shadow">
<img src="./images/p2.jpg" alt="宝马"
class="w-16 h-16 object-contain">
</a>
<a href="#"
class="bg-white rounded-lg shadow p-4 flex items-center justify-center hover:shadow-md transition-shadow">
<img src="./images/p3.jpg" alt="奥迪"
class="w-16 h-16 object-contain">
</a>
<a href="#"
class="bg-white rounded-lg shadow p-4 flex items-center justify-center hover:shadow-md transition-shadow">
<img src="./images/p4.jpg" alt="保时捷"
class="w-16 h-16 object-contain">
</a>
<a href="#"
class="bg-white rounded-lg shadow p-4 flex items-center justify-center hover:shadow-md transition-shadow">
<img src="./images/p5.jpg" alt="特斯拉"
class="w-16 h-16 object-contain">
</a>
<a href="#"
class="bg-white rounded-lg shadow p-4 flex items-center justify-center hover:shadow-md transition-shadow">
<img src="./images/p6.jpg" alt="大众"
class="w-16 h-16 object-contain">
</a>
<a href="#"
class="bg-white rounded-lg shadow p-4 flex items-center justify-center hover:shadow-md transition-shadow">
<img src="./images/p7.jpg" alt="丰田"
class="w-16 h-16 object-contain">
</a>
<a href="#"
class="bg-white rounded-lg shadow p-4 flex items-center justify-center hover:shadow-md transition-shadow">
<img src="./images/p8.jpg" alt="本田"
class="w-16 h-16 object-contain">
</a>
</div>
</div>
</div>
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid 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-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-lg font-semibold 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-lg font-semibold 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-lg font-semibold mb-4">关注我们</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white text-2xl">
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white text-2xl">
<i class="fab fa-weibo"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white text-2xl">
<i class="fab fa-tiktok"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>© 2024 汽车网站. All rights reserved.</p>
</div>
</div>
</footer>
</div>
</body>
</html>六、获取代码
内附源码，含5个页面。欢迎留言，欢迎关注。