CSS3学习教程，从入门到精通， 化装品网站 HTML5 + CSS3 完整项目（26） ...

莱莱  论坛元老 | 2025-4-5 09:41:47 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1872|帖子 1872|积分 5616

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
化装品网站 HTML5 + CSS3 完整项目

下面是一个完整的化装品网站项目，包罗主页、登录页面和注册页面。我将按照您的要求提供具体的代码和注释。
1. 网站规划与需求分析

需求分析


  • 展示化装品产物信息
  • 提供用户注册和登录功能
  • 相应式设计，适配不同装备
  • 美观的视觉结果吸引用户
  • 清楚的导航结构
风格定位



  • 现代简约风格
  • 柔和的色彩搭配（粉色、白色为主）
  • 圆角设计元素
  • 高清产物图片展示
2. 项目结构

  1. cosmetics-website/
  2. ├── index.html          # 主页
  3. ├── login.html          # 登录页面
  4. ├── register.html       # 注册页面
  5. ├── css/
  6. │   ├── style.css       # 主样式文件
  7. │   └── responsive.css  # 响应式样式
  8. ├── images/             # 图片资源
  9. └── js/
  10.     └── main.js         # JavaScript交互
复制代码
3. 主页 (index.html)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>美妆佳人 - 高端化妆品商城</title>
  7.     <!-- 引入字体图标 -->
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  9.     <!-- 引入主样式 -->
  10.     <link rel="stylesheet" href="css/style.css">
  11.     <!-- 响应式样式 -->
  12.     <link rel="stylesheet" href="css/responsive.css">
  13. </head>
  14. <body>
  15.     <!-- 顶部导航栏 -->
  16.     <header class="header">
  17.         <div class="container">
  18.             <div class="logo">
  19.                 <a href="index.html">美妆佳人</a>
  20.             </div>
  21.             <nav class="main-nav">
  22.                 <ul>
  23.                     <li><a href="index.html" class="active">首页</a></li>
  24.                     <li><a href="#">产品</a></li>
  25.                     <li><a href="#">护肤</a></li>
  26.                     <li><a href="#">彩妆</a></li>
  27.                     <li><a href="#">关于我们</a></li>
  28.                     <li><a href="#">联系我们</a></li>
  29.                 </ul>
  30.             </nav>
  31.             <div class="user-actions">
  32.                 <a href="login.html" class="login-btn">登录</a>
  33.                 <a href="register.html" class="register-btn">注册</a>
  34.                 <a href="#" class="cart-btn"><i class="fas fa-shopping-cart"></i></a>
  35.             </div>
  36.             <div class="mobile-menu-btn">
  37.                 <i class="fas fa-bars"></i>
  38.             </div>
  39.         </div>
  40.     </header>
  42.     <!-- 英雄区域/轮播图 -->
  43.     <section class="hero">
  44.         <div class="hero-slider">
  45.             <div class="slide active" style="background-image: url('images/hero1.jpg');">
  46.                 <div class="slide-content">
  47.                     <h1>全新春季系列</h1>
  48.                     <p>发现自然之美，焕发肌肤光彩</p>
  49.                     <a href="#" class="btn">立即购买</a>
  50.                 </div>
  51.             </div>
  52.             <div class="slide" style="background-image: url('images/hero2.jpg');">
  53.                 <div class="slide-content">
  54.                     <h1>限量版口红</h1>
  55.                     <p>24小时持久显色，打造完美唇妆</p>
  56.                     <a href="#" class="btn">立即购买</a>
  57.                 </div>
  58.             </div>
  59.             <div class="slide" style="background-image: url('images/hero3.jpg');">
  60.                 <div class="slide-content">
  61.                     <h1>抗衰老精华</h1>
  62.                     <p>科学配方，逆转时光痕迹</p>
  63.                     <a href="#" class="btn">立即购买</a>
  64.                 </div>
  65.             </div>
  66.         </div>
  67.         <div class="slider-controls">
  68.             <button class="prev-btn"><i class="fas fa-chevron-left"></i></button>
  69.             <button class="next-btn"><i class="fas fa-chevron-right"></i></button>
  70.         </div>
  71.         <div class="slider-dots">
  72.             <span class="dot active"></span>
  73.             <span class="dot"></span>
  74.             <span class="dot"></span>
  75.         </div>
  76.     </section>
  78.     <!-- 特色产品区域 -->
  79.     <section class="featured-products">
  80.         <div class="container">
  81.             <h2 class="section-title">特色产品</h2>
  82.             <p class="section-subtitle">我们的精选系列</p>
  83.             <div class="products-grid">
  84.                 <div class="product-card">
  85.                     <div class="product-image">
  86.                         <img src="images/product1.jpg" alt="玫瑰精华液">
  87.                         <div class="product-badge">新品</div>
  88.                         <div class="product-actions">
  89.                             <button class="quick-view"><i class="fas fa-eye"></i></button>
  90.                             <button class="add-to-cart"><i class="fas fa-shopping-cart"></i></button>
  91.                             <button class="add-to-wishlist"><i class="fas fa-heart"></i></button>
  92.                         </div>
  93.                     </div>
  94.                     <div class="product-info">
  95.                         <h3 class="product-title">玫瑰精华液</h3>
  96.                         <div class="product-price">¥299</div>
  97.                         <div class="product-rating">
  98.                             <i class="fas fa-star"></i>
  99.                             <i class="fas fa-star"></i>
  100.                             <i class="fas fa-star"></i>
  101.                             <i class="fas fa-star"></i>
  102.                             <i class="fas fa-star-half-alt"></i>
  103.                             <span>(48)</span>
  104.                         </div>
  105.                     </div>
  106.                 </div>
  107.                 <!-- 更多产品卡片... -->
  108.             </div>
  109.             <a href="#" class="view-all-btn">查看所有产品</a>
  110.         </div>
  111.     </section>
  113.     <!-- 品牌故事区域 -->
  114.     <section class="brand-story">
  115.         <div class="container">
  116.             <div class="story-content">
  117.                 <h2>我们的故事</h2>
  118.                 <p>美妆佳人创立于2010年，致力于为现代女性提供高品质、天然成分的化妆品。我们的产品经过严格测试，确保安全有效。</p>
  119.                 <p>我们相信，真正的美丽源于健康的肌肤。因此，我们的产品不仅注重外在美，更关注肌肤健康。</p>
  120.                 <a href="#" class="btn">了解更多</a>
  121.             </div>
  122.             <div class="story-image">
  123.                 <img src="images/brand-story.jpg" alt="品牌故事">
  124.             </div>
  125.         </div>
  126.     </section>
  128.     <!-- 页脚 -->
  129.     <footer class="footer">
  130.         <div class="container">
  131.             <div class="footer-columns">
  132.                 <div class="footer-column">
  133.                     <h3>美妆佳人</h3>
  134.                     <p>致力于为现代女性提供高品质、天然成分的化妆品。</p>
  135.                     <div class="social-links">
  136.                         <a href="#"><i class="fab fa-weixin"></i></a>
  137.                         <a href="#"><i class="fab fa-weibo"></i></a>
  138.                         <a href="#"><i class="fab fa-douyin"></i></a>
  139.                         <a href="#"><i class="fab fa-xiaohongshu"></i></a>
  140.                     </div>
  141.                 </div>
  142.                 <div class="footer-column">
  143.                     <h3>快速链接</h3>
  144.                     <ul>
  145.                         <li><a href="index.html">首页</a></li>
  146.                         <li><a href="#">产品</a></li>
  147.                         <li><a href="#">护肤</a></li>
  148.                         <li><a href="#">彩妆</a></li>
  149.                         <li><a href="#">关于我们</a></li>
  150.                     </ul>
  151.                 </div>
  152.                 <div class="footer-column">
  153.                     <h3>客户服务</h3>
  154.                     <ul>
  155.                         <li><a href="#">我的账户</a></li>
  156.                         <li><a href="#">订单跟踪</a></li>
  157.                         <li><a href="#">常见问题</a></li>
  158.                         <li><a href="#">退货政策</a></li>
  159.                         <li><a href="#">联系我们</a></li>
  160.                     </ul>
  161.                 </div>
  162.                 <div class="footer-column">
  163.                     <h3>联系我们</h3>
  164.                     <ul class="contact-info">
  165.                         <li><i class="fas fa-map-marker-alt"></i> 上海市浦东新区张江高科技园区</li>
  166.                         <li><i class="fas fa-phone"></i> 400-123-4567</li>
  167.                         <li><i class="fas fa-envelope"></i> info@meizhuang.com</li>
  168.                     </ul>
  169.                 </div>
  170.             </div>
  171.             <div class="footer-bottom">
  172.                 <p>&copy; 2023 美妆佳人. 保留所有权利.</p>
  173.                 <div class="payment-methods">
  174.                     <i class="fab fa-cc-visa"></i>
  175.                     <i class="fab fa-cc-mastercard"></i>
  176.                     <i class="fab fa-cc-paypal"></i>
  177.                     <i class="fab fa-cc-alipay"></i>
  178.                     <i class="fab fa-cc-wechatpay"></i>
  179.                 </div>
  180.             </div>
  181.         </div>
  182.     </footer>
  184.     <!-- JavaScript文件 -->
  185.     <script src="js/main.js"></script>
  186. </body>
  187. </html>
