我来为您创建一个优雅的花店网页,包含现代化的设计和完整的交互功能。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">花语时光 - 您的花艺生活美学</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #e74c3c;
--secondary-color: #f39c12;
--dark-color: #2c3e50;
--light-color: #ecf0f1;
--text-color: #34495e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
color: var(--text-color);
line-height: 1.6;
}
/* 导航栏样式 */
.navbar {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.navbar-brand {
font-size: 1.8rem;
font-weight: bold;
color: var(--primary-color) !important;
display: flex;
align-items: center;
gap: 10px;
}
.navbar-brand i {
font-size: 2rem;
}
.nav-link {
color: var(--text-color) !important;
font-weight: 500;
margin: 0 10px;
transition: color 0.3s ease;
position: relative;
}
.nav-link:hover {
color: var(--primary-color) !important;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
/* 英雄区域 */
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('https://picsum.photos/seed/flowers-hero/1920/800') center/cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
position: relative;
}
.hero-content h1 {
font-size: 4rem;
font-weight: bold;
margin-bottom: 20px;
animation: fadeInUp 1s ease;
}
.hero-content p {
font-size: 1.5rem;
margin-bottom: 30px;
animation: fadeInUp 1s ease 0.2s;
animation-fill-mode: both;
}
.btn-hero {
padding: 15px 40px;
font-size: 1.2rem;
border-radius: 50px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
animation: fadeInUp 1s ease 0.4s;
animation-fill-mode: both;
}
.btn-primary-custom {
background: var(--primary-color);
color: white;
border: none;
}
.btn-primary-custom:hover {
background: #c0392b;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3);
}
/* 产品展示区 */
.products-section {
padding: 80px 0;
background: #f8f9fa;
}
.section-title {
text-align: center;
margin-bottom: 50px;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--dark-color);
margin-bottom: 15px;
}
.section-title p {
font-size: 1.1rem;
color: #7f8c8d;
}
.product-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.product-image {
height: 300px;
overflow: hidden;
position: relative;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-card:hover .product-image img {
transform: scale(1.1);
}
.product-badge {
position: absolute;
top: 20px;
right: 20px;
background: var(--secondary-color);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
}
.product-body {
padding: 25px;
}
.product-title {
font-size: 1.3rem;
font-weight: bold;
color: var(--dark-color);
margin-bottom: 10px;
}
.product-description {
color: #7f8c8d;
margin-bottom: 15px;
font-size: 0.95rem;
}
.product-price {
font-size: 1.5rem;
color: var(--primary-color);
font-weight: bold;
margin-bottom: 20px;
}
.btn-add-cart {
width: 100%;
padding: 12px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
font-weight: bold;
transition: all 0.3s ease;
}
.btn-add-cart:hover {
background: #c0392b;
transform: translateY(-2px);
}
/* 服务特色区 */
.services-section {
padding: 80px 0;
background: white;
}
.service-item {
text-align: center;
padding: 30px;
transition: all 0.3s ease;
}
.service-item:hover {
transform: translateY(-5px);
}
.service-icon {
width: 80px;
height: 80px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: white;
font-size: 2rem;
transition: all 0.3s ease;
}
.service-item:hover .service-icon {
background: var(--secondary-color);
transform: rotate(360deg);
}
.service-title {
font-size: 1.3rem;
font-weight: bold;
color: var(--dark-color);
margin-bottom: 15px;
}
/* 订阅区域 */
.subscribe-section {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 80px 0;
color: white;
text-align: center;
}
.subscribe-form {
max-width: 500px;
margin: 0 auto;
}
.subscribe-form input {
padding: 15px 20px;
border: none;
border-radius: 50px;
width: 100%;
margin-right: 10px;
font-size: 1rem;
}
.subscribe-form button {
padding: 15px 40px;
background: white;
color: var(--primary-color);
border: none;
border-radius: 50px;
font-weight: bold;
transition: all 0.3s ease;
}
.subscribe-form button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* 页脚 */
footer {
background: var(--dark-color);
color: white;
padding: 50px 0 30px;
}
.footer-links a {
color: #bdc3c7;
text-decoration: none;
margin-right: 20px;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--primary-color);
}
.social-links a {
display: inline-block;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
text-align: center;
line-height: 40px;
margin-right: 10px;
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(--primary-color);
transform: translateY(-3px);
}
/* 购物车侧边栏 */
.cart-sidebar {
position: fixed;
right: -400px;
top: 0;
width: 400px;
height: 100vh;
background: white;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
transition: right 0.3s ease;
z-index: 1000;
display: flex;
flex-direction: column;
}
.cart-sidebar.active {
right: 0;
}
.cart-header {
padding: 20px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-body {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.cart-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.cart-item img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
}
.cart-item-info {
flex: 1;
}
.cart-item-title {
font-weight: bold;
margin-bottom: 5px;
}
.cart-item-price {
color: var(--primary-color);
font-weight: bold;
}
.cart-footer {
padding: 20px;
border-top: 1px solid #eee;
}
.cart-total {
font-size: 1.5rem;
font-weight: bold;
text-align: right;
margin-bottom: 20px;
}
/* 遮罩层 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
.overlay.active {
display: block;
}
/* 动画 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content p {
font-size: 1.2rem;
}
.cart-sidebar {
width: 100%;
right: -100%;
}
.section-title h2 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-spa"></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 ms-auto">
<li class="nav-item">
<a class="nav-link" 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="#services">服务特色</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>
<li class="nav-item">
<button class="btn btn-link nav-link" onclick="toggleCart()">
<i class="fas fa-shopping-cart"></i>
<span class="badge bg-danger" id="cartCount">0</span>
</button>
</li>
</ul>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<section id="home" class="hero-section">
<div class="hero-content">
<h1>用鲜花点缀生活</h1>
<p>每一朵花都有故事，每一次相遇都是美好</p>
<a href="#products" class="btn-hero btn-primary-custom">探索花艺世界</a>
</div>
</section>
<!-- 产品展示区 -->
<section id="products" class="products-section">
<div class="container">
<div class="section-title">
<h2>精选花艺作品</h2>
<p>每一件作品都承载着我们对美的追求</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/seed/flower-bouquet1/400/300" alt="浪漫花束">
<span class="product-badge">热销</span>
</div>
<div class="product-body">
<h3 class="product-title">浪漫花束</h3>
<p class="product-description">精选红玫瑰与满天星，表达浓浓爱意</p>
<div class="product-price">¥299</div>
<button class="btn btn-add-cart" onclick="addToCart('浪漫花束', 299)">
<i class="fas fa-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/seed/flower-arrangement2/400/300" alt="优雅花篮">
<span class="product-badge">新品</span>
</div>
<div class="product-body">
<h3 class="product-title">优雅花篮</h3>
<p class="product-description">混合鲜花编织，展现自然之美</p>
<div class="product-price">¥399</div>
<button class="btn btn-add-cart" onclick="addToCart('优雅花篮', 399)">
<i class="fas fa-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/seed/flower-decoration3/400/300" alt="桌面花艺">
</div>
<div class="product-body">
<h3 class="product-title">桌面花艺</h3>
<p class="product-description">精致小巧，为您的空间增添生机</p>
<div class="product-price">¥199</div>
<button class="btn btn-add-cart" onclick="addToCart('桌面花艺', 199)">
<i class="fas fa-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/seed/wedding-flowers4/400/300" alt="婚礼花艺">
<span class="product-badge">定制</span>
</div>
<div class="product-body">
<h3 class="product-title">婚礼花艺</h3>
<p class="product-description">专属定制，让您的婚礼更加浪漫</p>
<div class="product-price">¥899</div>
<button class="btn btn-add-cart" onclick="addToCart('婚礼花艺', 899)">
<i class="fas fa-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/seed/sympathy-flowers5/400/300" alt="慰问花束">
</div>
<div class="product-body">
<h3 class="product-title">慰问花束</h3>
<p class="product-description">温馨雅致，传递您的关怀</p>
<div class="product-price">¥259</div>
<button class="btn btn-add-cart" onclick="addToCart('慰问花束', 259)">
<i class="fas fa-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/seed/plants6/400/300" alt="绿植盆栽">
</div>
<div class="product-body">
<h3 class="product-title">绿植盆栽</h3>
<p class="product-description">净化空气，为您带来健康生活</p>
<div class="product-price">¥159</div>
<button class="btn btn-add-cart" onclick="addToCart('绿植盆栽', 159)">
<i class="fas fa-cart-plus"></i> 加入购物车
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 服务特色区 -->
<section id="services" class="services-section">
<div class="container">
<div class="section-title">
<h2>我们的服务</h2>
<p>用心服务，让每一朵花都绽放最美的光彩</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-truck"></i>
</div>
<h3 class="service-title">快速配送</h3>
<p>同城当日达，让您最快收到新鲜的花朵</p>
</div>
</div>
<div class="col-md-4">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-palette"></i>
</div>
<h3 class="service-title">定制设计</h3>
<p>根据您的需求，打造专属花艺作品</p>
</div>
</div>
<div class="col-md-4">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-heart"></i>
</div>
<h3 class="service-title">贴心服务</h3>
<p>7*24小时客服，随时为您解答疑问</p>
</div>
</div>
</div>
</div>
</section>
<!-- 订阅区域 -->
<section class="subscribe-section">
<div class="container">
<h2 class="mb-4">订阅我们的花艺资讯</h2>
<p class="mb-5">获取最新花艺作品和优惠信息</p>
<form class="subscribe-form" onsubmit="subscribeNewsletter(event)">
<input type="email" placeholder="请输入您的邮箱" required>
<button type="submit">立即订阅</button>
</form>
</div>
</section>
<!-- 页脚 -->
<footer id="contact">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="mb-3">花语时光</h3>
<p>用心传递美好，让生活充满花香</p>
<div class="social-links mt-3">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="col-md-4">
<h3 class="mb-3">快速链接</h3>
<div class="footer-links">
<a href="#">关于我们</a>
<a href="#">产品中心</a>
<a href="#">服务项目</a>
<a href="#">配送说明</a>
</div>
</div>
<div class="col-md-4">
<h3 class="mb-3">联系方式</h3>
<p><i class="fas fa-phone"></i> 400-123-4567</p>
<p><i class="fas fa-envelope"></i> info@flowertime.com</p>
<p><i class="fas fa-map-marker-alt"></i> 北京市朝阳区花艺大道123号</p>
</div>
</div>
<hr class="my-4" style="border-color: #7f8c8d;">
<div class="text-center">
<p>© 2025 花语时光. All rights reserved.</p>
</div>
</div>
</footer>
<!-- 购物车侧边栏 -->
<div class="overlay" onclick="toggleCart()"></div>
<div class="cart-sidebar" id="cartSidebar">
<div class="cart-header">
<h3>购物车</h3>
<button class="btn-close" onclick="toggleCart()"></button>
</div>
<div class="cart-body" id="cartItems">
<p class="text-center text-muted">购物车是空的</p>
</div>
<div class="cart-footer">
<div class="cart-total">
总计: ¥<span id="cartTotal">0</span>
</div>
<button class="btn btn-primary w-100" onclick="checkout()">结算</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 购物车数据
let cart = [];
let cartCount = 0;
let cartTotal = 0;
// 添加到购物车
function addToCart(productName, price) {
cart.push({
name: productName,
price: price,
id: Date.now()
});
cartCount++;
cartTotal += price;
updateCartDisplay();
showNotification(`${productName} 已添加到购物车`);
}
// 更新购物车显示
function updateCartDisplay() {
document.getElementById('cartCount').textContent = cartCount;
document.getElementById('cartTotal').textContent = cartTotal;
const cartItems = document.getElementById('cartItems');
if (cart.length === 0) {
cartItems.innerHTML = '<p class="text-center text-muted">购物车是空的</p>';
} else {
cartItems.innerHTML = cart.map(item => `
<div class="cart-item">
<img src="https://picsum.photos/seed/${item.name}/80/80" alt="${item.name}">
<div class="cart-item-info">
<div class="cart-item-title">${item.name}</div>
<div class="cart-item-price">¥${item.price}</div>
</div>
<button class="btn btn-sm btn-danger" onclick="removeFromCart(${item.id})">
<i class="fas fa-trash"></i>
</button>
</div>
`).join('');
}
}
// 从购物车移除
function removeFromCart(id) {
const item = cart.find(item => item.id === id);
if (item) {
cart = cart.filter(item => item.id !== id);
cartCount--;
cartTotal -= item.price;
updateCartDisplay();
}
}
// 切换购物车显示
function toggleCart() {
const cartSidebar = document.getElementById('cartSidebar');
const overlay = document.querySelector('.overlay');
cartSidebar.classList.toggle('active');
overlay.classList.toggle('active');
}
// 结算
function checkout() {
if (cart.length === 0) {
showNotification('购物车是空的');
return;
}
showNotification(`订单已提交，总计 ¥${cartTotal}`);
cart = [];
cartCount = 0;
cartTotal = 0;
updateCartDisplay();
toggleCart();
}
// 显示通知
function showNotification(message) {
const notification = document.createElement('div');
notification.className = 'position-fixed top-0 start-50 translate-middle-x mt-5 alert alert-success';
notification.style.zIndex = '9999';
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 3000);
}
// 订阅邮件
function subscribeNewsletter(event) {
event.preventDefault();
const email = event.target.querySelector('input[type="email"]').value;
showNotification(`感谢订阅！我们将向 ${email} 发送最新资讯`);
event.target.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'
});
}
});
});
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
} else {
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
}
});
</script>
</body>
</html>
这个花店网页包含了以下特色功能：
-
现代化设计
- 使用渐变背景和卡片式布局
- 平滑的动画效果和过渡
- 响应式设计,适配各种设备
-
完整的功能
- 产品展示区,包含多种花艺作品
- 购物车功能,可以添加/删除商品
- 邮件订阅功能
- 服务特色展示
- 联系方式展示
-
交互体验
- 悬停效果和动画
- 购物车侧边栏
- 平滑滚动导航
- 友好的通知提示
-
视觉设计
- 使用温暖的配色方案
- 精美的图片展示
- 清晰的信息层级
- 优雅的字体和间距
您可以根据实际需求修改产品信息、价格和联系方式，这个网页提供了一个完整的花店在线展示和销售平台的基础框架。
