主页的变化
主页的外观变化
导航栏多了一个下拉选项,商品的分类栏和一些组件
点击添加商品后弹出的窗口
点击登录后右边会弹出来一个窗口
添加商品到购物车后,右下角会有一个提示
是不是有那个感觉了
那么就上代码吧
先是文件结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iW4r5X3o-1651888419269)(C:\Users\zjjt\AppData\Roaming\Typora\typora-user-images\image-20220507091002012.png)]
bootstrap文件夹是从官方下载解压的
goods文件夹里面放着商品添加的页面代码
images文件夹里面放着需要使用的图片(可自行更换)
js文件夹里面放了jQuery文件
goods文件夹里面的insert.html:商品添加
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<title>Title</title>
<!-- Jquery JS -->
<script src="../js/jquery-3.3.1.js"></script>
<!-- Bootstrap CSS -->
<link href="../bootstrap-5.0.0-beta3-dist/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap JS -->
<script src="../bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
</head>
<body class="container">
<form action="">
<div class="mb-3">
<label for="name" class="form-label">商品名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入商品名称">
</div>
<div class="mb-3">
<label for="topic" class="form-label">商品名称</label>
<select id="topic" class="form-select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="mb-3">
<label for="price" class="form-label">商品价格:¥<span id="showPrice">123</span></label>
<input type="range" class="form-range" id="price" max="1000" min="1">
</div>
<div class="mb-3">
<label for="stock" class="form-label">商品库存: <span id="showStock">123</span></label>
<input type="range" class="form-range" id="stock" max="100" min="1">
</div>
<div class="mb-3">
<label for="describe" class="form-label">商品描述</label>
<textarea rows="3" class="form-control" id="describe" placeholder="请输入商品描述"></textarea>
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="disabled">
<label class="form-check-label" for="disabled">商品是否可用</label>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-outline-primary">提交</button>
<button type="reset" class="btn btn-outline-danger">重置</button>
</div>
</form>
</body>
</html>
index.html:主页
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>彼岸商城</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- Jquery JS -->
<script src="js/jquery-3.3.1.js"></script>
<!-- Bootstrap CSS -->
<link href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap JS -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
<style>
.carousel-item img {
width: 100%;
height: 350px;
background: no-repeat center / cover;
}
.carousel-caption {
color: white !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
彼岸商城
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<button class="nav-link btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
商品添加
</button>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-primary" id="navbarDropdown"
data-bs-toggle="dropdown">
我的
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" data-bs-toggle="offcanvas" href="#loginCanvas">登录</a></li>
<li><a class="dropdown-item" data-bs-toggle="offcanvas" href="#carCanvas">购物车</a></li>
</ul>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="container">
<div id="goodsCarousel" class="carousel carousel-dark slide mb-5"