复制代码
4. 登录页面 (login.html)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>登录 - 美妆佳人</title>
  7.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  8.     <link rel="stylesheet" href="css/style.css">
  9. </head>
  10. <body>
  11.     <!-- 顶部导航栏 -->
  12.     <header class="header">
  13.         <div class="container">
  14.             <div class="logo">
  15.                 <a href="index.html">美妆佳人</a>
  16.             </div>
  17.             <nav class="main-nav">
  18.                 <ul>
  19.                     <li><a href="index.html">首页</a></li>
  20.                     <li><a href="#">产品</a></li>
  21.                     <li><a href="#">护肤</a></li>
  22.                     <li><a href="#">彩妆</a></li>
  23.                     <li><a href="#">关于我们</a></li>
  24.                 </ul>
  25.             </nav>
  26.             <div class="user-actions">
  27.                 <a href="login.html" class="login-btn active">登录</a>
  28.                 <a href="register.html" class="register-btn">注册</a>
  29.                 <a href="#" class="cart-btn"><i class="fas fa-shopping-cart"></i></a>
  30.             </div>
  31.             <div class="mobile-menu-btn">
  32.                 <i class="fas fa-bars"></i>
  33.             </div>
  34.         </div>
  35.     </header>
  37.     <!-- 登录表单区域 -->
  38.     <section class="auth-section">
  39.         <div class="container">
  40.             <div class="auth-container">
  41.                 <div class="auth-image">
  42.                     <img src="images/login-bg.jpg" alt="登录背景">
  43.                 </div>
  44.                 <div class="auth-form">
  45.                     <h2>欢迎回来</h2>
  46.                     <p>请登录您的账户</p>
  47.                     
  48.                     <form id="loginForm" action="#" method="POST">
  49.                         <div class="form-group">
  50.                             <label for="email">电子邮箱</label>
  51.                             <input type="email" id="email" name="email" required placeholder="请输入您的电子邮箱">
  52.                             <i class="fas fa-envelope icon"></i>
  53.                         </div>
  54.                         <div class="form-group">
  55.                             <label for="password">密码</label>
  56.                             <input type="password" id="password" name="password" required placeholder="请输入您的密码">
  57.                             <i class="fas fa-lock icon"></i>
  58.                             <button type="button" class="toggle-password"><i class="fas fa-eye"></i></button>
  59.                         </div>
  60.                         <div class="form-options">
  61.                             <div class="remember-me">
  62.                                 <input type="checkbox" id="remember" name="remember">
  63.                                 <label for="remember">记住我</label>
  64.                             </div>
  65.                             <a href="#" class="forgot-password">忘记密码?</a>
  66.                         </div>
  67.                         <button type="submit" class="btn btn-primary">登录</button>
  68.                         <div class="social-login">
  69.                             <p>或使用社交账号登录</p>
  70.                             <div class="social-buttons">
  71.                                 <a href="#" class="social-btn wechat"><i class="fab fa-weixin"></i></a>
  72.                                 <a href="#" class="social-btn weibo"><i class="fab fa-weibo"></i></a>
  73.                                 <a href="#" class="social-btn qq"><i class="fab fa-qq"></i></a>
  74.                             </div>
  75.                         </div>
  76.                         <div class="auth-switch">
  77.                             还没有账户? <a href="register.html">立即注册</a>
  78.                         </div>
  79.                     </form>
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </section>
  85.     <!-- 页脚 -->
  86.     <footer class="footer">
  87.         <!-- 同主页页脚 -->
  88.     </footer>
  90.     <script src="js/main.js"></script>
  91. </body>
  92. </html>
