7.HTML开发--电子商务网站：构建一个基本的电子商务网站，包括购物车和结算功能。-CFANZ编程社区

构建一个基本的电子商务网站是一个复杂的任务，通常需要后端开发来处理购物车和结算功能。但在HTML中，你可以创建一个模拟的电子商务网站，其中包含产品列表、购物车和结算按钮。以下是一个简单的HTML和CSS模板，你可以基于它创建你自己的模拟电子商务网站：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子商务网站</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
        }
        .product {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #fff;
        }
        .product img {
            max-width: 100px;
            height: auto;
            margin-right: 10px;
        }
        .cart {
            border: 1px solid #ddd;
            padding: 10px;
            background-color: #fff;
        }
        .checkout {
            text-align: right;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>电子商务网站</h1>
    </header>
    <div class="container">
        <h2>产品列表</h2>
        <div class="product">
            <img src="product1.jpg" alt="产品1">
            <div>
                <h3>产品1</h3>
                <p>价格：$100</p>
                <button onclick="addToCart('产品1', 100)">加入购物车</button>
            </div>
        </div>
        <div class="product">
            <img src="product2.jpg" alt="产品2">
            <div>
                <h3>产品2</h3>
                <p>价格：$150</p>
                <button onclick="addToCart('产品2', 150)">加入购物车</button>
            </div>
        </div>

        <h2>购物车</h2>
        <div class="cart" id="cart">
            <!-- 购物车内容将在JavaScript中动态添加 -->
        </div>

        <div class="checkout">
            <p>总价：<span id="totalPrice">$0</span></p>
            <button onclick="checkout()">结算</button>
        </div>
    </div>

    <script>
        let cart = [];
        
        function addToCart(productName, price) {
            cart.push({ name: productName, price: price });
            updateCart();
        }
        
        function updateCart() {
            let cartElement = document.getElementById('cart');
            let totalPriceElement = document.getElementById('totalPrice');
            
            cartElement.innerHTML = '';
            let totalPrice = 0;
            
            for (let item of cart) {
                let itemElement = document.createElement('div');
                itemElement.textContent = `${item.name} - $${item.price}`;
                cartElement.appendChild(itemElement);
                totalPrice += item.price;
            }
            
            totalPriceElement.textContent = `$${totalPrice}`;
        }
        
        function checkout() {
            alert('结算成功！');
            cart = [];
            updateCart();
        }
    </script>
</body>
</html>

这个模板包括了产品列表、购物车和结算按钮。用户可以点击“加入购物车”按钮将产品添加到购物车，然后点击“结算”按钮来模拟结算过程。

要创建你自己的模拟电子商务网站，你需要按照以下步骤进行：