代码生成一个购物商城的主页
时间: 2023-06-07 18:07:46 浏览: 43
好的,很高兴为你生成一个购物商城主页的代码。以下是代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物商城</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<a href="#">购物商城</a>
</div>
<nav>
<ul>
<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">
<form action="#" method="get">
<input type="search" placeholder="搜索商品">
<button type="submit">搜索</button>
</form>
</div>
</header>
<main>
<section class="banner">
<img src="banner.jpg" alt="商城首页">
</section>
<section class="recommend">
<h2>推荐商品</h2>
<ul>
<li>
<a href="#">
<img src="product1.jpg" alt="商品1">
<h3>商品1名称</h3>
<span>¥99.99</span>
</a>
</li>
<li>
<a href="#">
<img src="product2.jpg" alt="商品2">
<h3>商品2名称</h3>
<span>¥199.99</span>
</a>
</li>
<li>
<a href="#">
<img src="product3.jpg" alt="商品3">
<h3>商品3名称</h3>
<span>¥299.99</span>
</a>
</li>
<li>
<a href="#">
<img src="product4.jpg" alt="商品4">
<h3>商品4名称</h3>
<span>¥399.99</span>
</a>
</li>
</ul>
</section>
<section class="new-arrival">
<h2>新品上市</h2>
<ul>
<li>
<a href="#">
<img src="product5.jpg" alt="商品5">
<h3>商品5名称</h3>
<span>¥499.99</span>
</a>
</li>
<li>
<a href="#">
<img src="product6.jpg" alt="商品6">
<h3>商品6名称</h3>
<span>¥599.99</span>
</a>
</li>
<li>
<a href="#">
<img src="product7.jpg" alt="商品7">
<h3>商品7名称</h3>
<span>¥699.99</span>
</a>
</li>
<li>
<a href="#">
<img src="product8.jpg" alt="商品8">
<h3>商品8名称</h3>
<span>¥799.99</span>
</a>
</li>
</ul>
</section>
</main>
<footer>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">帮助中心</a></li>
</ul>
<p>©2022 购物商城 版权所有</p>
</footer>
</body>
</html>
```
希望这段代码对你有所帮助!