复制代码
5. 注册页面 (register.html)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>注册 - 美妆佳人</title>
  7.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  8.     <link rel="stylesheet" href="css/style.css">
  9. </head>
  10. <body>
  11.     <!-- 顶部导航栏 -->
  12.     <header class="header">
  13.         <div class="container">
  14.             <div class="logo">
  15.                 <a href="index.html">美妆佳人</a>
  16.             </div>
  17.             <nav class="main-nav">
  18.                 <ul>
  19.                     <li><a href="index.html">首页</a></li>
  20.                     <li><a href="#">产品</a></li>
  21.                     <li><a href="#">护肤</a></li>
  22.                     <li><a href="#">彩妆</a></li>
  23.                     <li><a href="#">关于我们</a></li>
  24.                 </ul>
  25.             </nav>
  26.             <div class="user-actions">
  27.                 <a href="login.html" class="login-btn">登录</a>
  28.                 <a href="register.html" class="register-btn active">注册</a>
  29.                 <a href="#" class="cart-btn"><i class="fas fa-shopping-cart"></i></a>
  30.             </div>
  31.             <div class="mobile-menu-btn">
  32.                 <i class="fas fa-bars"></i>
  33.             </div>
  34.         </div>
  35.     </header>
  37.     <!-- 注册表单区域 -->
  38.     <section class="auth-section">
  39.         <div class="container">
  40.             <div class="auth-container">
  41.                 <div class="auth-image">
  42.                     <img src="images/register-bg.jpg" alt="注册背景">
  43.                 </div>
  44.                 <div class="auth-form">
  45.                     <h2>创建账户</h2>
  46.                     <p>加入美妆佳人，享受会员特权</p>
  47.                     
  48.                     <form id="registerForm" action="#" method="POST">
  49.                         <div class="form-group">
  50.                             <label for="reg-username">用户名</label>
  51.                             <input type="text" id="reg-username" name="username" required placeholder="请输入用户名">
  52.                             <i class="fas fa-user icon"></i>
  53.                         </div>
  54.                         <div class="form-group">
  55.                             <label for="reg-email">电子邮箱</label>
  56.                             <input type="email" id="reg-email" name="email" required placeholder="请输入您的电子邮箱">
  57.                             <i class="fas fa-envelope icon"></i>
  58.                         </div>
  59.                         <div class="form-group">
  60.                             <label for="reg-password">密码</label>
  61.                             <input type="password" id="reg-password" name="password" required placeholder="请输入密码(至少8位)">
  62.                             <i class="fas fa-lock icon"></i>
  63.                             <button type="button" class="toggle-password"><i class="fas fa-eye"></i></button>
  64.                             <div class="password-strength">
  65.                                 <span class="strength-bar"></span>
  66.                                 <span class="strength-bar"></span>
  67.                                 <span class="strength-bar"></span>
  68.                                 <span class="strength-text">密码强度: 弱</span>
  69.                             </div>
  70.                         </div>
  71.                         <div class="form-group">
  72.                             <label for="reg-confirm-password">确认密码</label>
  73.                             <input type="password" id="reg-confirm-password" name="confirm_password" required placeholder="请再次输入密码">
  74.                             <i class="fas fa-lock icon"></i>
  75.                         </div>
  76.                         <div class="form-group">
  77.                             <label for="reg-phone">手机号码</label>
  78.                             <input type="tel" id="reg-phone" name="phone" placeholder="请输入手机号码(可选)">
  79.                             <i class="fas fa-phone icon"></i>
  80.                         </div>
  81.                         <div class="form-group checkbox-group">
  82.                             <input type="checkbox" id="agree-terms" name="agree_terms" required>
  83.                             <label for="agree-terms">我已阅读并同意<a href="#">用户协议</a>和<a href="#">隐私政策</a></label>
  84.                         </div>
  85.                         <button type="submit" class="btn btn-primary">注册</button>
  86.                         <div class="auth-switch">
  87.                             已有账户? <a href="login.html">立即登录</a>
  88.                         </div>
  89.                     </form>
  90.                 </div>
  91.             </div>
  92.         </div>
  93.     </section>
  95.     <!-- 页脚 -->
  96.     <footer class="footer">
  97.         <!-- 同主页页脚 -->
  98.     </footer>
  100.     <script src="js/main.js"></script>
  101. </body>
  102. </html>
