html商城静态网页模板

admin 2024年01月03日 14:20 37 0

创建一个HTML商城静态网页模板需要一些基本的HTML、CSS和JavaScript知识，以下是一个简单的模板，你可以根据自己的需求进行修改和扩展。

<!DOCTYPE html>
<html>
<head>
    <title>商城静态网页模板</title>
    <style>
        /* 添加一些基本的样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        main {
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的商城</h1>
    </header>
    <main>
        <h2>商品列表</h2>
        <!-- 动态生成商品列表 -->
        <ul id="productList"></ul>
    </main>
    <footer>
        &copy; 2023 商城版权所有
    </footer>
    <script>
        // 假设有一个商品数组，我们将其动态渲染到页面上
        var products = [
            { name: "商品1", price: 100 },
            { name: "商品2", price: 200 },
            { name: "商品3", price: 300 }
        ];
        var productList = document.getElementById("productList");
        products.forEach(function(product) {
            var li = document.createElement("li");
            li.textContent = product.name + " - " + product.price + " 元";
            productList.appendChild(li);
        });
    </script>
</body>
</html>

这个模板包含了一个基本的HTML结构，包括头部（header）、主体（main）和页脚（footer），在主体部分，我们使用JavaScript动态生成了一个商品列表，你可以根据自己的需求修改和扩展这个模板，例如添加更多的商品、购物车功能、用户登录等。