制作一个首页:包括商品搜索、分类、优惠推荐、购物车、我的、用户评价、到家服务。并添加样式,
时间: 2023-07-10 11:28:43 浏览: 54
好的,我可以给您提供一个简单的首页示例代码,供您参考:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城首页</title>
<!-- 引入 CSS 框架 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- 自定义样式 -->
<style>
/* 头部样式 */
header {
background-color: #fff;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
padding: 10px;
}
/* 导航栏样式 */
nav {
background-color: #f8f9fa;
padding: 10px;
margin-bottom: 20px;
}
/* 内容区域样式 */
main {
padding: 20px;
}
/* 底部样式 */
footer {
background-color: #f8f9fa;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<!-- 顶部搜索框 -->
<div class="container">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="搜索商品" aria-label="Search">
<button class="btn btn-outline-success" type="submit">搜索</button>
</form>
</div>
</header>
<nav>
<!-- 商品分类导航栏 -->
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">电脑办公</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">手机数码</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">家用电器</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服饰鞋包</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">运动户外</a>
</li>
</ul>
</div>
</nav>
<main>
<div class="container">
<!-- 热门商品 -->
<h2>热门商品</h2>
<div class="row">
<div class="col-md-3">
<div class="card">
<img src="https://picsum.photos/200/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">商品名称</h5>
<p class="card-text">商品描述</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
<!-- 其他热门商品 -->
</div>
<!-- 优惠推荐 -->
<h2>优惠推荐</h2>
<!-- 优惠推荐内容 -->
<!-- 购物车和我的 -->
<div class="text-end">
<a href="#">购物车</a> | <a href="#">我的</a>
</div>
<!-- 用户评价 -->
<h2>用户评价</h2>
<!-- 用户评价内容 -->
</div>
</main>
<footer>
<!-- 到家服务 -->
<div class="container">
<h3>到家服务</h3>
<p>提供到家服务内容</p>
</div>
</footer>
</body>
</html>
```
该代码基于 Bootstrap 框架,使用了 HTML5 的语义化标签。您可以根据自己的需要,对代码进行修改和优化。
希望这个示例代码能够对您有所帮助。