复制代码
6. CSS样式文件 (style.css)

  1. /* 基础样式重置 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. :root {
  9.     --primary-color: #ff6b9e; /* 主色调 - 粉色 */
  10.     --secondary-color: #ff8ab4; /* 次色调 - 浅粉色 */
  11.     --dark-color: #333; /* 深色文字 */
  12.     --light-color: #fff; /* 浅色文字 */
  13.     --gray-color: #f5f5f5; /* 背景灰色 */
  14.     --border-color: #e0e0e0; /* 边框颜色 */
  15.     --success-color: #4caf50; /* 成功颜色 */
  16.     --warning-color: #ff9800; /* 警告颜色 */
  17.     --danger-color: #f44336; /* 危险颜色 */
  18.     --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  19.     --transition: all 0.3s ease; /* 过渡效果 */
  20. }
  22. body {
  23.     font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  24.     color: var(--dark-color);
  25.     line-height: 1.6;
  26.     background-color: #fff;
  27. }
  29. a {
  30.     text-decoration: none;
  31.     color: inherit;
  32. }
  34. ul {
  35.     list-style: none;
  36. }
  38. img {
  39.     max-width: 100%;
  40.     height: auto;
  41. }
  43. .container {
  44.     width: 100%;
  45.     max-width: 1200px;
  46.     margin: 0 auto;
  47.     padding: 0 15px;
  48. }
  50. .btn {
  51.     display: inline-block;
  52.     padding: 10px 20px;
  53.     background-color: var(--primary-color);
  54.     color: var(--light-color);
  55.     border: none;
  56.     border-radius: 30px;
  57.     cursor: pointer;
  58.     transition: var(--transition);
  59.     font-weight: 500;
  60. }
  62. .btn:hover {
  63.     background-color: var(--secondary-color);
  64.     transform: translateY(-3px);
  65.     box-shadow: var(--shadow);
  66. }
  68. .section-title {
  69.     font-size: 2.5rem;
  70.     margin-bottom: 1rem;
  71.     text-align: center;
  72.     color: var(--dark-color);
  73.     position: relative;
  74.     padding-bottom: 15px;
  75. }
  77. .section-title::after {
  78.     content: '';
  79.     position: absolute;
  80.     bottom: 0;
  81.     left: 50%;
  82.     transform: translateX(-50%);
  83.     width: 80px;
  84.     height: 3px;
  85.     background-color: var(--primary-color);
  86. }
  88. .section-subtitle {
  89.     text-align: center;
  90.     color: #777;
  91.     margin-bottom: 3rem;
  92.     font-size: 1.1rem;
  93. }
  95. /* 头部样式 */
  96. .header {
  97.     background-color: var(--light-color);
  98.     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  99.     position: fixed;
  100.     width: 100%;
  101.     top: 0;
  102.     left: 0;
  103.     z-index: 1000;
  104.     padding: 15px 0;
  105. }
  107. .header .container {
  108.     display: flex;
  109.     justify-content: space-between;
  110.     align-items: center;
  111. }
  113. .logo a {
  114.     font-size: 1.8rem;
  115.     font-weight: 700;
  116.     color: var(--primary-color);
  117. }
  119. .main-nav ul {
  120.     display: flex;
  121. }
  123. .main-nav ul li {
  124.     margin: 0 15px;
  125. }
  127. .main-nav ul li a {
  128.     font-weight: 500;
  129.     padding: 5px 0;
  130.     position: relative;
  131. }
  133. .main-nav ul li a::after {
  134.     content: '';
  135.     position: absolute;
  136.     bottom: 0;
  137.     left: 0;
  138.     width: 0;
  139.     height: 2px;
  140.     background-color: var(--primary-color);
  141.     transition: var(--transition);
  142. }
  144. .main-nav ul li a:hover::after,
  145. .main-nav ul li a.active::after {
  146.     width: 100%;
  147. }
  149. .main-nav ul li a.active {
  150.     color: var(--primary-color);
  151. }
  153. .user-actions {
  154.     display: flex;
  155.     align-items: center;
  156. }
  158. .user-actions a {
  159.     margin-left: 15px;
  160.     font-weight: 500;
  161. }
  163. .login-btn,
  164. .register-btn {
  165.     padding: 8px 20px;
  166.     border-radius: 20px;
  167.     transition: var(--transition);
  168. }
  170. .login-btn {
  171.     border: 1px solid var(--primary-color);
  172.     color: var(--primary-color);
  173. }
  175. .login-btn:hover,
  176. .login-btn.active {
  177.     background-color: var(--primary-color);
  178.     color: var(--light-color);
  179. }
  181. .register-btn {
  182.     background-color: var(--primary-color);
  183.     color: var(--light-color);
  184. }
  186. .register-btn:hover,
  187. .register-btn.active {
  188.     background-color: var(--secondary-color);
  189. }
  191. .cart-btn {
  192.     font-size: 1.2rem;
  193.     position: relative;
  194. }
  196. .cart-btn::after {
  197.     content: attr(data-count);
  198.     position: absolute;
  199.     top: -8px;
  200.     right: -8px;
  201.     background-color: var(--danger-color);
  202.     color: white;
  203.     width: 18px;
  204.     height: 18px;
  205.     border-radius: 50%;
  206.     font-size: 0.7rem;
  207.     display: flex;
  208.     align-items: center;
  209.     justify-content: center;
  210. }
  212. .mobile-menu-btn {
  213.     font-size: 1.5rem;
  214.     cursor: pointer;
  215.     display: none;
  216. }
  218. /* 英雄区域/轮播图 */
  219. .hero {
  220.     height: 600px;
  221.     position: relative;
  222.     overflow: hidden;
  223.     margin-top: 70px;
  224. }
  226. .hero-slider {
  227.     height: 100%;
  228.     position: relative;
  229. }
  231. .slide {
  232.     position: absolute;
  233.     top: 0;
  234.     left: 0;
  235.     width: 100%;
  236.     height: 100%;
  237.     background-size: cover;
  238.     background-position: center;
  239.     opacity: 0;
  240.     transition: opacity 1s ease;
  241. }
  243. .slide.active {
  244.     opacity: 1;
  245. }
  247. .slide-content {
  248.     position: absolute;
  249.     top: 50%;
  250.     left: 10%;
  251.     transform: translateY(-50%);
  252.     max-width: 500px;
  253.     color: var(--light-color);
  254.     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  255. }
  257. .slide-content h1 {
  258.     font-size: 3rem;
  259.     margin-bottom: 1rem;
  260. }
  262. .slide-content p {
  263.     font-size: 1.2rem;
  264.     margin-bottom: 2rem;
  265. }
  267. .slide-content .btn {
  268.     background-color: var(--light-color);
  269.     color: var(--primary-color);
  270.     font-weight: 600;
  271. }
  273. .slide-content .btn:hover {
  274.     background-color: rgba(255, 255, 255, 0.9);
  275. }
  277. .slider-controls {
  278.     position: absolute;
  279.     top: 50%;
  280.     width: 100%;
  281.     display: flex;
  282.     justify-content: space-between;
  283.     transform: translateY(-50%);
  284.     padding: 0 20px;
  285. }
  287. .slider-controls button {
  288.     background-color: rgba(255, 255, 255, 0.3);
  289.     border: none;
  290.     width: 50px;
  291.     height: 50px;
  292.     border-radius: 50%;
  293.     color: var(--light-color);
  294.     font-size: 1.2rem;
  295.     cursor: pointer;
  296.     transition: var(--transition);
  297. }
  299. .slider-controls button:hover {
  300.     background-color: rgba(255, 255, 255, 0.5);
  301. }
  303. .slider-dots {
  304.     position: absolute;
  305.     bottom: 30px;
  306.     left: 50%;
  307.     transform: translateX(-50%);
  308.     display: flex;
  309. }
  311. .slider-dots .dot {
  312.     width: 12px;
  313.     height: 12px;
  314.     border-radius: 50%;
  315.     background-color: rgba(255, 255, 255, 0.5);
  316.     margin: 0 5px;
  317.     cursor: pointer;
  318.     transition: var(--transition);
  319. }
  321. .slider-dots .dot.active {
  322.     background-color: var(--light-color);
  323.     width: 30px;
  324.     border-radius: 6px;
  325. }
  327. /* 特色产品区域 */
  328. .featured-products {
  329.     padding: 80px 0;
  330.     background-color: var(--gray-color);
  331. }
  333. .products-grid {
  334.     display: grid;
  335.     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  336.     gap: 30px;
  337.     margin-bottom: 40px;
  338. }
  340. .product-card {
  341.     background-color: var(--light-color);
  342.     border-radius: 10px;
  343.     overflow: hidden;
  344.     box-shadow: var(--shadow);
  345.     transition: var(--transition);
  346.     position: relative;
  347. }
  349. .product-card:hover {
  350.     transform: translateY(-10px);
  351.     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  352. }
  354. .product-image {
  355.     position: relative;
  356.     height: 250px;
  357.     overflow: hidden;
  358. }
  360. .product-image img {
  361.     width: 100%;
  362.     height: 100%;
  363.     object-fit: cover;
  364.     transition: transform 0.5s ease;
  365. }
  367. .product-card:hover .product-image img {
  368.     transform: scale(1.05);
  369. }
  371. .product-badge {
  372.     position: absolute;
  373.     top: 15px;
  374.     right: 15px;
  375.     background-color: var(--primary-color);
  376.     color: var(--light-color);
  377.     padding: 5px 10px;
  378.     border-radius: 20px;
  379.     font-size: 0.8rem;
  380.     font-weight: 500;
  381. }
  383. .product-actions {
  384.     position: absolute;
  385.     bottom: -50px;
  386.     left: 0;
  387.     width: 100%;
  388.     display: flex;
  389.     justify-content: center;
  390.     transition: var(--transition);
  391.     background-color: rgba(255, 255, 255, 0.9);
  392.     padding: 10px 0;
  393. }
  395. .product-card:hover .product-actions {
  396.     bottom: 0;
  397. }
  399. .product-actions button {
  400.     width: 40px;
  401.     height: 40px;
  402.     border-radius: 50%;
  403.     border: none;
  404.     background-color: var(--primary-color);
  405.     color: var(--light-color);
  406.     margin: 0 5px;
  407.     cursor: pointer;
  408.     transition: var(--transition);
  409. }
  411. .product-actions button:hover {
  412.     background-color: var(--secondary-color);
  413.     transform: translateY(-3px);
  414. }
  416. .product-info {
  417.     padding: 20px;
  418. }
  420. .product-title {
  421.     font-size: 1.1rem;
  422.     margin-bottom: 10px;
  423.     font-weight: 600;
  424. }
  426. .product-price {
  427.     font-size: 1.2rem;
  428.     color: var(--primary-color);
  429.     font-weight: 700;
  430.     margin-bottom: 10px;
  431. }
  433. .product-rating {
  434.     color: #ffc107;
  435.     font-size: 0.9rem;
  436. }
  438. .product-rating span {
  439.     color: #777;
  440.     margin-left: 5px;
  441. }
  443. .view-all-btn {
  444.     display: block;
  445.     text-align: center;
  446.     margin-top: 30px;
  447.     color: var(--primary-color);
  448.     font-weight: 600;
  449.     text-transform: uppercase;
  450.     letter-spacing: 1px;
  451.     transition: var(--transition);
  452. }
  454. .view-all-btn:hover {
  455.     color: var(--secondary-color);
  456.     letter-spacing: 2px;
  457. }
  459. /* 品牌故事区域 */
  460. .brand-story {
  461.     padding: 80px 0;
  462.     background-color: var(--light-color);
  463. }
  465. .brand-story .container {
  466.     display: flex;
  467.     align-items: center;
  468.     gap: 50px;
  469. }
  471. .story-content {
  472.     flex: 1;
  473. }
  475. .story-content h2 {
  476.     font-size: 2.5rem;
  477.     margin-bottom: 20px;
  478.     color: var(--dark-color);
  479. }
  481. .story-content p {
  482.     margin-bottom: 20px;
  483.     color: #555;
  484. }
  486. .story-image {
  487.     flex: 1;
  488.     border-radius: 10px;
  489.     overflow: hidden;
  490.     box-shadow: var(--shadow);
  491. }
  493. .story-image img {
  494.     width: 100%;
  495.     height: auto;
  496.     display: block;
  497. }
  499. /* 认证/认证区域 */
  500. /* 页脚样式 */
  501. .footer {
  502.     background-color: #222;
  503.     color: #aaa;
  504.     padding: 60px 0 0;
  505. }
  507. .footer-columns {
  508.     display: grid;
  509.     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  510.     gap: 30px;
  511.     margin-bottom: 40px;
  512. }
  514. .footer-column h3 {
  515.     color: var(--light-color);
  516.     font-size: 1.3rem;
  517.     margin-bottom: 20px;
  518.     position: relative;
  519.     padding-bottom: 10px;
  520. }
  522. .footer-column h3::after {
  523.     content: '';
  524.     position: absolute;
  525.     bottom: 0;
  526.     left: 0;
  527.     width: 40px;
  528.     height: 2px;
  529.     background-color: var(--primary-color);
  530. }
  532. .footer-column p {
  533.     margin-bottom: 20px;
  534. }
  536. .social-links {
  537.     display: flex;
  538.     gap: 15px;
  539. }
  541. .social-links a {
  542.     display: flex;
  543.     align-items: center;
  544.     justify-content: center;
  545.     width: 40px;
  546.     height: 40px;
  547.     border-radius: 50%;
  548.     background-color: #333;
  549.     color: var(--light-color);
  550.     transition: var(--transition);
  551. }
  553. .social-links a:hover {
  554.     background-color: var(--primary-color);
  555.     transform: translateY(-5px);
  556. }
  558. .footer-column ul li {
  559.     margin-bottom: 10px;
  560. }
  562. .footer-column ul li a {
  563.     transition: var(--transition);
  564. }
  566. .footer-column ul li a:hover {
  567.     color: var(--primary-color);
  568.     padding-left: 5px;
  569. }
  571. .contact-info li {
  572.     display: flex;
  573.     align-items: center;
  574.     margin-bottom: 15px;
  575. }
  577. .contact-info i {
  578.     margin-right: 10px;
  579.     color: var(--primary-color);
  580.     width: 20px;
  581.     text-align: center;
  582. }
  584. .footer-bottom {
  585.     border-top: 1px solid #333;
  586.     padding: 20px 0;
  587.     text-align: center;
  588.     display: flex;
  589.     flex-direction: column;
  590.     align-items: center;
  591. }
  593. .payment-methods {
  594.     margin-top: 15px;
  595.     display: flex;
  596.     gap: 15px;
  597.     font-size: 1.5rem;
  598. }
  600. /* 登录/注册页面样式 */
  601. .auth-section {
  602.     padding: 100px 0;
  603.     min-height: calc(100vh - 70px);
  604.     display: flex;
  605.     align-items: center;
  606.     background-color: var(--gray-color);
  607. }
  609. .auth-container {
  610.     display: flex;
  611.     background-color: var(--light-color);
  612.     border-radius: 10px;
  613.     overflow: hidden;
  614.     box-shadow: var(--shadow);
  615. }
  617. .auth-image {
  618.     flex: 1;
  619.     display: flex;
  620. }
  622. .auth-image img {
  623.     width: 100%;
  624.     height: 100%;
  625.     object-fit: cover;
  626. }
  628. .auth-form {
  629.     flex: 1;
  630.     padding: 50px;
  631.     display: flex;
  632.     flex-direction: column;
  633.     justify-content: center;
  634. }
  636. .auth-form h2 {
  637.     font-size: 2rem;
  638.     margin-bottom: 10px;
  639.     color: var(--dark-color);
  640. }
  642. .auth-form p {
  643.     color: #777;
  644.     margin-bottom: 30px;
  645. }
  647. .form-group {
  648.     margin-bottom: 20px;
  649.     position: relative;
  650. }
  652. .form-group label {
  653.     display: block;
  654.     margin-bottom: 8px;
  655.     font-weight: 500;
  656. }
  658. .form-group input {
  659.     width: 100%;
  660.     padding: 12px 15px 12px 40px;
  661.     border: 1px solid var(--border-color);
  662.     border-radius: 5px;
  663.     font-size: 1rem;
  664.     transition: var(--transition);
  665. }
  667. .form-group input:focus {
  668.     border-color: var(--primary-color);
  669.     outline: none;
  670.     box-shadow: 0 0 0 3px rgba(255, 107, 158, 0.2);
  671. }
  673. .form-group .icon {
  674.     position: absolute;
  675.     left: 15px;
  676.     top: 40px;
  677.     color: #999;
  678. }
  680. .toggle-password {
  681.     position: absolute;
  682.     right: 15px;
  683.     top: 40px;
  684.     background: none;
  685.     border: none;
  686.     color: #999;
  687.     cursor: pointer;
  688. }
  690. .form-options {
  691.     display: flex;
  692.     justify-content: space-between;
  693.     align-items: center;
  694.     margin-bottom: 20px;
  695. }
  697. .remember-me {
  698.     display: flex;
  699.     align-items: center;
  700. }
  702. .remember-me input {
  703.     margin-right: 8px;
  704. }
  706. .forgot-password {
  707.     color: var(--primary-color);
  708.     font-weight: 500;
  709. }
  711. .btn-primary {
  712.     width: 100%;
  713.     padding: 12px;
  714.     font-size: 1rem;
  715.     margin-bottom: 20px;
  716. }
  718. .social-login {
  719.     text-align: center;
  720.     margin-bottom: 20px;
  721. }
  723. .social-login p {
  724.     position: relative;
  725.     margin: 20px 0;
  726.     color: #999;
  727. }
  729. .social-login p::before,
  730. .social-login p::after {
  731.     content: '';
  732.     position: absolute;
  733.     top: 50%;
  734.     width: 30%;
  735.     height: 1px;
  736.     background-color: var(--border-color);
  737. }
  739. .social-login p::before {
  740.     left: 0;
  741. }
  743. .social-login p::after {
  744.     right: 0;
  745. }
  747. .social-buttons {
  748.     display: flex;
  749.     justify-content: center;
  750.     gap: 15px;
  751. }
  753. .social-btn {
  754.     width: 45px;
  755.     height: 45px;
  756.     border-radius: 50%;
  757.     display: flex;
  758.     align-items: center;
  759.     justify-content: center;
  760.     color: var(--light-color);
  761.     font-size: 1.2rem;
  762.     transition: var(--transition);
  763. }
  765. .social-btn.wechat {
  766.     background-color: #07C160;
  767. }
  769. .social-btn.weibo {
  770.     background-color: #E6162D;
  771. }
  773. .social-btn.qq {
  774.     background-color: #12B7F5;
  775. }
  777. .social-btn:hover {
  778.     transform: translateY(-3px);
  779.     box-shadow: var(--shadow);
  780. }
  782. .auth-switch {
  783.     text-align: center;
  784.     color: #777;
  785. }
  787. .auth-switch a {
  788.     color: var(--primary-color);
  789.     font-weight: 500;
  790. }
  792. .password-strength {
  793.     margin-top: 5px;
  794.     display: flex;
  795.     align-items: center;
  796. }
  798. .strength-bar {
  799.     height: 5px;
  800.     flex: 1;
  801.     margin-right: 5px;
  802.     background-color: #eee;
  803.     border-radius: 3px;
  804.     overflow: hidden;
  805. }
  807. .strength-bar:last-child {
  808.     margin-right: 0;
  809. }
  811. .strength-text {
  812.     font-size: 0.8rem;
  813.     color: #777;
  814.     margin-left: 10px;
  815. }
  817. .checkbox-group {
  818.     display: flex;
  819.     align-items: center;
  820. }
  822. .checkbox-group input {
  823.     width: auto;
  824.     margin-right: 10px;
  825. }
  827. .checkbox-group label a {
  828.     color: var(--primary-color);
  829. }
  831. /* 响应式设计 */
  832. @media (max-width: 992px) {
  833.     .hero {
  834.         height: 500px;
  835.     }
  836.    
  837.     .slide-content h1 {
  838.         font-size: 2.5rem;
  839.     }
  840.    
  841.     .brand-story .container {
  842.         flex-direction: column;
  843.     }
  844.    
  845.     .story-image {
  846.         order: -1;
  847.     }
  848.    
  849.     .auth-container {
  850.         flex-direction: column;
  851.     }
  852.    
  853.     .auth-image {
  854.         height: 200px;
  855.     }
  856. }
  858. @media (max-width: 768px) {
  859.     .main-nav {
  860.         position: fixed;
  861.         top: 70px;
  862.         left: -100%;
  863.         width: 80%;
  864.         height: calc(100vh - 70px);
  865.         background-color: var(--light-color);
  866.         box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  867.         transition: var(--transition);
  868.         z-index: 999;
  869.     }
  870.    
  871.     .main-nav.active {
  872.         left: 0;
  873.     }
  874.    
  875.     .main-nav ul {
  876.         flex-direction: column;
  877.         padding: 20px;
  878.     }
  879.    
  880.     .main-nav ul li {
  881.         margin: 15px 0;
  882.     }
  883.    
  884.     .mobile-menu-btn {
  885.         display: block;
  886.     }
  887.    
  888.     .hero {
  889.         height: 400px;
  890.     }
  891.    
  892.     .slide-content {
  893.         left: 5%;
  894.         max-width: 90%;
  895.     }
  896.    
  897.     .slide-content h1 {
  898.         font-size: 2rem;
  899.     }
  900.    
  901.     .section-title {
  902.         font-size: 2rem;
  903.     }
  904. }
  906. @media (max-width: 576px) {
  907.     .hero {
  908.         height: 300px;
  909.         margin-top: 60px;
  910.     }
  911.    
  912.     .header {
  913.         padding: 10px 0;
  914.     }
  915.    
  916.     .logo a {
  917.         font-size: 1.5rem;
  918.     }
  919.    
  920.     .user-actions a {
  921.         margin-left: 10px;
  922.         font-size: 0.9rem;
  923.     }
  924.    
  925.     .slide-content h1 {
  926.         font-size: 1.5rem;
  927.     }
  928.    
  929.     .slide-content p {
  930.         font-size: 1rem;
  931.     }
  932.    
  933.     .section-title {
  934.         font-size: 1.8rem;
  935.     }
  936.    
  937.     .auth-form {
  938.         padding: 30px;
  939.     }
  940. }
