【无标题】

最新推荐文章于 2025-04-30 21:15:00 发布

巴枝子

最新推荐文章于 2025-04-30 21:15:00 发布

阅读量93

点赞数

文章标签：在线书店商品展示购物车书籍信息购买选项

本文链接：https://blog.youkuaiyun.com/fddggghrr/article/details/124573651

版权

	<div class="col-9">
					<!-- 右9为 搜索书籍列表 -->
					<div class="media">
						<img src="img/12.jpg" class="mr-3" width="100px" alt="...">
						<div class="media-body">
							<h5 class="mt-0"><b>食谱</b></h5>
							<p>书籍价格:1000</p>
							<p>书籍作者:毛毛</p>
							<p>出版社:大腰子</p>
							<p>书籍简介:大腰子的一百种吃法</p>
							<p>
								<button class="btn btn-danger">加入购物车</button>
								<button class="btn btn-danger">我要结算</button>
							</p>
						
					</div>

				</div>
				<hr color="#0000FF"/>
				
				<div class="media">
					<img src="img/13.jpg" class="mr-3"  width="100px" alt="...">
					<div class="media-body">
						<h5 class="mt-0"><b>淀粉机</b></h5>
						<p>书籍价格:10000</p>
						<p>书籍作者:毛毛</p>
						<p>出版社:史蒂夫</p>
						<p>书籍简介:食人鱼</p>
						<p>
							<button class="btn btn-danger">加入购物车</button>
							<button class="btn btn-danger">我要结算</button>
						</p>
				<hr color="#0000FF"/>
				
				<div class="media">
					<img src="img/14.jpg" class="mr-3"  width="100px" alt="...">
					<div class="media-body">
						<h5 class="mt-0"><b>帅哥</b></h5>
						<p>书籍价格:10000</p>
						<p>书籍作者:毛毛</p>
						<p>出版社:豆腐脑</p>
						<p>书籍简介:123456778</p>
						<p>
							<button class="btn btn-danger">加入购物车</button>
							<button class="btn btn-danger">我要结算</button>
						</p>
				<hr color="#0000FF"/>
				
			</div>

		</div>

案例1:

案例2 ：

	<!--右9为 购物车 -->
					
					<table class="table table-hover">
					  <thead class="bg-primary">
					    <tr>
					      <th scope="col">书籍名称</th>
					      <th scope="col">单价</th>
					      <th scope="col">购买数量</th>
					      <th scope="col">小计</th>
						   <th scope="col">操作</th>
					    </tr>
					  </thead>
					  <tbody>
					    <tr>
					      <th scope="row">《食谱》</th>
					      <td>1000</td>
					      <td><input value="1"/></td>
					      <td>1000</td>
						  <td><a href="#">删除</td>
					    </tr>
					    <tr>
					      <th scope="row">《淀粉机》</th>
					      <td>100000</td>
					      <td><input value="2"/></td>
					      <td>100000</td>
					      <td><a href="#">删除</td>
					    </tr>
					    <tr>
					      <th scope="row">帅哥</th>
					      <td colspan="2">Larry the Bird</td>
					      <td>100000</td>
						  <td><input value="3"/></td>
						  <td>100000</td>
						  <td><a href="#">删除</td>
					    </tr>
					  </tbody>
					</table>
					<button class="btn btn-danger">清空购物车</button>
					<button class="btn btn-primary">继续购物</button>
					<button class="btn btn-success">立即结算</button>
					</div>
					</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<style type="text/css">
		
		form{
			width: 300px;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			margin-top: 100px;
		}
		form button{
			width: 300px;
			margin-bottom: 30px;
		}
		form h2{
			margin-bottom: 30px;
		}
	</style>
	</head>
	<body>
		<form>
			<h2>用户注册</h2>
  <div class="form-group">
    
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    </div>
  <div class="form-group">
    
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">注册</button>
   <label class="form-check-label" for="exampleCheck1">&copy;2017-2022</label>
  
</form>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>