模板特点
- 响应式设计: 适配桌面、平板和手机等各种设备。
- 现代美观: 采用柔和的配色方案，符合化妆品行业的审美。
- 功能完整: 包含导航栏、轮播图、产品展示、购物车、页脚等。
- 易于使用: 基于 Bootstrap 5，代码清晰，注释详细，方便您进行修改和扩展。
- 交互效果: 包含简单的购物车交互和页面内导航。
如何使用
- 创建文件: 将下面的代码分别保存为
index.html和style.css文件，并将它们放在同一个文件夹中。 - 打开文件: 直接用浏览器打开
index.html文件即可看到效果。 - 自定义修改:
- 图片: 将所有图片链接（如
src="..."中的 URL）替换为您自己的产品图片、Logo等。 - 文字: 修改所有
<p>,<h1>,<h2>等标签内的文本内容。 - 颜色: 在
style.css文件中修改 CSS 变量（--primary-color,--secondary-color）来改变网站的主色调。 - 功能: 如果需要连接后端数据库，您需要为购物车功能添加 JavaScript 逻辑和服务器端代码。
- 图片: 将所有图片链接（如
文件 1: index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">花漾美妆 - 发现你的美</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<!-- 自定义 CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand fw-bold" href="#">
<i class="bi bi-flower1"></i> 花漾美妆
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#products">产品系列</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">联系我们</a>
</li>
</ul>
<div class="d-flex">
<a href="#" class="btn btn-outline-secondary position-relative me-2">
<i class="bi bi-cart3"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
0
</span>
</a>
<a href="#" class="btn btn-outline-secondary">登录</a>
</div>
</div>
</div>
</nav>
<!-- 轮播图 -->
<section id="home">
<div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?q=80&w=2070&auto=format&fit=crop');">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<h1>探索你的美</h1>
<p>精选全球优质美妆产品，点亮你的独特光彩。</p>
<a href="#products" class="btn btn-light btn-lg">立即选购</a>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1616106539224-8a9b24b3e7f1?q=80&w=2070&auto=format&fit=crop');">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<h1>纯净护肤</h1>
<p>温和配方，深层滋养，让肌肤焕发健康活力。</p>
<a href="#products" class="btn btn-light btn-lg">了解更多</a>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?q=80&w=2070&auto=format&fit=crop');">
<div class="carousel-overlay"></div>
<div class="carousel-caption">
<h1>限时优惠</h1>
<p>新用户专享，全场8折起，优惠不容错过！</p>
<a href="#products" class="btn btn-light btn-lg">抢购优惠</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</section>
<!-- 产品展示 -->
<section id="products" class="py-5">
<div class="container">
<h2 class="text-center mb-5">热门产品</h2>
<div class="row g-4">
<!-- 产品卡片 1 -->
<div class="col-md-4">
<div class="card product-card h-100">
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=1932&auto=format&fit=crop" class="card-img-top" alt="保湿面霜">
<div class="card-body">
<h5 class="card-title">水润保湿面霜</h5>
<p class="card-text">深层补水，长效锁水，适合所有肤质。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger mb-0">¥298</span>
<button class="btn btn-sm btn-primary add-to-cart" data-name="水润保湿面霜" data-price="298">
<i class="bi bi-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 产品卡片 2 -->
<div class="col-md-4">
<div class="card product-card h-100">
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=1932&auto=format&fit=crop" class="card-img-top" alt="亮白精华">
<div class="card-body">
<h5 class="card-title">维C亮白精华</h5>
<p class="card-text">淡化色斑，提亮肤色，让肌肤透出健康光泽。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger mb-0">¥458</span>
<button class="btn btn-sm btn-primary add-to-cart" data-name="维C亮白精华" data-price="458">
<i class="bi bi-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 产品卡片 3 -->
<div class="col-md-4">
<div class="card product-card h-100">
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=1932&auto=format&fit=crop" class="card-img-top" alt="口红">
<div class="card-body">
<h5 class="card-title">丝绒哑光口红</h5>
<p class="card-text">浓郁显色，丝绒质地，打造迷人唇妆。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger mb-0">¥168</span>
<button class="btn btn-sm btn-primary add-to-cart" data-name="丝绒哑光口红" data-price="168">
<i class="bi bi-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 产品卡片 4 -->
<div class="col-md-4">
<div class="card product-card h-100">
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=1932&auto=format&fit=crop" class="card-img-top" alt="眼影盘">
<div class="card-body">
<h5 class="card-title">大地色系眼影盘</h5>
<p class="card-text">多色可选，细腻粉质，轻松打造日常或派对眼妆。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger mb-0">¥228</span>
<button class="btn btn-sm btn-primary add-to-cart" data-name="大地色系眼影盘" data-price="228">
<i class="bi bi-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 产品卡片 5 -->
<div class="col-md-4">
<div class="card product-card h-100">
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=1932&auto=format&fit=crop" class="card-img-top" alt="洁面乳">
<div class="card-body">
<h5 class="card-title">温和氨基酸洁面乳</h5>
<p class="card-text">温和清洁，不紧绷，洗出健康好皮肤。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger mb-0">¥128</span>
<button class="btn btn-sm btn-primary add-to-cart" data-name="温和氨基酸洁面乳" data-price="128">
<i class="bi bi-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 产品卡片 6 -->
<div class="col-md-4">
<div class="card product-card h-100">
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=1932&auto=format&fit=crop" class="card-img-top" alt="粉底液">
<div class="card-body">
<h5 class="card-title">高清持妆粉底液</h5>
<p class="card-text">轻薄服帖，遮瑕力强，打造无瑕底妆。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger mb-0">¥328</span>
<button class="btn btn-sm btn-primary add-to-cart" data-name="高清持妆粉底液" data-price="328">
<i class="bi bi-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 关于我们 -->
<section id="about" class="py-5 bg-light">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<img src="https://images.unsplash.com/photo-1616106539224-8a9b24b3e7f1?q=80&w=2070&auto=format&fit=crop" class="img-fluid rounded shadow" alt="关于我们">
</div>
<div class="col-lg-6">
<h2 class="mb-4">关于花漾美妆</h2>
<p class="lead">我们相信，美妆不仅是外在的修饰，更是自信的表达。</p>
<p>花漾美妆成立于2010年，致力于为每一位女性提供高品质、安全、有效的美妆产品，我们与全球顶尖的化妆品研发团队合作，严选天然成分，确保每一件产品都能带给你最纯粹的美丽体验。</p>
<p>从护肤到彩妆，从日常护理到特殊场合，我们希望成为你美丽旅程中最值得信赖的伙伴。</p>
</div>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="py-5">
<div class="container">
<h2 class="text-center mb-5">联系我们</h2>
<div class="row">
<div class="col-lg-6">
<form id="contactForm">
<div class="mb-3">
<label for="name" class="form-label">您的姓名</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">电子邮箱</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">留言内容</label>
<textarea class="form-control" id="message" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary w-100">发送留言</button>
</form>
</div>
<div class="col-lg-6">
<div class="contact-info">
<h4>其他联系方式</h4>
<p><i class="bi bi-geo-alt"></i> 地址：上海市静安区南京西路1266号恒隆广场46楼</p>
<p><i class="bi bi-telephone"></i> 电话：400-123-4567</p>
<p><i class="bi bi-envelope"></i> 邮箱：contact@huayang.com</p>
<div class="social-links mt-4">
<a href="#" class="me-3"><i class="bi bi-wechat fs-4"></i></a>
<a href="#" class="me-3"><i class="bi bi-sina-weibo fs-4"></i></a>
<a href="#"><i class="bi bi-instagram fs-4"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white py-4">
<div class="container text-center">
<p>© 2025 花漾美妆. 保留所有权利. | <a href="#" class="text-white-50">隐私政策</a> | <a href="#" class="text-white-50">服务条款</a></p>
</div>
</footer>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义 JavaScript -->
<script>
// 购物车功能
let cartCount = 0;
const cartCountElement = document.querySelector('.badge');
const addToCartButtons = document.querySelectorAll('.add-to-cart');
addToCartButtons.forEach(button => {
button.addEventListener('click', () => {
const productName = button.getAttribute('data-name');
const productPrice = button.getAttribute('data-price');
// 更新购物车数量
cartCount++;
cartCountElement.textContent = cartCount;
// 显示成功提示 (使用 SweetAlert2 或简单的 alert)
// 这里为了简单，使用一个自定义的提示
showNotification(`${productName} 已加入购物车！`);
// 如果想实现更复杂的购物车，可以在这里添加逻辑，比如将商品存入一个数组。
});
});
// 简单的通知提示函数
function showNotification(message) {
// 创建通知元素
const notification = document.createElement('div');
notification.className = 'notification';
notification.textContent = message;
document.body.appendChild(notification);
// 触发动画
setTimeout(() => {
notification.classList.add('show');
}, 10);
// 3秒后移除通知
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => {
document.body.removeChild(notification);
}, 500);
}, 3000);
}
// 联系表单提交
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
showNotification('感谢您的留言，我们会尽快与您联系！');
this.reset(); // 清空表单
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</script>
</body>
</html>
文件 2: style.css
/* 全局变量和基础样式 */
:root {
--primary-color: #ff6b9d; /* 主色调，粉色系 */
--secondary-color: #feca57; /* 辅助色，亮黄色 */
--dark-color: #2c3e50; /* 深色，用于文字 */
--light-color: #f8f9fa; /* 浅色，用于背景 */
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--dark-color);
}
/* 导航栏样式 */
.navbar-brand {
font-size: 1.5rem;
color: var(--primary-color) !important;
}
.navbar {
transition: all 0.3s ease;
}
/* 轮播图样式 */
.carousel-item {
height: 80vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.carousel-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.carousel-caption {
bottom: 10rem;
z-index: 10;
}
.carousel-caption h1 {
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
/* 产品卡片样式 */
.product-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.product-card img {
height: 250px;
object-fit: cover;
}
/* 关于我们和联系我们部分 */
#about, #contact {
padding: 5rem 0;
}
#about img {
border-radius: 10px;
}
/* 联系信息样式 */
.contact-info p {
margin-bottom: 1rem;
}
.social-links a {
color: white;
font-size: 1.5rem;
transition: color 0.3s ease;
}
.social-links a:hover {
color: var(--primary-color);
}
/* 页脚样式 */
footer {
margin-top: 3rem;
}
/* 自定义通知提示样式 */
.notification {
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--primary-color);
color: white;
padding: 15px 25px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
opacity: 0;
transform: translateY(100px);
transition: opacity 0.5s ease, transform 0.5s ease;
z-index: 9999;
}
.notification.show {
opacity: 1;
transform: translateY(0);
}
/* 响应式调整 */
@media (max-width: 768px) {
.carousel-caption {
bottom: 5rem;
}
.carousel-caption h1 {
font-size: 2rem;
}
.product-card img {
height: 200px;
}
}
下一步可以做什么？
这个模板是一个非常好的起点,您可以在此基础上进行更多扩展：
（图片来源网络，侵删）
- 产品详情页: 创建一个单独的
product-detail.html页面，当用户点击产品图片时跳转。 - 完整的购物车系统: 将
index.html中的购物车逻辑扩展成一个真正的购物车，可以增删改查商品，计算总价。 - 用户系统: 添加注册、登录、个人中心、订单管理等功能。
- 后台管理: 创建一个管理员界面，用于管理产品、订单和用户。
- 博客/资讯板块: 添加一个博客页面，分享美妆技巧、产品评测等内容，以增加网站的用户粘性。
- 优化SEO: 添加
meta描述、关键词，优化图片alt标签等。
希望这个模板对您有帮助！
（图片来源网络，侵删）