复制代码
7. JavaScript交互 (main.js)

  1. // 等待DOM完全加载
  2. document.addEventListener('DOMContentLoaded', function() {
  3.     // 移动菜单切换
  4.     const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
  5.     const mainNav = document.querySelector('.main-nav');
  6.    
  7.     if (mobileMenuBtn && mainNav) {
  8.         mobileMenuBtn.addEventListener('click', function() {
  9.             mainNav.classList.toggle('active');
  10.             this.querySelector('i').classList.toggle('fa-times');
  11.             this.querySelector('i').classList.toggle('fa-bars');
  12.         });
  13.     }
  14.    
  15.     // 轮播图功能
  16.     const heroSlider = document.querySelector('.hero-slider');
  17.     if (heroSlider) {
  18.         const slides = document.querySelectorAll('.slide');
  19.         const dots = document.querySelectorAll('.dot');
  20.         const prevBtn = document.querySelector('.prev-btn');
  21.         const nextBtn = document.querySelector('.next-btn');
  22.         
  23.         let currentSlide = 0;
  24.         const slideCount = slides.length;
  25.         
  26.         // 初始化轮播
  27.         function showSlide(index) {
  28.             slides.forEach(slide => slide.classList.remove('active'));
  29.             dots.forEach(dot => dot.classList.remove('active'));
  30.             
  31.             slides[index].classList.add('active');
  32.             dots[index].classList.add('active');
  33.             currentSlide = index;
  34.         }
  35.         
  36.         // 下一张
  37.         function nextSlide() {
  38.             currentSlide = (currentSlide + 1) % slideCount;
  39.             showSlide(currentSlide);
  40.         }
  41.         
  42.         // 上一张
  43.         function prevSlide() {
  44.             currentSlide = (currentSlide - 1 + slideCount) % slideCount;
  45.             showSlide(currentSlide);
  46.         }
  47.         
  48.         // 自动轮播
  49.         let slideInterval = setInterval(nextSlide, 5000);
  50.         
  51.         // 鼠标悬停暂停轮播
  52.         heroSlider.addEventListener('mouseenter', () => {
  53.             clearInterval(slideInterval);
  54.         });
  55.         
  56.         // 鼠标离开恢复轮播
  57.         heroSlider.addEventListener('mouseleave', () => {
  58.             slideInterval = setInterval(nextSlide, 5000);
  59.         });
  60.         
  61.         // 按钮事件
  62.         if (nextBtn && prevBtn) {
  63.             nextBtn.addEventListener('click', nextSlide);
  64.             prevBtn.addEventListener('click', prevSlide);
  65.         }
  66.         
  67.         // 点导航
  68.         dots.forEach((dot, index) => {
  69.             dot.addEventListener('click', () => {
  70.                 showSlide(index);
  71.                 clearInterval(slideInterval);
  72.                 slideInterval = setInterval(nextSlide, 5000);
  73.             });
  74.         });
  75.         
  76.         // 初始化显示第一张
  77.         showSlide(0);
  78.     }
  79.    
  80.     // 密码显示/隐藏切换
  81.     const togglePasswordBtns = document.querySelectorAll('.toggle-password');
  82.     togglePasswordBtns.forEach(btn => {
  83.         btn.addEventListener('click', function() {
  84.             const input = this.parentElement.querySelector('input');
  85.             const icon = this.querySelector('i');
  86.             
  87.             if (input.type === 'password') {
  88.                 input.type = 'text';
  89.                 icon.classList.remove('fa-eye');
  90.                 icon.classList.add('fa-eye-slash');
  91.             } else {
  92.                 input.type = 'password';
  93.                 icon.classList.remove('fa-eye-slash');
  94.                 icon.classList.add('fa-eye');
  95.             }
  96.         });
  97.     });
  98.    
  99.     // 密码强度检测
  100.     const passwordInput = document.getElementById('reg-password');
  101.     if (passwordInput) {
  102.         passwordInput.addEventListener('input', function() {
  103.             const password = this.value;
  104.             const strengthBars = document.querySelectorAll('.strength-bar');
  105.             const strengthText = document.querySelector('.strength-text');
  106.             
  107.             // 重置样式
  108.             strengthBars.forEach(bar => {
  109.                 bar.style.width = '0';
  110.                 bar.style.backgroundColor = '#eee';
  111.             });
  112.             
  113.             if (password.length === 0) {
  114.                 strengthText.textContent = '密码强度: ';
  115.                 return;
  116.             }
  117.             
  118.             // 简单密码强度检测
  119.             let strength = 0;
  120.             
  121.             // 长度检测
  122.             if (password.length >= 8) strength += 1;
  123.             
  124.             // 包含小写字母
  125.             if (/[a-z]/.test(password)) strength += 1;
  126.             
  127.             // 包含大写字母
  128.             if (/[A-Z]/.test(password)) strength += 1;
  129.             
  130.             // 包含数字
  131.             if (/[0-9]/.test(password)) strength += 1;
  132.             
  133.             // 包含特殊字符
  134.             if (/[^a-zA-Z0-9]/.test(password)) strength += 1;
  135.             
  136.             // 更新UI
  137.             let strengthLevel = '';
  138.             let color = '';
  139.             
  140.             if (strength <= 2) {
  141.                 strengthLevel = '弱';
  142.                 color = '#f44336'; // 红色
  143.             } else if (strength <= 4) {
  144.                 strengthLevel = '中等';
  145.                 color = '#ff9800'; // 橙色
  146.             } else {
  147.                 strengthLevel = '强';
  148.                 color = '#4caf50'; // 绿色
  149.             }
  150.             
  151.             strengthText.textContent = `密码强度: ${strengthLevel}`;
  152.             
  153.             // 更新进度条
  154.             const fillCount = Math.min(strength, strengthBars.length);
  155.             for (let i = 0; i < fillCount; i++) {
  156.                 strengthBars[i].style.width = '100%';
  157.                 strengthBars[i].style.backgroundColor = color;
  158.             }
  159.         });
  160.     }
  161.    
  162.     // 表单验证
  163.     const registerForm = document.getElementById('registerForm');
  164.     if (registerForm) {
  165.         registerForm.addEventListener('submit', function(e) {
  166.             e.preventDefault();
  167.             
  168.             const password = document.getElementById('reg-password').value;
  169.             const confirmPassword = document.getElementById('reg-confirm-password').value;
  170.             const agreeTerms = document.getElementById('agree-terms').checked;
  171.             
  172.             // 密码匹配验证
  173.             if (password !== confirmPassword) {
  174.                 alert('两次输入的密码不一致！');
  175.                 return;
  176.             }
  177.             
  178.             // 条款同意验证
  179.             if (!agreeTerms) {
  180.                 alert('请阅读并同意用户协议和隐私政策！');
  181.                 return;
  182.             }
  183.             
  184.             // 表单提交（这里只是模拟）
  185.             alert('注册成功！即将跳转到首页...');
  186.             setTimeout(() => {
  187.                 window.location.href = 'index.html';
  188.             }, 1500);
  189.         });
  190.     }
  191.    
  192.     const loginForm = document.getElementById('loginForm');
  193.     if (loginForm) {
  194.         loginForm.addEventListener('submit', function(e) {
  195.             e.preventDefault();
  196.             
  197.             // 这里可以添加登录验证逻辑
  198.             alert('登录成功！即将跳转到首页...');
  199.             setTimeout(() => {
  200.                 window.location.href = 'index.html';
  201.             }, 1500);
  202.         });
  203.     }
  204.    
  205.     // 购物车数量模拟
  206.     const cartBtn = document.querySelector('.cart-btn');
  207.     if (cartBtn) {
  208.         cartBtn.setAttribute('data-count', '3');
  209.     }
  210.    
  211.     // 产品卡片悬停效果
  212.     const productCards = document.querySelectorAll('.product-card');
  213.     productCards.forEach(card => {
  214.         card.addEventListener('mouseenter', function() {
  215.             this.querySelector('.product-actions').style.bottom = '0';
  216.         });
  217.         
  218.         card.addEventListener('mouseleave', function() {
  219.             this.querySelector('.product-actions').style.bottom = '-50px';
  220.         });
  221.     });
  222. });
