CSS3學習教程，從入門到精通，化妝品網站 HTML5 + CSS3 完整項目（26）

化妝品網站 HTML5 + CSS3 完整項目

下面是一個完整的化妝品網站項目，包含主頁、登錄頁面和注冊頁面。我將按照您的要求提供詳細的代碼和注釋。

1. 網站規劃與需求分析

需求分析

展示化妝品產品信息
提供用戶注冊和登錄功能
響應式設計，適配不同設備
美觀的視覺效果吸引用戶
清晰的導航結構

風格定位

現代簡約風格
柔和的色彩搭配（粉色、白色為主）
圓角設計元素
高清產品圖片展示

2. 項目結構

cosmetics-website/
├── index.html          # 主頁
├── login.html          # 登錄頁面
├── register.html       # 注冊頁面
├── css/
│   ├── style.css       # 主樣式文件
│   └── responsive.css  # 響應式樣式
├── images/             # 圖片資源
└── js/└── main.js         # JavaScript交互

3. 主頁 (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>美妝佳人 - 高端化妝品商城</title><!-- 引入字體圖標 --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><!-- 引入主樣式 --><link rel="stylesheet" href="css/style.css"><!-- 響應式樣式 --><link rel="stylesheet" href="css/responsive.css">
</head>
<body><!-- 頂部導航欄 --><header class="header"><div class="container"><div class="logo"><a href="index.html">美妝佳人</a></div><nav class="main-nav"><ul><li><a href="index.html" class="active">首頁</a></li><li><a href="#">產品</a></li><li><a href="#">護膚</a></li><li><a href="#">彩妝</a></li><li><a href="#">關于我們</a></li><li><a href="#">聯系我們</a></li></ul></nav><div class="user-actions"><a href="login.html" class="login-btn">登錄</a><a href="register.html" class="register-btn">注冊</a><a href="#" class="cart-btn"><i class="fas fa-shopping-cart"></i></a></div><div class="mobile-menu-btn"><i class="fas fa-bars"></i></div></div></header><!-- 英雄區域/輪播圖 --><section class="hero"><div class="hero-slider"><div class="slide active" style="background-image: url('images/hero1.jpg');"><div class="slide-content"><h1>全新春季系列</h1><p>發現自然之美，煥發肌膚光彩</p><a href="#" class="btn">立即購買</a></div></div><div class="slide" style="background-image: url('images/hero2.jpg');"><div class="slide-content"><h1>限量版口紅</h1><p>24小時持久顯色，打造完美唇妝</p><a href="#" class="btn">立即購買</a></div></div><div class="slide" style="background-image: url('images/hero3.jpg');"><div class="slide-content"><h1>抗衰老精華</h1><p>科學配方，逆轉時光痕跡</p><a href="#" class="btn">立即購買</a></div></div></div><div class="slider-controls"><button class="prev-btn"><i class="fas fa-chevron-left"></i></button><button class="next-btn"><i class="fas fa-chevron-right"></i></button></div><div class="slider-dots"><span class="dot active"></span><span class="dot"></span><span class="dot"></span></div></section><!-- 特色產品區域 --><section class="featured-products"><div class="container"><h2 class="section-title">特色產品</h2><p class="section-subtitle">我們的精選系列</p><div class="products-grid"><div class="product-card"><div class="product-image"><img src="images/product1.jpg" alt="玫瑰精華液"><div class="product-badge">新品</div><div class="product-actions"><button class="quick-view"><i class="fas fa-eye"></i></button><button class="add-to-cart"><i class="fas fa-shopping-cart"></i></button><button class="add-to-wishlist"><i class="fas fa-heart"></i></button></div></div><div class="product-info"><h3 class="product-title">玫瑰精華液</h3><div class="product-price">￥299</div><div class="product-rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i><span>(48)</span></div></div></div><!-- 更多產品卡片... --></div><a href="#" class="view-all-btn">查看所有產品</a></div></section><!-- 品牌故事區域 --><section class="brand-story"><div class="container"><div class="story-content"><h2>我們的故事</h2><p>美妝佳人創立于2010年，致力于為現代女性提供高品質、天然成分的化妝品。我們的產品經過嚴格測試，確保安全有效。</p><p>我們相信，真正的美麗源于健康的肌膚。因此，我們的產品不僅注重外在美，更關注肌膚健康。</p><a href="#" class="btn">了解更多</a></div><div class="story-image"><img src="images/brand-story.jpg" alt="品牌故事"></div></div></section><!-- 頁腳 --><footer class="footer"><div class="container"><div class="footer-columns"><div class="footer-column"><h3>美妝佳人</h3><p>致力于為現代女性提供高品質、天然成分的化妝品。</p><div class="social-links"><a href="#"><i class="fab fa-weixin"></i></a><a href="#"><i class="fab fa-weibo"></i></a><a href="#"><i class="fab fa-douyin"></i></a><a href="#"><i class="fab fa-xiaohongshu"></i></a></div></div><div class="footer-column"><h3>快速鏈接</h3><ul><li><a href="index.html">首頁</a></li><li><a href="#">產品</a></li><li><a href="#">護膚</a></li><li><a href="#">彩妝</a></li><li><a href="#">關于我們</a></li></ul></div><div class="footer-column"><h3>客戶服務</h3><ul><li><a href="#">我的賬戶</a></li><li><a href="#">訂單跟蹤</a></li><li><a href="#">常見問題</a></li><li><a href="#">退貨政策</a></li><li><a href="#">聯系我們</a></li></ul></div><div class="footer-column"><h3>聯系我們</h3><ul class="contact-info"><li><i class="fas fa-map-marker-alt"></i> 上海市浦東新區張江高科技園區</li><li><i class="fas fa-phone"></i> 400-123-4567</li><li><i class="fas fa-envelope"></i> info@meizhuang.com</li></ul></div></div><div class="footer-bottom"><p>&copy; 2023 美妝佳人. 保留所有權利.</p><div class="payment-methods"><i class="fab fa-cc-visa"></i><i class="fab fa-cc-mastercard"></i><i class="fab fa-cc-paypal"></i><i class="fab fa-cc-alipay"></i><i class="fab fa-cc-wechatpay"></i></div></div></div></footer><!-- JavaScript文件 --><script src="js/main.js"></script>
</body>
</html>

4. 登錄頁面 (login.html)

<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><link rel="stylesheet" href="css/style.css">
</head>
<body><!-- 頂部導航欄 --><header class="header"><div class="container"><div class="logo"><a href="index.html">美妝佳人</a></div><nav class="main-nav"><ul><li><a href="index.html">首頁</a></li><li><a href="#">產品</a></li><li><a href="#">護膚</a></li><li><a href="#">彩妝</a></li><li><a href="#">關于我們</a></li></ul></nav><div class="user-actions"><a href="login.html" class="login-btn active">登錄</a><a href="register.html" class="register-btn">注冊</a><a href="#" class="cart-btn"><i class="fas fa-shopping-cart"></i></a></div><div class="mobile-menu-btn"><i class="fas fa-bars"></i></div></div></header><!-- 登錄表單區域 --><section class="auth-section"><div class="container"><div class="auth-container"><div class="auth-image"><img src="images/login-bg.jpg" alt="登錄背景"></div><div class="auth-form"><h2>歡迎回來</h2><p>請登錄您的賬戶</p><form id="loginForm" action="#" method="POST"><div class="form-group"><label for="email">電子郵箱</label><input type="email" id="email" name="email" required placeholder="請輸入您的電子郵箱"><i class="fas fa-envelope icon"></i></div><div class="form-group"><label for="password">密碼</label><input type="password" id="password" name="password" required placeholder="請輸入您的密碼"><i class="fas fa-lock icon"></i><button type="button" class="toggle-password"><i class="fas fa-eye"></i></button></div><div class="form-options"><div class="remember-me"><input type="checkbox" id="remember" name="remember"><label for="remember">記住我</label></div><a href="#" class="forgot-password">忘記密碼?</a></div><button type="submit" class="btn btn-primary">登錄</button><div class="social-login"><p>或使用社交賬號登錄</p><div class="social-buttons"><a href="#" class="social-btn wechat"><i class="fab fa-weixin"></i></a><a href="#" class="social-btn weibo"><i class="fab fa-weibo"></i></a><a href="#" class="social-btn qq"><i class="fab fa-qq"></i></a></div></div><div class="auth-switch">還沒有賬戶? <a href="register.html">立即注冊</a></div></form></div></div></div></section><!-- 頁腳 --><footer class="footer"><!-- 同主頁頁腳 --></footer><script src="js/main.js"></script>
</body>
</html>

5. 注冊頁面 (register.html)

<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><link rel="stylesheet" href="css/style.css">
</head>
<body><!-- 頂部導航欄 --><header class="header"><div class="container"><div class="logo"><a href="index.html">美妝佳人</a></div><nav class="main-nav"><ul><li><a href="index.html">首頁</a></li><li><a href="#">產品</a></li><li><a href="#">護膚</a></li><li><a href="#">彩妝</a></li><li><a href="#">關于我們</a></li></ul></nav><div class="user-actions"><a href="login.html" class="login-btn">登錄</a><a href="register.html" class="register-btn active">注冊</a><a href="#" class="cart-btn"><i class="fas fa-shopping-cart"></i></a></div><div class="mobile-menu-btn"><i class="fas fa-bars"></i></div></div></header><!-- 注冊表單區域 --><section class="auth-section"><div class="container"><div class="auth-container"><div class="auth-image"><img src="images/register-bg.jpg" alt="注冊背景"></div><div class="auth-form"><h2>創建賬戶</h2><p>加入美妝佳人，享受會員特權</p><form id="registerForm" action="#" method="POST"><div class="form-group"><label for="reg-username">用戶名</label><input type="text" id="reg-username" name="username" required placeholder="請輸入用戶名"><i class="fas fa-user icon"></i></div><div class="form-group"><label for="reg-email">電子郵箱</label><input type="email" id="reg-email" name="email" required placeholder="請輸入您的電子郵箱"><i class="fas fa-envelope icon"></i></div><div class="form-group"><label for="reg-password">密碼</label><input type="password" id="reg-password" name="password" required placeholder="請輸入密碼(至少8位)"><i class="fas fa-lock icon"></i><button type="button" class="toggle-password"><i class="fas fa-eye"></i></button><div class="password-strength"><span class="strength-bar"></span><span class="strength-bar"></span><span class="strength-bar"></span><span class="strength-text">密碼強度: 弱</span></div></div><div class="form-group"><label for="reg-confirm-password">確認密碼</label><input type="password" id="reg-confirm-password" name="confirm_password" required placeholder="請再次輸入密碼"><i class="fas fa-lock icon"></i></div><div class="form-group"><label for="reg-phone">手機號碼</label><input type="tel" id="reg-phone" name="phone" placeholder="請輸入手機號碼(可選)"><i class="fas fa-phone icon"></i></div><div class="form-group checkbox-group"><input type="checkbox" id="agree-terms" name="agree_terms" required><label for="agree-terms">我已閱讀并同意<a href="#">用戶協議</a>和<a href="#">隱私政策</a></label></div><button type="submit" class="btn btn-primary">注冊</button><div class="auth-switch">已有賬戶? <a href="login.html">立即登錄</a></div></form></div></div></div></section><!-- 頁腳 --><footer class="footer"><!-- 同主頁頁腳 --></footer><script src="js/main.js"></script>
</body>
</html>

6. CSS樣式文件 (style.css)

/* 基礎樣式重置 */
* {margin: 0;padding: 0;box-sizing: border-box;
}:root {--primary-color: #ff6b9e; /* 主色調 - 粉色 */--secondary-color: #ff8ab4; /* 次色調 - 淺粉色 */--dark-color: #333; /* 深色文字 */--light-color: #fff; /* 淺色文字 */--gray-color: #f5f5f5; /* 背景灰色 */--border-color: #e0e0e0; /* 邊框顏色 */--success-color: #4caf50; /* 成功顏色 */--warning-color: #ff9800; /* 警告顏色 */--danger-color: #f44336; /* 危險顏色 */--shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 陰影效果 */--transition: all 0.3s ease; /* 過渡效果 */
}body {font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;color: var(--dark-color);line-height: 1.6;background-color: #fff;
}a {text-decoration: none;color: inherit;
}ul {list-style: none;
}img {max-width: 100%;height: auto;
}.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 15px;
}.btn {display: inline-block;padding: 10px 20px;background-color: var(--primary-color);color: var(--light-color);border: none;border-radius: 30px;cursor: pointer;transition: var(--transition);font-weight: 500;
}.btn:hover {background-color: var(--secondary-color);transform: translateY(-3px);box-shadow: var(--shadow);
}.section-title {font-size: 2.5rem;margin-bottom: 1rem;text-align: center;color: var(--dark-color);position: relative;padding-bottom: 15px;
}.section-title::after {content: '';position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 80px;height: 3px;background-color: var(--primary-color);
}.section-subtitle {text-align: center;color: #777;margin-bottom: 3rem;font-size: 1.1rem;
}/* 頭部樣式 */
.header {background-color: var(--light-color);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);position: fixed;width: 100%;top: 0;left: 0;z-index: 1000;padding: 15px 0;
}.header .container {display: flex;justify-content: space-between;align-items: center;
}.logo a {font-size: 1.8rem;font-weight: 700;color: var(--primary-color);
}.main-nav ul {display: flex;
}.main-nav ul li {margin: 0 15px;
}.main-nav ul li a {font-weight: 500;padding: 5px 0;position: relative;
}.main-nav ul li a::after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: var(--primary-color);transition: var(--transition);
}.main-nav ul li a:hover::after,
.main-nav ul li a.active::after {width: 100%;
}.main-nav ul li a.active {color: var(--primary-color);
}.user-actions {display: flex;align-items: center;
}.user-actions a {margin-left: 15px;font-weight: 500;
}.login-btn,
.register-btn {padding: 8px 20px;border-radius: 20px;transition: var(--transition);
}.login-btn {border: 1px solid var(--primary-color);color: var(--primary-color);
}.login-btn:hover,
.login-btn.active {background-color: var(--primary-color);color: var(--light-color);
}.register-btn {background-color: var(--primary-color);color: var(--light-color);
}.register-btn:hover,
.register-btn.active {background-color: var(--secondary-color);
}.cart-btn {font-size: 1.2rem;position: relative;
}.cart-btn::after {content: attr(data-count);position: absolute;top: -8px;right: -8px;background-color: var(--danger-color);color: white;width: 18px;height: 18px;border-radius: 50%;font-size: 0.7rem;display: flex;align-items: center;justify-content: center;
}.mobile-menu-btn {font-size: 1.5rem;cursor: pointer;display: none;
}/* 英雄區域/輪播圖 */
.hero {height: 600px;position: relative;overflow: hidden;margin-top: 70px;
}.hero-slider {height: 100%;position: relative;
}.slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;opacity: 0;transition: opacity 1s ease;
}.slide.active {opacity: 1;
}.slide-content {position: absolute;top: 50%;left: 10%;transform: translateY(-50%);max-width: 500px;color: var(--light-color);text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}.slide-content h1 {font-size: 3rem;margin-bottom: 1rem;
}.slide-content p {font-size: 1.2rem;margin-bottom: 2rem;
}.slide-content .btn {background-color: var(--light-color);color: var(--primary-color);font-weight: 600;
}.slide-content .btn:hover {background-color: rgba(255, 255, 255, 0.9);
}.slider-controls {position: absolute;top: 50%;width: 100%;display: flex;justify-content: space-between;transform: translateY(-50%);padding: 0 20px;
}.slider-controls button {background-color: rgba(255, 255, 255, 0.3);border: none;width: 50px;height: 50px;border-radius: 50%;color: var(--light-color);font-size: 1.2rem;cursor: pointer;transition: var(--transition);
}.slider-controls button:hover {background-color: rgba(255, 255, 255, 0.5);
}.slider-dots {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);display: flex;
}.slider-dots .dot {width: 12px;height: 12px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);margin: 0 5px;cursor: pointer;transition: var(--transition);
}.slider-dots .dot.active {background-color: var(--light-color);width: 30px;border-radius: 6px;
}/* 特色產品區域 */
.featured-products {padding: 80px 0;background-color: var(--gray-color);
}.products-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 30px;margin-bottom: 40px;
}.product-card {background-color: var(--light-color);border-radius: 10px;overflow: hidden;box-shadow: var(--shadow);transition: var(--transition);position: relative;
}.product-card:hover {transform: translateY(-10px);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}.product-image {position: relative;height: 250px;overflow: hidden;
}.product-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;
}.product-card:hover .product-image img {transform: scale(1.05);
}.product-badge {position: absolute;top: 15px;right: 15px;background-color: var(--primary-color);color: var(--light-color);padding: 5px 10px;border-radius: 20px;font-size: 0.8rem;font-weight: 500;
}.product-actions {position: absolute;bottom: -50px;left: 0;width: 100%;display: flex;justify-content: center;transition: var(--transition);background-color: rgba(255, 255, 255, 0.9);padding: 10px 0;
}.product-card:hover .product-actions {bottom: 0;
}.product-actions button {width: 40px;height: 40px;border-radius: 50%;border: none;background-color: var(--primary-color);color: var(--light-color);margin: 0 5px;cursor: pointer;transition: var(--transition);
}.product-actions button:hover {background-color: var(--secondary-color);transform: translateY(-3px);
}.product-info {padding: 20px;
}.product-title {font-size: 1.1rem;margin-bottom: 10px;font-weight: 600;
}.product-price {font-size: 1.2rem;color: var(--primary-color);font-weight: 700;margin-bottom: 10px;
}.product-rating {color: #ffc107;font-size: 0.9rem;
}.product-rating span {color: #777;margin-left: 5px;
}.view-all-btn {display: block;text-align: center;margin-top: 30px;color: var(--primary-color);font-weight: 600;text-transform: uppercase;letter-spacing: 1px;transition: var(--transition);
}.view-all-btn:hover {color: var(--secondary-color);letter-spacing: 2px;
}/* 品牌故事區域 */
.brand-story {padding: 80px 0;background-color: var(--light-color);
}.brand-story .container {display: flex;align-items: center;gap: 50px;
}.story-content {flex: 1;
}.story-content h2 {font-size: 2.5rem;margin-bottom: 20px;color: var(--dark-color);
}.story-content p {margin-bottom: 20px;color: #555;
}.story-image {flex: 1;border-radius: 10px;overflow: hidden;box-shadow: var(--shadow);
}.story-image img {width: 100%;height: auto;display: block;
}/* 認證/認證區域 */
/* 頁腳樣式 */
.footer {background-color: #222;color: #aaa;padding: 60px 0 0;
}.footer-columns {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 30px;margin-bottom: 40px;
}.footer-column h3 {color: var(--light-color);font-size: 1.3rem;margin-bottom: 20px;position: relative;padding-bottom: 10px;
}.footer-column h3::after {content: '';position: absolute;bottom: 0;left: 0;width: 40px;height: 2px;background-color: var(--primary-color);
}.footer-column p {margin-bottom: 20px;
}.social-links {display: flex;gap: 15px;
}.social-links a {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;background-color: #333;color: var(--light-color);transition: var(--transition);
}.social-links a:hover {background-color: var(--primary-color);transform: translateY(-5px);
}.footer-column ul li {margin-bottom: 10px;
}.footer-column ul li a {transition: var(--transition);
}.footer-column ul li a:hover {color: var(--primary-color);padding-left: 5px;
}.contact-info li {display: flex;align-items: center;margin-bottom: 15px;
}.contact-info i {margin-right: 10px;color: var(--primary-color);width: 20px;text-align: center;
}.footer-bottom {border-top: 1px solid #333;padding: 20px 0;text-align: center;display: flex;flex-direction: column;align-items: center;
}.payment-methods {margin-top: 15px;display: flex;gap: 15px;font-size: 1.5rem;
}/* 登錄/注冊頁面樣式 */
.auth-section {padding: 100px 0;min-height: calc(100vh - 70px);display: flex;align-items: center;background-color: var(--gray-color);
}.auth-container {display: flex;background-color: var(--light-color);border-radius: 10px;overflow: hidden;box-shadow: var(--shadow);
}.auth-image {flex: 1;display: flex;
}.auth-image img {width: 100%;height: 100%;object-fit: cover;
}.auth-form {flex: 1;padding: 50px;display: flex;flex-direction: column;justify-content: center;
}.auth-form h2 {font-size: 2rem;margin-bottom: 10px;color: var(--dark-color);
}.auth-form p {color: #777;margin-bottom: 30px;
}.form-group {margin-bottom: 20px;position: relative;
}.form-group label {display: block;margin-bottom: 8px;font-weight: 500;
}.form-group input {width: 100%;padding: 12px 15px 12px 40px;border: 1px solid var(--border-color);border-radius: 5px;font-size: 1rem;transition: var(--transition);
}.form-group input:focus {border-color: var(--primary-color);outline: none;box-shadow: 0 0 0 3px rgba(255, 107, 158, 0.2);
}.form-group .icon {position: absolute;left: 15px;top: 40px;color: #999;
}.toggle-password {position: absolute;right: 15px;top: 40px;background: none;border: none;color: #999;cursor: pointer;
}.form-options {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;
}.remember-me {display: flex;align-items: center;
}.remember-me input {margin-right: 8px;
}.forgot-password {color: var(--primary-color);font-weight: 500;
}.btn-primary {width: 100%;padding: 12px;font-size: 1rem;margin-bottom: 20px;
}.social-login {text-align: center;margin-bottom: 20px;
}.social-login p {position: relative;margin: 20px 0;color: #999;
}.social-login p::before,
.social-login p::after {content: '';position: absolute;top: 50%;width: 30%;height: 1px;background-color: var(--border-color);
}.social-login p::before {left: 0;
}.social-login p::after {right: 0;
}.social-buttons {display: flex;justify-content: center;gap: 15px;
}.social-btn {width: 45px;height: 45px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--light-color);font-size: 1.2rem;transition: var(--transition);
}.social-btn.wechat {background-color: #07C160;
}.social-btn.weibo {background-color: #E6162D;
}.social-btn.qq {background-color: #12B7F5;
}.social-btn:hover {transform: translateY(-3px);box-shadow: var(--shadow);
}.auth-switch {text-align: center;color: #777;
}.auth-switch a {color: var(--primary-color);font-weight: 500;
}.password-strength {margin-top: 5px;display: flex;align-items: center;
}.strength-bar {height: 5px;flex: 1;margin-right: 5px;background-color: #eee;border-radius: 3px;overflow: hidden;
}.strength-bar:last-child {margin-right: 0;
}.strength-text {font-size: 0.8rem;color: #777;margin-left: 10px;
}.checkbox-group {display: flex;align-items: center;
}.checkbox-group input {width: auto;margin-right: 10px;
}.checkbox-group label a {color: var(--primary-color);
}/* 響應式設計 */
@media (max-width: 992px) {.hero {height: 500px;}.slide-content h1 {font-size: 2.5rem;}.brand-story .container {flex-direction: column;}.story-image {order: -1;}.auth-container {flex-direction: column;}.auth-image {height: 200px;}
}@media (max-width: 768px) {.main-nav {position: fixed;top: 70px;left: -100%;width: 80%;height: calc(100vh - 70px);background-color: var(--light-color);box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);transition: var(--transition);z-index: 999;}.main-nav.active {left: 0;}.main-nav ul {flex-direction: column;padding: 20px;}.main-nav ul li {margin: 15px 0;}.mobile-menu-btn {display: block;}.hero {height: 400px;}.slide-content {left: 5%;max-width: 90%;}.slide-content h1 {font-size: 2rem;}.section-title {font-size: 2rem;}
}@media (max-width: 576px) {.hero {height: 300px;margin-top: 60px;}.header {padding: 10px 0;}.logo a {font-size: 1.5rem;}.user-actions a {margin-left: 10px;font-size: 0.9rem;}.slide-content h1 {font-size: 1.5rem;}.slide-content p {font-size: 1rem;}.section-title {font-size: 1.8rem;}.auth-form {padding: 30px;}
}

