商城首页 HTML 代码示例 - 优质商品，轻松购物
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<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>
<div class="search-bar">
<input type="text" placeholder="搜索商品">
<button>搜索</button>
</div>
</header>
<main>
<section class="banner">
<img src="banner.jpg" alt="广告横幅">
</section>
<section class="product-list">
<h2>热门商品</h2>
<ul>
<li>
<a href="#">
<img src="product1.jpg" alt="商品1">
<h3>商品1名称</h3>
<p>商品1描述</p>
<span>¥99.00</span>
</a>
</li>
<li>
<a href="#">
<img src="product2.jpg" alt="商品2">
<h3>商品2名称</h3>
<p>商品2描述</p>
<span>¥199.00</span>
</a>
</li>
<li>
<a href="#">
<img src="product3.jpg" alt="商品3">
<h3>商品3名称</h3>
<p>商品3描述</p>
<span>¥299.00</span>
</a>
</li>
<li>
<a href="#">
<img src="product4.jpg" alt="商品4">
<h3>商品4名称</h3>
<p>商品4描述</p>
<span>¥399.00</span>
</a>
</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 商城首页</p>
</footer>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ndNd 著作权归作者所有。请勿转载和采集!