复制代码
8. 相应式样式 (responsive.css)

  1. /* 响应式设计补充样式 */
  3. /* 中等屏幕 (992px - 1200px) */
  4. @media (max-width: 1200px) {
  5.     .products-grid {
  6.         grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  7.     }
  8.    
  9.     .auth-form {
  10.         padding: 40px;
  11.     }
  12. }
  14. /* 平板设备 (768px - 992px) */
  15. @media (max-width: 992px) {
  16.     .header .container {
  17.         padding: 0 20px;
  18.     }
  19.    
  20.     .hero {
  21.         height: 450px;
  22.     }
  23.    
  24.     .slide-content h1 {
  25.         font-size: 2.2rem;
  26.     }
  27.    
  28.     .section-title {
  29.         font-size: 2.2rem;
  30.     }
  31.    
  32.     .footer-columns {
  33.         grid-template-columns: repeat(2, 1fr);
  34.     }
  35.    
  36.     .auth-container {
  37.         max-width: 90%;
  38.         margin: 0 auto;
  39.     }
  40. }
  42. /* 小型平板和大手机 (576px - 768px) */
  43. @media (max-width: 768px) {
  44.     .header {
  45.         padding: 10px 0;
  46.     }
  47.    
  48.     .logo a {
  49.         font-size: 1.6rem;
  50.     }
  51.    
  52.     .user-actions a {
  53.         font-size: 0.9rem;
  54.         margin-left: 10px;
  55.         padding: 6px 12px;
  56.     }
  57.    
  58.     .hero {
  59.         height: 350px;
  60.         margin-top: 60px;
  61.     }
  62.    
  63.     .slide-content {
  64.         left: 5%;
  65.     }
  66.    
  67.     .slide-content h1 {
  68.         font-size: 1.8rem;
  69.     }
  70.    
  71.     .slide-content p {
  72.         font-size: 1rem;
  73.         margin-bottom: 1.5rem;
  74.     }
  75.    
  76.     .section-title {
  77.         font-size: 2rem;
  78.     }
  79.    
  80.     .brand-story .container {
  81.         flex-direction: column;
  82.     }
  83.    
  84.     .story-image {
  85.         margin-bottom: 30px;
  86.     }
  87.    
  88.     .footer-columns {
  89.         grid-template-columns: 1fr;
  90.     }
  91.    
  92.     .auth-form {
  93.         padding: 30px;
  94.     }
  95. }
  97. /* 小型手机 (< 576px) */
  98. @media (max-width: 576px) {
  99.     .hero {
  100.         height: 300px;
  101.     }
  102.    
  103.     .slide-content h1 {
  104.         font-size: 1.5rem;
  105.     }
  106.    
  107.     .slide-content .btn {
  108.         padding: 8px 16px;
  109.         font-size: 0.9rem;
  110.     }
  111.    
  112.     .slider-controls button {
  113.         width: 40px;
  114.         height: 40px;
  115.         font-size: 1rem;
  116.     }
  117.    
  118.     .section-title {
  119.         font-size: 1.8rem;
  120.     }
  121.    
  122.     .products-grid {
  123.         grid-template-columns: 1fr;
  124.     }
  125.    
  126.     .auth-container {
  127.         max-width: 100%;
  128.         border-radius: 0;
  129.     }
  130.    
  131.     .auth-image {
  132.         display: none;
  133.     }
  134.    
  135.     .auth-form {
  136.         padding: 25px;
  137.     }
  138. }
  140. /* 超小设备 (< 400px) */
  141. @media (max-width: 400px) {
  142.     .hero {
  143.         height: 250px;
  144.     }
  145.    
  146.     .slide-content h1 {
  147.         font-size: 1.3rem;
  148.     }
  149.    
  150.     .slide-content p {
  151.         font-size: 0.9rem;
  152.     }
  153.    
  154.     .section-title {
  155.         font-size: 1.5rem;
  156.     }
  157.    
  158.     .section-subtitle {
  159.         font-size: 1rem;
  160.     }
  161.    
  162.     .user-actions .login-btn,
  163.     .user-actions .register-btn {
  164.         display: none;
  165.     }
  166.    
  167.     .mobile-menu-btn {
  168.         margin-left: auto;
  169.     }
  170. }
复制代码
9. 项目总结

这个化装品网站项目包罗了以下关键技能和功能：
HTML5 特性应用


  • 语义化标签：<header>, <section>, <footer>, <nav> 等
  • 表单增强：新的输入类型 (email, tel), required 属性
  • 相应式图像：srcset 和 sizes 属性
CSS3 特性应用


  • Flexbox 和 Grid 结构
  • CSS 变量 (Custom Properties)
  • 过渡和动画结果
  • 媒体查询实现相应式设计
  • 阴影、圆角、渐变等视觉结果
  • 伪元素和伪类选择器
JavaScript 功能


  • 轮播图实现
  • 移动端菜单切换
  • 密码显示/隐藏功能
  • 密码强度检测
  • 表单验证
  • 交互结果增强
相应式设计


  • 适配从手机到桌面的各种屏幕尺寸
  • 移动优先的设计理念
  • 灵活的结构调解
这个项目涵盖了现代前端开发的主要技能点，可以作为学习HTML5、CSS3和JavaScript的综合案例。您可以根据现实需求进一步扩展功能，如添加产物详情页、购物车功能、支付流程等。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

莱莱

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表