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

知识分享小能手2025-04-06 13:02

化妆品网站 HTML5 + CSS3 完整项目

下面是一个完整的化妆品网站项目，包含主页、登录页面和注册页面。我将按照您的要求提供详细的代码和注释。

1. 网站规划与需求分析

需求分析

  1. 展示化妆品产品信息
  2. 提供用户注册和登录功能
  3. 响应式设计，适配不同设备
  4. 美观的视觉效果吸引用户
  5. 清晰的导航结构

风格定位

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

2. 项目结构

复制代码 
cosmetics-website/
├── index.html          # 主页
├── login.html          # 登录页面
├── register.html       # 注册页面
├── css/
│   ├── style.css       # 主样式文件
│   └── responsive.css  # 响应式样式
├── images/             # 图片资源
└── js/
    └── main.js         # JavaScript交互

3. 主页 (index.html)

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)

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)

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)

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)

javascript 复制代码 
// 等待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;
            
            // 更新UI
            let 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)

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;
    }
}

9. 项目总结

这个化妆品网站项目包含了以下关键技术和功能：

HTML5 特性应用

  1. 语义化标签：<header>, <section>, <footer>, <nav> 等
  2. 表单增强：新的输入类型 (email, tel), required 属性
  3. 响应式图像：srcset 和 sizes 属性

CSS3 特性应用

  1. Flexbox 和 Grid 布局
  2. CSS 变量 (Custom Properties)
  3. 过渡和动画效果
  4. 媒体查询实现响应式设计
  5. 阴影、圆角、渐变等视觉效果
  6. 伪元素和伪类选择器

JavaScript 功能

  1. 轮播图实现
  2. 移动端菜单切换
  3. 密码显示/隐藏功能
  4. 密码强度检测
  5. 表单验证
  6. 交互效果增强

响应式设计

  1. 适配从手机到桌面的各种屏幕尺寸
  2. 移动优先的设计理念
  3. 灵活的布局调整

这个项目涵盖了现代前端开发的主要技术点，可以作为学习HTML5、CSS3和JavaScript的综合案例。您可以根据实际需求进一步扩展功能，如添加产品详情页、购物车功能、支付流程等。

相关推荐
陶甜也19 分钟前
ThreeJS曲线动画：打造炫酷3D路径运动
前端·vue·threejs
楊无好23 分钟前
react中的受控组件与非受控组件
前端·react.js
菠萝+冰25 分钟前
react虚拟滚动
前端·javascript·react.js
落一落，掉一掉36 分钟前
第十三周前端加密绕过
前端
AhriProGramming37 分钟前
Python学习快速上手文章推荐（持续更新）
开发语言·python·学习·1024程序员节
泡泡鱼（敲代码中）1 小时前
数据结构（顺序表和链表）
笔记·学习·算法
前端初见1 小时前
快速上手TypeScript，TS速通
javascript·ubuntu·typescript
无妄无望1 小时前
在没有网络的环境下安装包pymysql
学习·docker
Onlyᝰ1 小时前
前端tree树
javascript·vue.js·elementui
酌量1 小时前
基于3D激光点云的障碍物检测与跟踪---(3)基于匈牙利算法的障碍物跟踪
学习·算法·机器人·匈牙利算法·障碍物跟踪
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06Labelme从安装到标注：零基础完整指南07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南082025软件测试面试八股文（含答案+文档）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10jdk21下载、安装（Windows、Linux、macOS）