7. JavaScript交互 (main.js)

// 等待DOM完全加載
document.addEventListener('DOMContentLoaded', function() {// 移動菜單切換const mobileMenuBtn = document.querySelector('.mobile-menu-btn');const mainNav = document.querySelector('.main-nav');if (mobileMenuBtn && mainNav) {mobileMenuBtn.addEventListener('click', function() {mainNav.classList.toggle('active');this.querySelector('i').classList.toggle('fa-times');this.querySelector('i').classList.toggle('fa-bars');});}// 輪播圖功能const heroSlider = document.querySelector('.hero-slider');if (heroSlider) {const slides = document.querySelectorAll('.slide');const dots = document.querySelectorAll('.dot');const prevBtn = document.querySelector('.prev-btn');const nextBtn = document.querySelector('.next-btn');let currentSlide = 0;const slideCount = slides.length;// 初始化輪播function showSlide(index) {slides.forEach(slide => slide.classList.remove('active'));dots.forEach(dot => dot.classList.remove('active'));slides[index].classList.add('active');dots[index].classList.add('active');currentSlide = index;}// 下一張function nextSlide() {currentSlide = (currentSlide + 1) % slideCount;showSlide(currentSlide);}// 上一張function prevSlide() {currentSlide = (currentSlide - 1 + slideCount) % slideCount;showSlide(currentSlide);}// 自動輪播let slideInterval = setInterval(nextSlide, 5000);// 鼠標懸停暫停輪播heroSlider.addEventListener('mouseenter', () => {clearInterval(slideInterval);});// 鼠標離開恢復輪播heroSlider.addEventListener('mouseleave', () => {slideInterval = setInterval(nextSlide, 5000);});// 按鈕事件if (nextBtn && prevBtn) {nextBtn.addEventListener('click', nextSlide);prevBtn.addEventListener('click', prevSlide);}// 點導航dots.forEach((dot, index) => {dot.addEventListener('click', () => {showSlide(index);clearInterval(slideInterval);slideInterval = setInterval(nextSlide, 5000);});});// 初始化顯示第一張showSlide(0);}// 密碼顯示/隱藏切換const togglePasswordBtns = document.querySelectorAll('.toggle-password');togglePasswordBtns.forEach(btn => {btn.addEventListener('click', function() {const input = this.parentElement.querySelector('input');const icon = this.querySelector('i');if (input.type === 'password') {input.type = 'text';icon.classList.remove('fa-eye');icon.classList.add('fa-eye-slash');} else {input.type = 'password';icon.classList.remove('fa-eye-slash');icon.classList.add('fa-eye');}});});// 密碼強度檢測const passwordInput = document.getElementById('reg-password');if (passwordInput) {passwordInput.addEventListener('input', function() {const password = this.value;const strengthBars = document.querySelectorAll('.strength-bar');const strengthText = document.querySelector('.strength-text');// 重置樣式strengthBars.forEach(bar => {bar.style.width = '0';bar.style.backgroundColor = '#eee';});if (password.length === 0) {strengthText.textContent = '密碼強度: ';return;}// 簡單密碼強度檢測let strength = 0;// 長度檢測if (password.length >= 8) strength += 1;// 包含小寫字母if (/[a-z]/.test(password)) strength += 1;// 包含大寫字母if (/[A-Z]/.test(password)) strength += 1;// 包含數字if (/[0-9]/.test(password)) strength += 1;// 包含特殊字符if (/[^a-zA-Z0-9]/.test(password)) strength += 1;// 更新UIlet strengthLevel = '';let color = '';if (strength <= 2) {strengthLevel = '弱';color = '#f44336'; // 紅色} else if (strength <= 4) {strengthLevel = '中等';color = '#ff9800'; // 橙色} else {strengthLevel = '強';color = '#4caf50'; // 綠色}strengthText.textContent = `密碼強度: ${strengthLevel}`;// 更新進度條const fillCount = Math.min(strength, strengthBars.length);for (let i = 0; i < fillCount; i++) {strengthBars[i].style.width = '100%';strengthBars[i].style.backgroundColor = color;}});}// 表單驗證const registerForm = document.getElementById('registerForm');if (registerForm) {registerForm.addEventListener('submit', function(e) {e.preventDefault();const password = document.getElementById('reg-password').value;const confirmPassword = document.getElementById('reg-confirm-password').value;const agreeTerms = document.getElementById('agree-terms').checked;// 密碼匹配驗證if (password !== confirmPassword) {alert('兩次輸入的密碼不一致！');return;}// 條款同意驗證if (!agreeTerms) {alert('請閱讀并同意用戶協議和隱私政策！');return;}// 表單提交（這里只是模擬）alert('注冊成功！即將跳轉到首頁...');setTimeout(() => {window.location.href = 'index.html';}, 1500);});}const loginForm = document.getElementById('loginForm');if (loginForm) {loginForm.addEventListener('submit', function(e) {e.preventDefault();// 這里可以添加登錄驗證邏輯alert('登錄成功！即將跳轉到首頁...');setTimeout(() => {window.location.href = 'index.html';}, 1500);});}// 購物車數量模擬const cartBtn = document.querySelector('.cart-btn');if (cartBtn) {cartBtn.setAttribute('data-count', '3');}// 產品卡片懸停效果const productCards = document.querySelectorAll('.product-card');productCards.forEach(card => {card.addEventListener('mouseenter', function() {this.querySelector('.product-actions').style.bottom = '0';});card.addEventListener('mouseleave', function() {this.querySelector('.product-actions').style.bottom = '-50px';});});
});

