📄 price_range.html

📁 网上商店使用jsp开发网上商店系统 4.1环境准备为了利用JSP技术,首先需要建立环境。
💻 HTML
字号:
#set ($p = ${StringUtil.getInt($request,"p")})
#set ($price_st = ${StringUtil.getFloat($request,"price_st")})
#set ($price_en = ${StringUtil.getFloat($request,"price_en")})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${systemConfig.getStringConfigValue("webtitle")}</title>
<meta name="keywords" content="按价格范围查看商品 ${systemConfig.getStringConfigValue("webtitle")} ">
<meta name="description" content="按价格范围查看商品 ${systemConfig.getStringConfigValue("webtitle")}">
<link href="../css/light.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../css/mall_tbsp.css@t=20080730.css" />
<link rel="stylesheet" type="text/css" href="../css/mall_base.css@t=20080730.css" />
<link  rel="stylesheet" type="text/css" href="../css/mall_common.css@t=20080730.css" />	
<link  rel="stylesheet" type="text/css" href="../css/mall_exhibit.css@t=20080730.css" />
<style type="text/css">
<!--
-->
</style>

<style type="text/css">
<!-- 
#sideContent {
	width: 205px;
	float: left;
}

 #sideContent {
	width: 205px;
	float: left;
}

#contentWrap #sideContent .sideCell {
	border-top: none;
	background: url(file:///E|/site/none);
	border-right: none;
	border-bottom: none;
	border-left: none;
	margin-top: 15px;
	padding-bottom: 15px;
}
#contentWrap #sideContent .sideCell > .title {
	line-height: 24px;
	font-weight: normal;
	color: #FFFFFF;
	background: url(../imgs/bar3.png) no-repeat 0px 0px;
	text-align: left;
	height: 24px;
	padding-left: 10px;
	font-size: medium;
}
#contentWrap #sideContent .catelogList .itemList {
	padding-left: 16px;
	padding-right: 16px;
}
#contentWrap #sideContent .catelogList .catelogName {
	line-height: 22px;
	font-weight: bold;
	color: #cc0000;
	margin: 20px 0 0 0;
}
#contentWrap #sideContent .catelogList .itemList .catelogContent {
	line-height: 18px;
}
#contentWrap #sideContent .sideCell .itemList .richItem {
}
#contentWrap #sideContent .sideCell  .itemList {
	padding-right: 10px;
	padding-left: 10px;
	border: 1px solid #e3e3e3;
}
#contentWrap #sideContent .sideCell  .itemList .richItem .itemInfo .title{
	color: #0052B4;
	font-weight: bold;
	line-height: 20px;
}
#contentWrap  #sideContent .sideCell  .itemList .richItem .itemInfo .price {
	font-weight: bold;
	color: #ff6600;
	line-height: 18px;
}
#contentWrap #sideContent .sideCell  .itemList .linkItem {
	line-height: 20px;
	margin: 4px 0;
	color: #666;
}
.STYLE1 {	color: #666666;
	font: bold;
}
#positionNav {	background: #f1f1f1;
	height: 30px;
	border-bottom: 1px dashed #a8a8a8;
	line-height: 30px;
	padding-left: 14px;
}
#contentWrap #firstContentWrap {
	float: left;
	width: 985px;
}
#contentWrap #firstContentWrap .AD {
	clear: both;
	float: none;
}
#contentWrap #firstContentWrap .itemList .title {
	line-height: 25px;
	background: #eee url(../imgs/headBg.png) no-repeat 0px 0px;
	padding-left: 11px;
	margin-top: 30px;
	margin-bottom: 20px;
}
#contentWrap #firstContentWrap .itemList .title .moreLink {
	float: right;
	background: url(../imgs/headBg.png) no-repeat right -30px;
}
#contentWrap #firstContentWrap .itemList .title .moreLink a {
	padding-right: 40px;
	background: url(../imgs/arrow3.png) no-repeat 60px center;
	display: block;
}
#contentWrap #firstContentWrap .itemList .goodsList {
	height: 111px;
	margin: 0px;
	padding: 0px;
}
#contentWrap #firstContentWrap .itemList .goodsList li {
	float: left;
	height: 111px;
	width: 222px;
	list-style: none;
	margin: 0;
	padding: 0px;
	margin-left: 20px;
}
#contentWrap #firstContentWrap .itemList .goodsList .item {
	margin: 0px;
	padding: 0px;
}
#contentWrap #firstContentWrap .itemList .goodsList .item li {
	float: left;
	width: 111px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
