Bootstrap(实现搜索书籍页面购物车页面以及订单)

运用Bootstrap实现以下案例：

案例1：实现搜索书籍页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例1：实现搜索书籍页面</title><!-- 引入bootstrap样式 --><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><!-- 支持手机端 --><<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style type="text/css">.navbar-collapse{flex.grow:0;/* 固定容器中 1代表弹性扩大占用父容器剩余空间 0代表不占用 */}.form-group{width:300px;/* 宽度 */margin-left:auto;/* 左间距自适应 */margin-right:auto;/* 右间距自适应 */margin-top:31px;/* 100-38=62/2=31 */}.ss{height:100px;/* 高度 */margin-top:30px;/* 上间距 */background-color:#DCDCDC;/* 背景颜色 */margin-left:auto;/* 左间距自适应 */margin-right:auto;/* 右间距自适应 */}/* 列表组的上间距 */.list-group,.media{margin-top:30px;}.media-body p{line-height: 15px;letter-spacing: 5px;}.media-body p button{height:30px;line-height: 10px;}</style></head><body><!-- 导航区域  导航条组件--><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">您好，欢迎光临</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页<span class="sr-only">(current)</span></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> </div></nav><!-- 删格搭建主页框架 --><div class="container"><!-- 第一行 1列：搜索区域 --><div class="row ss" ><div class="col"><!-- 搜索区域 --><form><div class="form-group"><!-- 输入框组合--><div class="input-group mb-3"><input type="text" class="form-control" placeholder="请输入书籍" aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查询</button></div></div></div></form></div></div><!-- 第二行 --><div class="row" ><div class="col-3" ><!-- 左3为书籍分类 --><div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true">书籍分类</a><a href="#" class="list-group-item list-group-item-action">爱情</a><a href="#" class="list-group-item list-group-item-action">美女</a><a href="#" class="list-group-item list-group-item-action">都市</a><a class="list-group-item list-group-item-secondary ">哈哈</a><a href="#" class="list-group-item list-group-item-action">打啊</a><a href="#" class="list-group-item list-group-item-action">但是</a><a href="#" class="list-group-item list-group-item-action">功夫</a><a href="#" class="list-group-item list-group-item-action">回顾</a><a href="#" class="list-group-item list-group-item-action">都市</a><a href="#" class="list-group-item list-group-item-action">都市</a></div></div><div class="col-9"><!-- 右9为  搜索书籍列表--><div class="media"><img src="img/1.png" class="mr-3" width="100px" alt="..."><div class="media-body"><h5 class="mt-0"><b>冷间谍</b></h5><p>书籍价格:9.9元</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="red"/><div class="media"><img src="img/5.png" class="mr-3" width="100px" alt="..."><div class="media-body"><h5 class="mt-0"><b>汇顶科技三</b></h5><p>书籍价格:29元</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="red"/><div class="media"><img src="img/1.png" class="mr-3" width="100px" alt="..."><div class="media-body"><h5 class="mt-0"><b>发顺丰</b></h5><p>书籍价格:67.9元</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="red"/></div></div></div><!-- 分别引入jQuery和bootstrap的类库 --><script <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script></body>
</html>

案例一界面展示：

案例2：实现购物车页面布局

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例2：实现购物车页面布局</title><!-- 支持手机端 --><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><!-- 引入bootstrap样式 --><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><!-- 支持手机端 --><<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style type="text/css">.navbar-collapse{flex.grow:0;/* 固定容器中 1代表弹性扩大占用父容器剩余空间 0代表不占用 */}.form-group{width:300px;/* 宽度 */margin-left:auto;/* 左间距自适应 */margin-right:auto;/* 右间距自适应 */margin-top:31px;/* 100-38=62/2=31 */}.ss{height:100px;/* 高度 */margin-top:30px;/* 上间距 */background-color:#DCDCDC;/* 背景颜色 */margin-left:auto;/* 左间距自适应 */margin-right:auto;/* 右间距自适应 */}/* 列表组的上间距 */.list-group,.table-hover{margin-top:30px;}/* 悬停表格 头部 */.table-hover thead{color:white;/* 字体颜色 */text-align: center;/* 水平居中 */}/* 悬停表格 身体 行 */.table-hover tbody tr,.table-hover tbody tr td input{text-align:center;/* 水平居中 */}.aaa{text-align:center;/* 内容水平居中 */}.aaa button{height:30px;line-height:10px;}</style></head><body><!-- 导航区域  导航条组件--><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">您好，欢迎光临</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页<span class="sr-only">(current)</span></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> </div></nav><!-- 删格搭建主页框架 --><div class="container"><!-- 第一行 1列：搜索区域 --><div class="row ss" ><div class="col"><!-- 搜索区域 --><form><div class="form-group"><!-- 输入框组合--><div class="input-group mb-3"><input type="text" class="form-control" placeholder="请输入书籍" aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查询</button></div></div></div></form></div></div><!-- 第二行 --><div class="row" ><div class="col-3" ><!-- 左3为书籍分类 --><div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true">书籍分类</a><a href="#" class="list-group-item list-group-item-action">爱情</a><a href="#" class="list-group-item list-group-item-action">美女</a><a href="#" class="list-group-item list-group-item-action">都市</a><a class="list-group-item list-group-item-secondary ">哈哈</a><a href="#" class="list-group-item list-group-item-action">打啊</a><a href="#" class="list-group-item list-group-item-action">但是</a><a href="#" class="list-group-item list-group-item-action">功夫</a><a href="#" class="list-group-item list-group-item-action">回顾</a><a href="#" class="list-group-item list-group-item-action">都市</a><a href="#" class="list-group-item list-group-item-action">都市</a></div></div><div class="col-9"><!-- 右9为  购物车--><table class="table"><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>9.9</td><td><input value="1"/></td><td>9.9</td><td><a href="#">删除</a></td></tr><tr><th scope="row">《汇顶科技三》</th><td>29</td><td><input value="2"/></td><td>58</td><td><a href="#">删除</a></td></tr><tr><th scope="row">《发顺丰》</th><td>67.9</td><td><input value="10"/></td><td>679</td><td><a href="#">删除</a></td></tr></tbody></table><p class="aaa"><button class="btn btn-danger">清空购物车</button><button class="btn btn-primary">继续购物</button><button class="btn btn-success">立即结算</button></p></div></div></div><!-- 分别引入jQuery和bootstrap的类库 --><script <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script></body>
</html>

案例二界面展示：

案例3：实现购物车页面订单信息

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例3：实现购物车页面订单信息</title><!-- 支持手机端 --><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><!-- 引入bootstrap样式 --><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><!-- 支持手机端 --><<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style type="text/css">.navbar-collapse{flex.grow:0;/* 固定容器中 1代表弹性扩大占用父容器剩余空间 0代表不占用 */}.form-group{width:300px;/* 宽度 */margin-left:auto;/* 左间距自适应 */margin-right:auto;/* 右间距自适应 */margin-top:31px;/* 100-38=62/2=31 */}.ss{height:100px;/* 高度 */margin-top:30px;/* 上间距 */background-color:#DCDCDC;/* 背景颜色 */margin-left:auto;/* 左间距自适应 */margin-right:auto;/* 右间距自适应 */}/* 列表组的上间距 */.list-group,.table-hover{margin-top:30px;}/* 悬停表格 头部 */.table-hover thead{color:white;/* 字体颜色 */text-align: center;/* 水平居中 */}/* 悬停表格 身体 行 */.table-hover tbody tr,.table-hover tbody tr td input{text-align:center;/* 水平居中 */}.aaa{text-align:center;/* 内容水平居中 */}.aaa button{height:30px;line-height:10px;}</style></head><body><!--模态框的HTML 建议作为body标签的直接子元素  --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">订单信息</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">1、....2、....订单总价:xx元</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">结算</button></div></div></div></div><!-- 导航区域  导航条组件--><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">您好，欢迎光临</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页<span class="sr-only">(current)</span></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> </div></nav><!-- 删格搭建主页框架 --><div class="container"><!-- 第一行 1列：搜索区域 --><div class="row ss" ><div class="col"><!-- 搜索区域 --><form><div class="form-group"><!-- 输入框组合--><div class="input-group mb-3"><input type="text" class="form-control" placeholder="请输入书籍" aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查询</button></div></div></div></form></div></div><!-- 第二行 --><div class="row" ><div class="col-3" ><!-- 左3为书籍分类 --><div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true">书籍分类</a><a href="#" class="list-group-item list-group-item-action">爱情</a><a href="#" class="list-group-item list-group-item-action">美女</a><a href="#" class="list-group-item list-group-item-action">都市</a><a class="list-group-item list-group-item-secondary ">哈哈</a><a href="#" class="list-group-item list-group-item-action">打啊</a><a href="#" class="list-group-item list-group-item-action">但是</a><a href="#" class="list-group-item list-group-item-action">功夫</a><a href="#" class="list-group-item list-group-item-action">回顾</a><a href="#" class="list-group-item list-group-item-action">都市</a><a href="#" class="list-group-item list-group-item-action">都市</a></div></div><div class="col-9"><!-- 右9为  购物车--><table class="table"><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>9.9</td><td><input value="1"/></td><td>9.9</td><td><a href="#">删除</a></td></tr><tr><th scope="row">《汇顶科技三》</th><td>29</td><td><input value="2"/></td><td>58</td><td><a href="#">删除</a></td></tr><tr><th scope="row">《发顺丰》</th><td>67.9</td><td><input value="10"/></td><td>679</td><td><a href="#">删除</a></td></tr></tbody></table><p class="aaa"><button class="btn btn-danger">清空购物车</button><button class="btn btn-primary">继续购物</button><button class="btn btn-success" data-toggle="modal" data-target="#exampleModal">立即结算</button></p></div></div></div><!-- 分别引入jQuery和bootstrap的类库 --><script <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script></body>
</html>

案例三界面展示：

案例4：图标组件的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例4：图标组件的使用</title><!-- 引入bootstrap样式 --><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><!-- 引入Bootstrap的图标样式 --><link rel="stylesheet" type="text/css" href="font/bootstrap-icons.css"/><!-- 支持手机端 --><<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style type="text/css">.navbar-collapse{flex.grow:0;/* 固定容器中 1代表弹性扩大占用父容器剩余空间 0代表不占用 */}.form-group{width:300px;/* 宽度 */margin-left:auto;/* 左间距自适应 */margin-right:auto;/* 右间距自适应 */margin-top:31px;/* 100-38=62/2=31 */}.ss{height:100px;/* 高度 */margin-top:30px;/* 上间距 */background-color:#DCDCDC;/* 背景颜色 */margin-left:auto;/* 左间距自适应 */margin-right:auto;/* 右间距自适应 */}/* 画像 文字居中 */.figure{text-align:center;margin-top:30px;}.list-group,#carouselExampleIndicators{margin-top:30px;/* 上间距 */}.carousel-indicators li{background-color: red;}.xxx{margin-top: 30px;/* 上间距 */background-image: url(img/title_bj.png);/* 背景图片 */background-repeat: no-repeat;/* 不平铺 */color:white;/* 字体颜色 */font-size: 18px;/* 字体大小 */padding-left: 20px;/* 左内间距 */}</style></head><body><!-- 导航区域  导航条组件--><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">您好，欢迎光临</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页<span class="sr-only">(current)</span></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> </div></nav><!-- 删格搭建主页框架 --><div class="container"><!-- 第一行 1列：搜索区域 --><div class="row ss" ><div class="col"><!-- 搜索区域 --><form><div class="form-group"><!-- 输入框组合--><div class="input-group mb-3"><input type="text" class="form-control" placeholder="请输入书籍" aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2"><i class="bi bi-search-heart"></i></button></div></div></div></form></div></div><!-- 第二行 --><div class="row" ><div class="col-3" style=""><div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true">书籍分类</a><a href="#" class="list-group-item list-group-item-action">爱情</a><a href="#" class="list-group-item list-group-item-action">美女</a><a href="#" class="list-group-item list-group-item-action">都市</a><a class="list-group-item list-group-item-secondary ">哈哈</a><a href="#" class="list-group-item list-group-item-action">打啊</a><a href="#" class="list-group-item list-group-item-action">但是</a><a href="#" class="list-group-item list-group-item-action">功夫</a><a href="#" class="list-group-item list-group-item-action">回顾</a><a href="#" class="list-group-item list-group-item-action">都市</a><a href="#" class="list-group-item list-group-item-action">都市</a></div></div><div class="col-9"><!-- 右9为轮播图&新书上架&热门书籍 --><!--右9 第一行 --><div class="row"  style=""><div class="col"><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"><!-- 指示灯部分--><ol class="carousel-indicators"><li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators" data-slide-to="1"></li><li data-target="#carouselExampleIndicators" data-slide-to="2"></li><li data-target="#carouselExampleIndicators" data-slide-to="3"></li></ol><!-- 主图片部分 --><div class="carousel-inner"><div class="carousel-item active"><img src="img/lb1.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb3.jpeg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb4.jpeg" class="d-block w-100" alt="..."></div></div><!-- 左右箭头区域 --><button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button></div></div></div><div class="xxx">新书上架</div><!-- 右9中第二行 新书上架 5列 --><div class="row"  style=""><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption"><b>冷间谍&nbsp;<i class="bi bi-cart-check-fill text-danger"></i></b></figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption"><b>冷间谍&nbsp;<i class="bi bi-cart-check-fill " style="font-size: 40px;color:pink"></i></b></figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption"><b>冷间谍</b></figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption"><b>冷间谍</b></figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption"><b>冷间谍</b></figcaption></figure></div></div><div class="xxx">热门书籍</div><!-- 右9中第三行 热门书籍 5列 --><div class="row"  style=""><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption"><b>冷间谍</b></figcaption></figure></div><div class="col"><figure class="figure"><img src="img/3.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption"><b>冷间谍</b></figcaption></figure></div><div class="col"><figure class="figure"><img src="img/4.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption"><b>冷间谍</b></figcaption></figure></div><div class="col"><figure class="figure"><img src="img/5.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption"><b>冷间谍</b></figcaption></figure></div><div class="col"><figure class="figure"><img src="img/6.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption"><b>冷间谍</b></figcaption></figure></div></div></div></div></div><!-- 分别引入jQuery和bootstrap的类库 --><script <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script></body>
</html>

案例四界面展示：

熟悉其他的（页面内容-组件）等效果：

Bootstrap(实现搜索书籍页面购物车页面以及订单)相关推荐

软件测试购物车怎么测试用例,购物车页面如何设计测试用例？需要用到哪些测试类型？...
界面测试: 打开页面后,页面的布局是否合理,显示是否完整; 鼠标浮动在购物车按钮,迷你购物车界面显示是否正常; 不同卖家的商品在不同的table区域显示,区分明显; 页面的tooltips能正常显示; ...
制作简易的当当购物车页面
需求说明: 单击"半闭"按钮时,关闭当前页面购物车页面单击"移入收藏"弹出收藏提示单击"删除"弹出确认删除提示单击"结算&q ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
web课程设计网页规划与设计：个人毕设网站设计 —— 二手书籍(11个页面) HTML+CSS+JavaScript
web课程设计网页规划与设计:网站设计--二手书籍(11个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
HTML淘宝购物车页面的实现
一.实验目的和要求本实验任务用HTML基本标签制作一个简单的淘宝购物车页面,具体要求如下: 以纯文本格式保存为*.html文件使用表格标签.div标签.span标签.图像标签等实现效果设计启用浏 ...
web课程设计网页规划与设计：个人毕设网站设计 —— 二手书籍(11个页面) HTML+CSS+JavaScript...
web课程设计网页规划与设计:网站设计--二手书籍(11个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
京东购物车html页面,仿京东购物车页面
[实例简介] 仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面 [实例截图] [核心代码] 仿京东 └── 仿京东 ├── css │ ├── im ...
HTML+CSS+JS仿京东购物车页面动态效果
目录 1 用到的知识 1.1 js选择器 1.2 循环语句 1.3 文档修改语句 1.4 模块移除属性 2 HTML代码 3 CSS代码 3.1 预处理css 3.2 jd购物车页面的css 4 jd ...

Bootstrap(实现搜索书籍页面购物车页面以及订单)

Bootstrap(实现搜索书籍页面购物车页面以及订单)相关推荐

最新文章

热门文章