04 一个在线商店的产品展示页面

HTML结构 (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线商店</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>我的在线商店</h1>
        <nav>
            <ul>
                <li><a href="#products">产品</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <section id="products">
        <h2>我们的产品</h2>
        <div class="product-grid">
            <!-- 产品卡片 -->
            <article class="product-card">
                <img src="product1.jpg" alt="产品1">
                <h3>产品名称1</h3>
                <p>价格: $99.99</p>
                <button class="add-to-cart">加入购物车</button>
            </article>
            <!-- 更多产品卡片 -->
        </div>
    </section>

    <section id="about">
        <h2>关于我们</h2>
        <p>我们是一家提供高质量产品的在线商店。</p>
    </section>

    <section id="contact">
        <h2>联系我们</h2>
        <p>邮箱: [email protected]</p>
    </section>

    <aside id="cart">
        <h3>购物车</h3>
        <ul>
            <!-- 购物车项 -->
        </ul>
    </aside>

    <footer>
        <p>版权所有 &copy; 2024</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

CSS样式 (`styles.css`)

/* 基本重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    background: #007bff;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 10px;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
}

nav a:hover, nav a.active {
    background: #0056b3;
}

section {
    padding: 20px;
    margin: 15px 0;
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.product-card {
    width: calc(25% - 20px);
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.product-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.product-card button {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    cursor: pointer;
}

.product-card button:hover {
    background: #218838;
}

#cart {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 200px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .product-card {
        width: calc(33.33% - 20px);
    }
}

@media (max-width: 768px) {
    .product-card {
        width: calc(50% - 20px);
    }

    #cart {
        position: static;
        margin: 20px auto;
    }
}

@media (max-width: 576px) {
    .product-card {
        width: 100%;
    }
}

JavaScript交互 (`script.js`)

document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', function() {
        const productCard = this.closest('.product-card');
        const productName = productCard.querySelector('h3').textContent;
        const productPrice = productCard.querySelector('p').textContent;
        
        // 这里应该添加逻辑来更新购物车
        console.log(`Added ${productName} to cart for $${productPrice}`);
    });
});

代码解释：

基本重置：使用*选择器重置了默认的margin和padding。
全局样式：设置了body的字体和行高。
头部和导航：为header设置了背景色和文本颜色，为导航链接添加了悬停效果和激活状态。
产品网格：使用.product-grid类和.product-card类创建了响应式的网格布局。
购物车：使用#cart定义了购物车的位置和样式。
响应式设计：使用媒体查询为不同屏幕尺寸调整了产品卡片的宽度和购物车的位置。

这个案例演示了如何使用HTML、CSS和JavaScript创建一个具有交互性的在线商店页面。通过这个案例，你可以了解如何实现响应式设计和基本的DOM操作。

04 一个在线商店的产品展示页面

HTML结构 (index.html)

CSS样式 (styles.css)

JavaScript交互 (script.js)

代码解释：

悦读

HTML结构 (`index.html`)

CSS样式 (`styles.css`)

JavaScript交互 (`script.js`)