#contentWrap #firstContentWrap .itemList .goodsList .item .itemPic {
	height: 105px;
	width: 105px;
	border: 2px solid #CCCCCC;
	margin-right: 10px;
}
#contentWrap #firstContentWrap .itemList .goodsList .item .itemName {
	width: 103px;
}
#contentWrap #firstContentWrap .itemList .goodsList .item .price {
	width: 102px;
	font-size: 15px;
	font-weight: bold;
	color: #FF0000;

}
#contentWrap #firstContentWrap .itemList .goodsList .item .rate {
	width: 102px;
}
.star1 {
	background-position: 0 -20px;
}
.star2 {
	background-position:0 -40px;
}
.star3 {
	background-position:0 -60px;
}
.star4  {
	background-position:0 -80px;
}
.star5 {
	background-position:0 -100px;
}
#contentWrap #firstContentWrap .itemList .goodsList .item .rate {
	height: 20px;
	width: 102px;
	margin: 5px 0 5px 0;
}
#contentWrap #firstContentWrap .itemList .goodsList .item .itemName a {
	font-size: 12px;
	font-weight: bold;
	color: #0052B4;
	line-height: 16px;
}

-->
</style>

<style type="text/css">
<!--
#contentWrap #firstContentWrap .tabWrap {
	background: url(../imgs/tab.png) repeat-x 0px -60px;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-top: 10px;
	height: 30px;
}
#contentWrap #firstContentWrap .tabWrap li {
	float: left;
	height: 30px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	line-height: 30px;
}
#contentWrap #firstContentWrap .tabWrap .tableftMargin {
	width: 100px;
	background: url(../none);
}
#contentWrap #firstContentWrap .tabWrap .currentTab {
	font-weight: bold;
	background: url(../imgs/tab.png) no-repeat 0px -30px;
	padding-left: 20px;
}
#contentWrap #firstContentWrap .tabWrap .currentTab a {
	background: url(../imgs/tab.png) no-repeat right center;
	display: block;
	padding-right: 35px;
}
#contentWrap #firstContentWrap .tabWrap li {
	background: url(../imgs/tab.png) no-repeat 0px 0px;
	padding-left: 15px;
	margin-left: 15px;
}
#contentWrap #firstContentWrap .tabWrap li a {
	background: url(../imgs/tab.png) no-repeat right 0px;
	display: block;
	padding-right: 15px;
}
#contentWrap #firstContentWrap .itemList .byCell .item li {
	float:none;
	width: 111px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
#contentWrap #firstContentWrap .itemList .byCell li {
	float: left;
	height: 197px;
	width: 234px;
	list-style: none;
	margin: 0;
	padding: 0px;
	margin-left: 20px;
}
#contentWrap #firstContentWrap .itemList .goodsList byCell .offItem {

}
#contentWrap #firstContentWrap .itemList .goodsList .offItem .itemPic {
	border: 1px solid #CCCCCC;
	position: relative;
	width: 102px;
	height: 102px;
	padding: 8px 8px  8px 8px;
	text-align: center;
	margin-right: 10px;
	margin-left: 10px;
}
#contentWrap #firstContentWrap .itemList .goodsList .offItem .itemPic span {
	font-size: 15px;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	left: 11px;
	top: 20px;
}
#contentWrap #firstContentWrap .itemList .goodsList .offItem .itemName{
	float: left;
	width: 83px;
	height: auto;

}
#contentWrap #firstContentWrap .itemList .goodsList .offItem .itemName a {
	font-size: 12px;
	color: #0052B4;
}
#contentWrap #firstContentWrap .itemList .goodsList .offItem {
	width: 234px;
	padding: 0;
	margin: 0;
	height: 198px;
}
#contentWrap #firstContentWrap .itemList .goodsList .offItem .rate {
	float: left;
	height: 20px;
	width: 70px;
}
#contentWrap #firstContentWrap .itemList .goodsList .offItem .category {
	float: left;
	height: 20px;
	width: 60px;
	background: url(../imgs/arrow2.png) no-repeat left center;
	padding-left: 16px;
	line-height: 20px;
}
#contentWrap #firstContentWrap .itemList .goodsList .offItem .price .oldPrice {
	text-decoration: line-through;
}
#contentWrap #firstContentWrap .itemList .goodsList .offItem .price .newPrice {
	font-weight: bold;
	color: #FFFFFF;
	background: #ED4266;
	margin-left: 20px;
	font-size:14px;
}
#contentWrap #firstContentWrap .itemList .goodsList .offItem .price {
	line-height: 30px;
	height: 30px;
	width: 234px;
}
#contentWrap #firstContentWrap .itemList .goodsList .offItem .offTime {
	line-height: 20px;
	height: 20px;
	background: url(../imgs/clock2.gif) no-repeat left center;
	padding-left: 20px;
	color: #6C9100;
}
#contentWrap #firstContentWrap .itemList .goodsList li {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 234px;
	margin-left: 0px;
}
#contentWrap #firstContentWrap .itemList .goodsList li {
	height: 220px;
}