8. 響應式樣式 (responsive.css)

/* 響應式設計補充樣式 *//* 中等屏幕 (992px - 1200px) */
@media (max-width: 1200px) {.products-grid {grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));}.auth-form {padding: 40px;}
}/* 平板設備 (768px - 992px) */
@media (max-width: 992px) {.header .container {padding: 0 20px;}.hero {height: 450px;}.slide-content h1 {font-size: 2.2rem;}.section-title {font-size: 2.2rem;}.footer-columns {grid-template-columns: repeat(2, 1fr);}.auth-container {max-width: 90%;margin: 0 auto;}
}/* 小型平板和大手機 (576px - 768px) */
@media (max-width: 768px) {.header {padding: 10px 0;}.logo a {font-size: 1.6rem;}.user-actions a {font-size: 0.9rem;margin-left: 10px;padding: 6px 12px;}.hero {height: 350px;margin-top: 60px;}.slide-content {left: 5%;}.slide-content h1 {font-size: 1.8rem;}.slide-content p {font-size: 1rem;margin-bottom: 1.5rem;}.section-title {font-size: 2rem;}.brand-story .container {flex-direction: column;}.story-image {margin-bottom: 30px;}.footer-columns {grid-template-columns: 1fr;}.auth-form {padding: 30px;}
}/* 小型手機 (< 576px) */
@media (max-width: 576px) {.hero {height: 300px;}.slide-content h1 {font-size: 1.5rem;}.slide-content .btn {padding: 8px 16px;font-size: 0.9rem;}.slider-controls button {width: 40px;height: 40px;font-size: 1rem;}.section-title {font-size: 1.8rem;}.products-grid {grid-template-columns: 1fr;}.auth-container {max-width: 100%;border-radius: 0;}.auth-image {display: none;}.auth-form {padding: 25px;}
}/* 超小設備 (< 400px) */
@media (max-width: 400px) {.hero {height: 250px;}.slide-content h1 {font-size: 1.3rem;}.slide-content p {font-size: 0.9rem;}.section-title {font-size: 1.5rem;}.section-subtitle {font-size: 1rem;}.user-actions .login-btn,.user-actions .register-btn {display: none;}.mobile-menu-btn {margin-left: auto;}
}