今天回顾了之前老师讲的分页展示
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link href="../css/carousel.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery-3.6.0.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/frontend/recom.js"></script>
<style>
ul{
margin:0;
padding:0;
list-style-type:none;
}
#footer-1 {
clear: both;
height: 53px;
margin: 0;
background: transparent url('../frontimages/footer-background.png') repeat-x;
text-indent: 0px;
text-align: center;
}
#footer-1 p {
margin: 0px;
}
#footer-1 a {
color: white;
}
#footer-1 .p1 {
line-height: 29px;
/*border: 1px solid blue;*/
}
#footer-1 .p2 {
/*border: 1px solid red;*/
line-height: 30px;
background-image: url('../frontimages/footer-background-2.png');
background-repeat: no-repeat;
width: 760px;
margin: 0 auto;
background-position: 60px top;
color: #888;
}
.recommendation {
padding-top: 20px;
padding-bottom: 5px;
padding-left: 5px;
margin-top: 0px;
color: #069;
border-bottom: 1px #DEAF50 solid;
font: bold 16px/18px "微软雅黑 Light";
}
.search_pre_price {
color: #969696;
text-decoration: line-through;
font-size: 12px;
font-weight: normal;
font-family: arial, 'Hiragino Sans GB', "Simsun";
}
.search_now_price {
font-family: arial, 'Hiragino Sans GB', "Simsun";
color: #fa5000;
font-size: 14px;
overflow: hidden;
font-weight: bold;
margin-right: 10px;
}
.book_title{
max-height: 40px;
height: 40px;
text-overflow: ellipsis;
line-height:20px;
overflow: hidden;
}
.book_intro{
max-height: 60px;
height: 60px;
line-height:20px;
overflow: hidden;
text-overflow: ellipsis;
}
.recommendation{
min-height:200px;
}
#content img.imgBook{
width:180px;
height:180px;
}
a{
text-decoration:none;
color:#464F15;
}
a:hover{
text-decoration:none;
color:#ff0000;
}
</style>
</head>
<body>
<header id="header" class="container-fluid" >
<div class="row"><img src="../frontimages/top-banner.jpg" class="img-responsive"/></div>
<div class="row" style="margin-top: 5px;">
<div class="col-md-3">
<img src="../frontimages/h1.png" class="img-responsive"
style="margin-top: 10px;margin-bottom: 10px;width: 110px;height: 20px;"/>
</div>
<div class="col-md-6" style="line-height: 20px;margin-top: 10px;margin-bottom: 10px;">
<input type="text" class="form-control" style="width:400px;float:left;" placeholder="请输入关键字">
<button href="#" class="btn btn-lg btn-link" style="font-size: 14px;height: 35px;">搜索</button>
</div>
<div class="col-md-3">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li><a href="#"><span>帮助中心</span></a></li>
<li><a href="#"><span>帐号</span></a></li>
<li><a href="#"><span>购物车</span></a></li>
</ul>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="../frontimages/carousel/nav1.jpg" alt="First slide">
</div>
<div class="item">
<img class="second-slide" src="../frontimages/carousel/nav2.jpg" alt="Second slide">
</div>
<div class="item">
<img class="third-slide" src="../frontimages/carousel/nav3.jpg" alt="Third slide">
</div>
<div class="item">
<img class="forth-slide" src="../frontimages/carousel/nav4.jpg" alt="Forth slide">
</div>
<div class="item">
<img class="fifth-slide" src="../frontimages/carousel/nav5.jpg" alt="Fifth slide">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<nav class="navbar navbar-default" style="border-bottom:1px solid #9e2b">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CSS网上书城</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ><a href="/frontend/index.html">首页 <span class="sr-only">(current)</span></a></li>
<li class="active"><a href="#">新书推荐 </a></li>
<li><a href="/frontend/recomquery.html">新书推荐2</a></li>
<li><a href="#">图书信息</a></li>
<li><a href="#">畅销排行</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div id="content" class="container" >
<div class="row" >
<div id="content-left" class="col-md-9">
<ul id="content-body">
<li class="row recom-1" style="margin-top:5px;margin-bottom:5px;display:block;height:242px;background-color:#f8f8f8">
<div class="col-md-3" style="line-height:242px;">
<a href="../bookImages/b1.jpg" target="_blank" alt="点击看大图" class="img-thumbnail"><img src="../bookImages/b1.jpg" class="imgBook"/></a>
</div>
<div class="col-md-9" style="">
<div class="row">
<ul>
<li><span style="font-weight:bold;font-size:14px;line-height:24px;">走近钱学森</span></li>
<li><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></li>
<li><span style="color:blue">叶永烈</span><span style="color:blue">/上海交通大学出版社</span>
<span style="color:blue">/2009年11月</span></li>
<li>ISBN：<span style="color:blue">9787313060846</span></li>
<li>所属分类：<span style="color:blue">人物传记</span></li>
<li> <p style="height:60px;overflow:hidden">《走近钱学森》内容简介：钱学森博士是小国火箭、导弹、航天事业的拓荒者和奠基人。《走近钱学森》深层次解密了钱学森的传奇人生：小生华丽家族，家学渊远，赴美求学，科学巨星，崭露头角，回国受阻，被捕入狱，五年抗争，终回祖国，运筹帷幄。两弹一星，功勋卓著，载人航天，历史巨献。《走近钱学森》首次公布厂诸多鲜为人知的史料和照片。从某种意义卜讲，《走近钱学森》不仅仅是钱学森个人的传记，也是中国"两弹一星"和载人航天的发展史。</p>
</li>
</ul>
</div>
<div class="row" style="">
<button type="button" class="btn btn-primary">收藏</button>
<button type="button" class="btn btn-success">加入购物车</button>
<button type="button" class="btn btn-danger">一键购买</button>
</div>
</div>
</li>
<li class="row recom-1" style="margin-top:5px;margin-bottom:5px;display:block;height:242px;background-color:#f8f8f8">
<div class="col-md-3" style="line-height:242px;">
<a href="../bookImages/b1.jpg" target="_blank" alt="点击看大图" class="img-thumbnail"><img src="../bookImages/b1.jpg" class="imgBook"/></a>
</div>
<div class="col-md-9" style="">
<div class="row">
<ul>
<li><span style="font-weight:bold;font-size:14px;line-height:24px;">走近钱学森</span></li>
<li><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></li>
<li><span style="color:blue">叶永烈</span><span style="color:blue">/上海交通大学出版社</span>
<span style="color:blue">/2009年11月</span></li>
<li>ISBN：<span style="color:blue">9787313060846</span></li>
<li>所属分类：<span style="color:blue">人物传记</span></li>
<li> <p style="height:60px;overflow:hidden">《走近钱学森》内容简介：钱学森博士是小国火箭、导弹、航天事业的拓荒者和奠基人。《走近钱学森》深层次解密了钱学森的传奇人生：小生华丽家族，家学渊远，赴美求学，科学巨星，崭露头角，回国受阻，被捕入狱，五年抗争，终回祖国，运筹帷幄。两弹一星，功勋卓著，载人航天，历史巨献。《走近钱学森》首次公布厂诸多鲜为人知的史料和照片。从某种意义卜讲，《走近钱学森》不仅仅是钱学森个人的传记，也是中国"两弹一星"和载人航天的发展史。</p>
</li>
</ul>
</div>
<div class="row" style="">
<button type="button" class="btn btn-primary">收藏</button>
<button type="button" class="btn btn-success">加入购物车</button>
<button type="button" class="btn btn-danger">一键购买</button>
</div>
</div>
</li>
</ul>
<div>
<div class="pages">
<p>当前第 <span id="text"></span> 页</p>
<ul id="pagination" class="pagination"></ul>
</div>
</div>
</div>
<div class="col-md-3" >
<div class="list-group" id="productTypeList">
<a href="#" class="list-group-item active" style="background-color:#3c763d;">
图书分类
</a>
<a href="#" class="list-group-item">计算机</a>
<a href="#" class="list-group-item">文学</a>
<a href="#" class="list-group-item">数学</a>
<a href="#" class="list-group-item">儿童文学</a>
<a href="#" class="list-group-item">人文社科</a>
<a href="#" class="list-group-item">经管</a>
<a href="#" class="list-group-item">生活</a>
<a href="#" class="list-group-item">科技</a>
</div>
</div><!-- /.col-sm-4 -->
</div>
</div>
<footer class="container-fluid" id="footer-1">
<div class="row"><p class="p1"><a href="#">首页</a> | <a href="#">新书推荐</a> | <a href="#">我的书城</a> | <a
href="#">图书信息</a>| <a href="#">畅销排行</a></p>
</div>
<div class="row"><p class="p2">版权属于前沿科技 artech.cn, Copyright © 2021 | Privacy Notice
| Terms of Use </p></div>
</footer>
<script type='text/javascript' src='../js/jq-paginator.js'
charset='utf-8'></script>
<script type="text/javascript">
$("#pagination").jqPaginator({
totalPages: 100,
visiblePages: 10,
currentPage: 1,
first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
prev: '<li class="prev"><a href="javascript:void(0);">前一页<\/a><\/li>',
next: '<li class="next"><a href="javascript:void(0);">后一页<\/a><\/li>',
last: '<li class="last"><a href="javascript:void(0);">尾页<\/a><\/li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
onPageChange: function(n) {
$("#text").html(n)
}
});
</script>
</body>
</html>
<!doctype html>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link href="/css/carousel.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
#footer-1 {
clear: both;
height: 53px;
margin: 0;
background: transparent url('./frontimages/footer-background.png') repeat-x;
text-indent: 0px;
text-align: center;
}
#footer-1 p {
margin: 0px;
}
#footer-1 a {
color: white;
}
#footer-1 .p1 {
line-height: 29px;
/*border: 1px solid blue;*/
}
#footer-1 .p2 {
/*border: 1px solid red;*/
line-height: 30px;
background-image: url('./frontimages/footer-background-2.png');
background-repeat: no-repeat;
width: 760px;
margin: 0 auto;
background-position: 60px top;
color: #888;
}
.recommendation {
padding-top: 20px;
padding-bottom: 5px;
padding-left: 5px;
margin-top: 0px;
color: #069;
border-bottom: 1px #DEAF50 solid;
font: bold 16px/18px "微软雅黑 Light";
}
.recom-1 {
border: 1px solid #bce8f1;
margin-left: 5px;
}
.search_pre_price {
color: #969696;
text-decoration: line-through;
font-size: 12px;
font-weight: normal;
font-family: arial, 'Hiragino Sans GB', "Simsun";
}
.search_now_price {
font-family: arial, 'Hiragino Sans GB', "Simsun";
color: #fa5000;
font-size: 14px;
overflow: hidden;
font-weight: bold;
margin-right: 10px;
}
</style>
</head>
<body>
<header id="header" class="container-fluid">
<div class="row"><img src="frontimages/top-banner.jpg" class="img-responsive"/></div>
<div class="row" style="margin-top: 5px;">
<div class="col-md-3">
<img src="frontimages/h1.png" class="img-responsive"
style="margin-top: 10px;margin-bottom: 10px;width: 110px;height: 20px;"/>
</div>
<div class="col-md-6" style="line-height: 20px;margin-top: 10px;margin-bottom: 10px;">
<input type="text" class="form-control" style="width:400px;float:left;" placeholder="请输入关键字">
<button href="#" class="btn btn-lg btn-link" style="font-size: 14px;height: 35px;">搜索</button>
</div>
<div class="col-md-3">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li><a href="#"><span>帮助中心</span></a></li>
<li><a href="#"><span>帐号</span></a></li>
<li><a href="#"><span>购物车</span></a></li>
</ul>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="frontimages/carousel/nav1.jpg" alt="First slide">
</div>
<div class="item">
<img class="first-slide" src="frontimages/carousel/nav2.jpg" alt="Second slide">
</div>
<div class="item">
<img class="first-slide" src="frontimages/carousel/nav3.jpg" alt="Third slide">
</div>
<div class="item">
<img class="first-slide" src="frontimages/carousel/nav4.jpg" alt="Forth slide">
</div>
<div class="item">
<img class="first-slide" src="frontimages/carousel/nav5.jpg" alt="Fifth slide">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<nav class="navbar navbar-default" style="border-bottom:1px solid #9e2b">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CSS网上书城</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
<li><a href="#">新书推荐</a></li>
<li><a href="#">我的书城</a></li>
<li><a href="#">图书信息</a></li>
<li><a href="#">畅销排行</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="container">
<div class="row" style="margin-top: 5px;">
<div class="col-md-3" >
<div class="list-group" id="productTypeList">
<a href="#" class="list-group-item active" style="background-color:#3c763d;">
图书分类
</a>
<a href="#" class="list-group-item">计算机</a>
<a href="#" class="list-group-item">文学</a>
<a href="#" class="list-group-item">数学</a>
<a href="#" class="list-group-item">儿童文学</a>
</div>
</div><!-- /.col-sm-4 -->
<div class="col-md-9" >
<div class="row recommendation">
<span>本周推荐</span>
</div>
<div class="row" style="margin-top: 5px;">
<div class="col-sm-4 col-md-3">
<div class="thumbnail">
<a href="#"><img src="bookImages/b1.jpg" class="img-responsive img-thumbnail" alt="..."
style="height: 150px;width:150px;"/></a>
<div class="caption">
<h5><a href="#">走近钱学森</a></h5>
<p style="max-height: 40px;line-height:20px; overflow: hidden;text-overflow: ellipsis">
钱学森博士是小国火箭、导弹、航天事业的拓荒者和奠基人。......</p>
<p><span class="search_now_price">¥34.00</span><span class="search_pre_price">¥68.00</span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="thumbnail">
<a href="#"><img src="bookImages/663765803-1_b_1.jpg" class="img-responsive img-thumbnail"
alt="..." style="height: 150px;width:150px;"/></a>
<div class="caption">
<h5><a href="#">导弹之父钱学森</a></h5>
<p style="max-height: 40px;line-height:20px; overflow: hidden;text-overflow: ellipsis">
钱学森是中国科学界的一位传奇人物，是中国火箭、导弹、航天事业的开拓者和奠基人。......</p>
<p><span class="search_now_price">¥34.00</span><span class="search_pre_price">¥68.00</span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="thumbnail">
<a href="#"><img src="bookImages/23254497-1_f_2.jpg" class="img-responsive img-thumbnail"
alt="..." style="height: 150px;width:150px;"/></a>
<div class="caption">
<h5><a href="#">昆虫记</a></h5>
<p style="max-height: 40px;line-height:20px; overflow: hidden;text-overflow: ellipsis">
从远古的回顾到今天的眺望，如果只选择停留在原点 ，便永远望不见地平线另一端的模样。</p>
<p><span class="search_now_price">¥44.00</span><span class="search_pre_price">¥88.00</span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="thumbnail">
<a href="#"><img src="bookImages/25320480-1_b_12.jpg" class="img-responsive img-thumbnail"
alt="..." style="height: 150px;width:150px;"/></a>
<div class="caption">
<h5><a href="#">时空简史</a></h5>
<p style="max-height: 40px;line-height:20px; overflow: hidden;text-overflow: ellipsis">
这不仅是一部动人心魄的科普佳作，更是一部叙事宏大的科学哲学著作。</p>
<p><span class="search_now_price">¥44.00</span><span class="search_pre_price">¥88.00</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="row recommendation">
<span>新书上架</span>
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="row recommendation">
<span>猜你喜欢</span>
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div class="thumbnail">
<a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..."
style="width:150px;height:150px;"/></a>
<div class="caption">
<h5><a href="#">红与黑</a></h5>
<p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid" id="footer-1">
<div class="row"><p class="p1"><a href="#">首页</a> | <a href="#">新书推荐</a> | <a href="#">我的书城</a> | <a
href="#">图书信息</a>| <a href="#">畅销排行</a></p>
</div>
<div class="row"><p class="p2">版权属于前沿科技 artech.cn, Copyright © 2021 | Privacy Notice
| Terms of Use </p></div>
</footer>
</body>
</html>
3484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
