以下是一个简单的购物网页的示例源码:

<!DOCTYPE html>
<html>
<head>
    <title>购物网页</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
    <header>
        <h1>购物网页</h1>
    </header>

    <section id='products'>
        <div class='product'>
            <img src='product1.jpg' alt='商品1'>
            <h3>商品1</h3>
            <p>$10</p>
            <button>加入购物车</button>
        </div>
        <div class='product'>
            <img src='product2.jpg' alt='商品2'>
            <h3>商品2</h3>
            <p>$20</p>
            <button>加入购物车</button>
        </div>
        <div class='product'>
            <img src='product3.jpg' alt='商品3'>
            <h3>商品3</h3>
            <p>$30</p>
            <button>加入购物车</button>
        </div>
    </section>

    <section id='cart'>
        <h2>购物车</h2>
        <ul>
            <li>商品1 - $10</li>
            <li>商品2 - $20</li>
            <li>商品3 - $30</li>
        </ul>
        <p>总价: $60</p>
    </section>

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

将上述代码保存为名为index.html的 HTML 文件。请注意,这只是一个简单的示例,其中的图片和样式表都需要根据实际情况进行替换和自定义。

此外,你也可以通过使用 CSS 样式表(style.css) 和 JavaScript 脚本(script.js) 来进一步定制和增强购物网页的功能和外观。

简单购物网页 HTML 源码示例 - 免费下载

原文地址: https://www.cveoy.top/t/topic/iHm 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录