-->
</style>
<script>
function go(p)
{
	document.dataForm.p.value = p;
	window.location = "price-range-"+document.dataForm.price_st.value+"-"+document.dataForm.price_en.value+"-"+p+".html";
	//document.dataForm.submit();
}
</script>

</head>
<body>
${head}
<table width="856" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td >
	
	

<div id="positionNav" ><span class="STYLE1">您正在按价格范围查询商品</span></div>

<br><br>
<div id="contentWrap" style="width:954px;">
			<div id="firstContentWrap" >

				<div style="border-top-width: 0px;	border-right-width: 0px;	border-bottom-width: 1px;	border-left-width: 0px;	border-top-style: dashed;	border-right-style: dashed;	border-bottom-style: dashed;	border-left-style: dashed;	border-top-color: #666666;	border-right-color: #666666;	border-bottom-color: #666666;	border-left-color: #666666;padding-bottom:15px;">
  <table width="98%" border="0" cellspacing="0" cellpadding="3">
    <tr>
      <td width="51%" align="left" style="font-size:15px;font-weight:bold;color:#666666">
	  价格范围：￥${price_st} - ￥${price_en}	  
	  </td>
      <td width="49%" align="right" valign="middle" class="bandtree">
               <script>
function quickfind(v)
{
	location="price-range-"+v+".html";
}
</script>				
                  <select name="select" onChange="quickfind(this.value)">
                    <option value="0-10000" selected>快速查看</option>
					<option value="0-50" >50元以下</option>
					<option value="50-100" >50元 - 100元</option>
					<option value="100-200" >100元 - 200元</option>
					<option value="200-300" >200元 - 300元</option>
					<option value="300-400" >300元 - 400元</option>
					<option value="400-500" >400元 - 500元</option>
					<option value="500-10000" >500元以上</option>
                  </select>
</td>
    </tr>
  </table>
			</div>
			<br><br>
			
				<div class="itemList">

			<ul class="goodsList">
${pc.setPageNo($p)}
${pc.setPageSize(16)}
#foreach ( $newPro in ${productMgr.getProductsByPriceRange($price_st,$price_en,$pc)} )

				<li>
					<ul class="offItem">
						<li class="itemPic"><a target="_blank" href="detail-${newPro.getString("pid")}.html"><img src="${ConfigBean.getStringValue("systenFolder")}.${ConfigBean.getStringValue("upload_pro_img")}${newPro.getString("img_s")}" width="100" height="100" /></a></li>
						<li class="itemName" style="width:70px;height:60px;overflow:hidden"><a  target="_blank" href="detail-${newPro.getString("pid")}.html">${newPro.getString("pname")}</a></li>
						<li class="rate star${newPro.get("star_avg",0)}">&nbsp;</li>
						<li class="category"><a  target="_blank" href="product-brand-${newPro.getString("brand_id")}.html">${newPro.getString("bname")}</a> </li>
						<li class="category"><a  target="_blank" href="../catalog/list-s-${newPro.getString("cparentid")}-${newPro.getString("cid")}.html">${newPro.getString("ctitle")}</a> </li>
						<li class="price"> 
							  <span class="newPrice">${productMgr.getProductPriceStr($newPro)}</span></li>
						
					</ul>
				</li>
#end
			</ul>
			
				<div class="pagerWrap">
        <form name="dataForm">
          <input type="hidden" name="p">
		  <input type="hidden" name="price_st" value="${price_st}">
		  <input type="hidden" name="price_en" value="${price_en}">
        </form>
        <tr> 
          <td height="28" align="right" valign="middle"> 
<DIV class=pages  align="right"> 
${StringUtil.getTurnPage($pc,$p)}
 </div>
			</div>
					<script>
document.write('<script src="${ConfigBean.getStringValue("systenFolder")}count.jsp?ref='+escape(document.referrer)+'&currentURL='+escape(document.location)+'&color_depth='+screen.colorDepth+'&screen='+screen.width+'x'+screen.height+'&lang='+navigator.systemLanguage+'"><\/script>');
		</script>	
	</div>
</div>
	
	
	
	</td>
  </tr>
</table>
${foot}
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -