请为我提供制作一个超市购物首页的HTML:包括商品搜索、分类、优惠推荐、购物车、我的、用户评价、到家服务。
时间: 2023-07-10 08:28:49 浏览: 50
好的,以下是一个简单的超市购物首页的 HTML 代码,包含商品搜索、分类、优惠推荐、购物车、我的、用户评价、到家服务等元素:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超市购物首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">超市购物</div>
<div class="search">
<input type="text" placeholder="请输入商品名称">
<button>搜索</button>
</div>
<div class="cart">
<a href="#">购物车</a>
<span class="count">0</span>
</div>
<div class="my">
<a href="#">我的</a>
</div>
</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>
<li><a href="#">酒水饮料</a></li>
<li><a href="#">零食小吃</a></li>
<li><a href="#">生活用品</a></li>
<li><a href="#">进口商品</a></li>
</ul>
</nav>
<main>
<div class="recommend">
<h2>优惠推荐</h2>
<ul>
<li>
<a href="#">
<img src="https://picsum.photos/200/200?random=1" alt="商品图">
<span class="name">商品1</span>
<span class="price">¥20.00</span>
</a>
</li>
<li>
<a href="#">
<img src="https://picsum.photos/200/200?random=2" alt="商品图">
<span class="name">商品2</span>
<span class="price">¥30.00</span>
</a>
</li>
<li>
<a href="#">
<img src="https://picsum.photos/200/200?random=3" alt="商品图">
<span class="name">商品3</span>
<span class="price">¥40.00</span>
</a>
</li>
<li>
<a href="#">
<img src="https://picsum.photos/200/200?random=4" alt="商品图">
<span class="name">商品4</span>
<span class="price">¥50.00</span>
</a>
</li>
</ul>
</div>
<div class="classify">
<h2>商品分类</h2>
<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>
<li><a href="#">饮料</a></li>
<li><a href="#">零食</a></li>
<li><a href="#">日用品</a></li>
</ul>
</div>
<div class="service">
<h2>到家服务</h2>
<ul>
<li><a href="#">超市自提</a></li>
<li><a href="#">配送到家</a></li>
<li><a href="#">预约时间</a></li>
<li><a href="#">积分换购</a></li>
</ul>
</div>
<div class="evaluate">
<h2>用户评价</h2>
<ul>
<li>
<div class="user">用户1</div>
<div class="content">这个商品很好用,推荐购买。</div>
</li>
<li>
<div class="user">用户2</div>
<div class="content">价格实惠,品质不错。</div>
</li>
<li>
<div class="user">用户3</div>
<div class="content">物流速度很快,服务很好。</div>
</li>
</ul>
</div>
</main>
<footer>
© 2021 超市购物
</footer>
</body>
</html>
```
注意,以上代码仅为示例,具体实现过程需要根据具体的需求和技术栈进行调整。另外,为了让页面样式更加美观,建议添加相应的 CSS 样式。