BootStrap书籍搜索列表&购物车&订单结算&form表单&分页

最新推荐文章于 2025-04-28 17:06:33 发布

zt--

最新推荐文章于 2025-04-28 17:06:33 发布

阅读量424

点赞数 2

文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/m0_67514201/article/details/124052463

版权

bootStrap

导入js库

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>
		<div class="container">
			<!-- 第一行：导航区域 -->
			<div class="row" style="width: 1317px;">
				<!-- 第1列：Logo -->
				<div class="col">
					<img src="img/zkinglogo.png" />
				</div>
				<!-- 第2列：超链接 -->
				<div class="col text-end" style="margin-top: 20px;">
					<a href="">登陆</a>丨
					<a href="">登陆</a>丨
					<a href="">我的购物车</a>丨
					<a href="">网站首页</a>
				</div>
			</div>
			<!-- 第二行： 搜索区域【文本框&查询按钮】 -->
			<div class="row" style="height: 60px;background-color: #4AD5FF;width: 1311px">
				<div class="col" style="text-align: center;margin-top: 16px;">
					<input type="text" />
					<button class="btn btn-primary">查询</button>
				</div>
			</div>
			<!-- 第三行：内容区域 -->
			<div class="row">
				<!-- 第三行第一列[3/12]：书籍分类 -->
				<div class="col-3">
					<!-- 书籍分类四个字 -->
					<div class="row" style="background-color: #710503;color: white;font-size: 20px;margin-top: 1px">
						书籍分类
					</div>
					<!-- 书籍分类书籍绑定 -->
					<div class="list-group row">
						<a href="#" class="list-group-item list-group-item-action list-group-item-primary">文艺</a>
						<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">小说</a>
						<a href="#" class="list-group-item list-group-item-action list-group-item-success">青春</a>
						<a href="#" class="list-group-item list-group-item-action list-group-item-danger">童书</a>
						<a href="#" class="list-group-item list-group-item-action list-group-item-warning">励志</a>
						<a href="#" class="list-group-item list-group-item-action list-group-item-info">生活</a>
						<a href="#" class="list-group-item list-group-item-action list-group-item-light">科技</a>
						<a href="#" class="list-group-item list-group-item-action list-group-item-dark">教育</a>
					</div>
				</div>
				<!-- 第三行第二列[3/12]：搜索列表 -->
				<div class&#

最低0.47元/天解锁文章