商城首页 HTML 代码示例 - 包含排行榜、轮播图、商品数据展示、搜索框和商品分类
<!DOCTYPE html>
<html>
<head>
<title>商城首页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">商城Logo</div>
<div class="search-box">
<input type="text" placeholder="搜索商品">
<button>搜索</button>
</div>
<nav>
<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>
</nav>
</header>
<main>
<section class="slider">
<div class="slider-item active">
<img src="img/slider1.jpg" alt="轮播图1">
</div>
<div class="slider-item">
<img src="img/slider2.jpg" alt="轮播图2">
</div>
<div class="slider-item">
<img src="img/slider3.jpg" alt="轮播图3">
</div>
<div class="slider-item">
<img src="img/slider4.jpg" alt="轮播图4">
</div>
<button class="prev-btn">‹</button>
<button class="next-btn">›</button>
</section>
<section class="best-sellers">
<h2>热销商品排行榜</h2>
<ul>
<li>
<img src="img/product1.jpg" alt="商品1">
<h3>商品1名称</h3>
<p>商品1描述</p>
<span>¥99.00</span>
</li>
<li>
<img src="img/product2.jpg" alt="商品2">
<h3>商品2名称</h3>
<p>商品2描述</p>
<span>¥199.00</span>
</li>
<li>
<img src="img/product3.jpg" alt="商品3">
<h3>商品3名称</h3>
<p>商品3描述</p>
<span>¥299.00</span>
</li>
<li>
<img src="img/product4.jpg" alt="商品4">
<h3>商品4名称</h3>
<p>商品4描述</p>
<span>¥399.00</span>
</li>
</ul>
</section>
<section class="product-categories">
<h2>商品分类</h2>
<ul>
<li><a href="#">分类1</a></li>
<li><a href="#">分类2</a></li>
<li><a href="#">分类3</a></li>
<li><a href="#">分类4</a></li>
<li><a href="#">分类5</a></li>
</ul>
</section>
<section class="new-arrivals">
<h2>新品上市</h2>
<ul>
<li>
<img src="img/product5.jpg" alt="新品1">
<h3>新品1名称</h3>
<p>新品1描述</p>
<span>¥499.00</span>
</li>
<li>
<img src="img/product6.jpg" alt="新品2">
<h3>新品2名称</h3>
<p>新品2描述</p>
<span>¥599.00</span>
</li>
<li>
<img src="img/product7.jpg" alt="新品3">
<h3>新品3名称</h3>
<p>新品3描述</p>
<span>¥699.00</span>
</li>
<li>
<img src="img/product8.jpg" alt="新品4">
<h3>新品4名称</h3>
<p>新品4描述</p>
<span>¥799.00</span>
</li>
</ul>
</section>
</main>
<footer>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
</ul>
<p>版权所有 © 2021 商城名称</p>
</footer>
<script src="script.js"></script>
</body>
</html>
<p>该示例中使用了CSS样式表和JavaScript脚本文件，需要在相应的文件中定义样式和交互逻辑。</p>
原文地址: https://www.cveoy.top/t/topic/ndNG 著作权归作者所有。请勿转载和采集!