light.css

网上商店 使用jsp开发网上商店系统 4.1环境准备 为了利用JSP技术,首先需要建立环境。

	left: 70px;
	top: 10px;
}
#contentWrap .itemList .richItem .itemInfo .price {
	color: #FF0000;
	margin-top: 5px;
	margin-bottom: 5px;

}
#contentWrap .itemList .richItem .itemInfo .moreLink {
	color: #666;
	text-align: right;
}
/*边-*/
#contentWrap #sideContent .sideCell .itemList .richItem {
}

#contentWrap #sideContent .sideCell  .itemList {
	padding-right: 10px;
	padding-left: 10px;
	border: 1px solid #e3e3e3;
}




#contentWrap #sideContent .sideCell  .itemList select{
	width:170px;
}


#contentWrap #sideContent .sideCell  .itemList .richItem .itemInfo .title{
	font-size:12px;
	font-weight:normal;
	color: #0052B4;
	line-height: 15px;
	background:none;
	text-align: left;
	height: auto;
	padding-left: none;

}
#contentWrap #sideContent .sideCell  .itemList .richItem .itemInfo .price {
	font-weight: bold;
	color: #FF0000;
	padding-left: 10px;
	line-height: 20px;
}
#contentWrap #sideContent .sideCell  .itemList .linkItem {
	line-height: 20px;
	margin: 4px 0;
	color: #666;
}
/*No列表编号*/
.No1 {
	background: url(../imgs/NO.png) no-repeat left -0px;
	padding-left: 25px !important;
}
.No2 {
	background: url(../imgs/NO.png) no-repeat left -20px;
	padding-left: 25px !important;
}
.No3 {
	background: url(../imgs/NO.png) no-repeat left -40px;
	padding-left: 25px !important;
}
.No4 {
	background: url(../imgs/NO.png) no-repeat left -60px;
	padding-left: 25px !important;
}
.No5 {
	background: url(../imgs/NO.png) no-repeat left -80px;
	padding-left: 25px !important;
}
.No6 {
	background: url(../imgs/NO.png) no-repeat left -100px;
	padding-left: 25px !important;
}
.No7 {
	background: url(../imgs/NO.png) no-repeat left -120px;
	padding-left: 25px !important;
}
.No8 {
	background: url(../imgs/NO.png) no-repeat left -140px;
	padding-left: 25px !important;
}
.No9 {
	background: url(../imgs/NO.png) no-repeat left -160px;
	padding-left: 25px !important;
}
.No10 {
	background: url(../imgs/NO.png) no-repeat left -180px;
	padding-left: 25px !important;
}
/*最新到货*/
#newArrival {
	width: 523px;
	float: left;
	margin-left: 10px;
	padding-top: 5px;
}
#newArrival .titleWrap {
	background: url(../imgs/bar1.png) no-repeat 0px 0px;
	height: 30px;
}
#newArrival .titleWrap .moreLink {
	width: 60px;
	float: right;
	margin-right: 30px;
	margin-top:10px;
	height: 20px;
	
	background: url(../imgs/arrow2.png) no-repeat right center;
}
#newArrival .content ul.cell {
	margin: 0px 0 0 12px;
	padding: 0px;
	list-style: none;

}
#newArrival .content .cell li {
	height: 220px;
	width: 170px;
	padding-top: 10px;
	padding-bottom: 0px;
	float: left;
	border-bottom: 1px dashed #999;
	text-align: center;
}
/*******/
#newArrival .content .cell .title {
	overflow:hidden;
	border:none;
	text-overflow:ellipsis;
	white-space:nowrap;
	padding-bottom:10px;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	background: none;
	border-bottom:none;
	width:150px;
	color:#444444;
}

#newArrival .content .cell .price {
	text-align: left;
	color: red;
	font-weight:bold;
}
#newArrival .content .cell .price label {
	color: #666;
}
#newArrival .content .cell .rate {
	text-align: left;
	line-height: 20px;
	width: 102px;
}
#newArrival .content .cell .rate label {
	color: #666;
}
#newArrival .content .cell .moreLink {
	text-align: left;
	padding-top:10px;
}
#newArrival .content .cell .moreLink label {
	color: #666;
}
#newArrival .content .cell .moreLink a {
	color: red;
}



/*促销*/
#contentWrap #secondaryContent .cu {
	float: left;
	width: 244px;
	margin-left: 5px;
	margin-top: 5px;
	clear: right;
}
#contentWrap #secondaryContent .cu .content {
	border-right: 1px solid #c8c8c8;
	border-left: 1px solid #c8c8c8;
}
#contentWrap #secondaryContent .cu .content {
	padding-right: 10px;
	padding-left: 10px;
}
#contentWrap #secondaryContent .cu .content img {
	float: left;
}
#contentWrap #secondaryContent .cu .content .richItem {
	clear: both;
	float: none;
	height: 140px;
}
#contentWrap #secondaryContent .cu .content .richItem .title {
	color: #BE6400;
	font-weight: bold;
	float: left;
	width: 120px;
	margin-left: 10px;
}
#contentWrap #secondaryContent .cu .content .richItem .summary {
	clear: none;
	float: left;
	width: 120px;
	margin-left: 10px;
	color:#666666;
	line-height:18px;
	padding-top:10px;
	padding-bottom:10px;
}
#contentWrap #secondaryContent .cu .wrapTitle {
	font-weight: bold;
	color: #000000;
	font-size: medium;
	padding-left: 10px;
	padding-bottom: 15px;
	background: url(../imgs/roundCorner.png) no-repeat 0px 0px;
}
#contentWrap #secondaryContent .cu .wrapTitle label {
	line-height: 41px;
	background: url(../imgs/hot.png) no-repeat right top;
	height: 41px;
	display: block;
}


#contentWrap #secondaryContent .ad {
	width: 722px;
	float: left;
	/*clear: both;*/
	margin-left: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}

/*每个栏目的推荐展示*/
#contentWrap #secondaryContent #goodListWrapWrap {
	float:left;margin-left:8px; width:774px; 
}
#contentWrap #secondaryContent .goodListWrap {
	height: 233px;
	width: 774px;
	margin-bottom: 10px;
	overflow:hidden;/*防止换行*/

}
#contentWrap #secondaryContent .goodListWrap .titleWrap {
	float: left;
	width: 165px;
	margin-right: 2px;
	margin-left: 18px;
	line-height: 20px;
	font-weight: bold;
	color: #666;
}
#contentWrap #secondaryContent .goodListWrap .titleWrap .subList {
	font-weight: normal;
	color: #666;
	padding-right: 20px;
}
#contentWrap #secondaryContent .goodListWrap .itemList {
	width: 589px;
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
}
#contentWrap #secondaryContent .goodListWrap .itemList li {
	width: 19%;
	text-align: center;
	float: left;
}
#contentWrap #secondaryContent .goodListWrap .itemList .moreLink {
}
#contentWrap #secondaryContent .goodListWrap .itemList .moreLink a {
	background: url(../imgs/arrow2.png) no-repeat left center;
	display: inline;
	padding-left: 15px;
	line-height: 24px;
}
#contentWrap #secondaryContent .goodListWrap .itemList .price {
	color: red;
	font-weight: bold;
	border-top: 1px dashed #999;
	line-height: 26px;
}
#contentWrap #secondaryContent .goodListWrap .itemList .productName {
	line-height: 18px;
	margin: 0 10px 0 10px;
	text-align: left;
	height:35px;
}
#contentWrap #secondaryContent .goodListWrap .itemList .item {
	padding: 0 6px 6px 6px;
	border-left: 1px solid #ccc;
}
#contentWrap #secondaryContent .goodListWrap .itemList li.firstChild .item {
	border-left: none
}

#contentWrap #secondaryContent .goodListWrap .itemList .item .imgWrap {
	margin: auto;
	height: 112px;
}
/*底部*/
#footWrap {
	clear: both;
	float: none;
	height: 180px;
	text-align: center;
}
#footWrap ul.row {
	margin: 10px auto;
	padding: 0px;
	width: 700px;
}
#footWrap ul.row li {
	float: left;
	width: 100px;
	list-style: none;
	line-height: 22px;
	font-weight: bold;
	color: #666;
}
#footWrap .row ul {
	color: #0052B4;
	margin: 0px;
	padding: 0px;
	line-height: 18px;
}
#footWrap .row li a {
	font-weight: normal;
	color: #0052B4;
}


/*位置导航*/
#positionNav {	background: #f1f1f1;
	height: 30px;
	border-bottom: 1px dashed #a8a8a8;
	line-height: 30px;
	padding-left: 14px;
}
#positionNav .label{color: #666666;
	font: bold;}


.OkMsg{
	padding:5px 5px 5px 25px;
	border:1px solid #00BE00;
	background:#E6FFE6 url(../imgs/standard_msg_ok.gif) 5px 5px no-repeat;
	color:#000;
	height:18px;
}
.WarningMsg{
	padding:5px 5px 5px 25px;
	border:1px solid #00A8FF;
	background:#E2F5FF url(../imgs/standard_msg_warning.gif) 5px 5px no-repeat;	
	color:#000;
	height:18px;
}
.ErrorMsg{
	padding:5px 5px 5px 25px;
	border:1px solid #F60;
	background:#FFF2E9 url(../imgs/standard_msg_error.gif) 5px 5px no-repeat;	
	color:#000;
	height:18px;
}

input 
{
border: 1px solid #999999;
}

textarea 
{
border: 1px solid #999999;
}


.warrning-handle {

	font-size: 14px;
	color: #000000;
	background-attachment: scroll;
	background-image: url(../imgs/warrning_hand.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	height: 65px;
	width: 200px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 60px;
	padding-left: 80px;
}


.evaluateto {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #0099CC;
	height: 11px;
	width: 11px;
	font-family: "Geneva", "Arial", "Helvetica", "sans-serif";
	font-size: 11px;
	font-weight: bold;
	text-align: center;
}


a.evaluatet:link {
	color: #336699;
	text-decoration: none;
	height: 12px;
	width: 12px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;


}
a.evaluatet:visited {
	color: #336699;
	text-decoration: none;
	height: 12px;
	width: 12px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
}
a.evaluatet:hover {
	color: #336699;
	text-decoration: none;
	height: 12px;
	width: 12px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;

}
a.evaluatet:active {
	color: #336699;
	text-decoration: none;
	height: 12px;
	width: 12px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;

}




.pages {
    padding: 1px;
    margin: 1em 0;
    clear: center;
    font-size: 12px;
	border-top: 1px dashed #a8a8a8;
	padding-top: 20px;
	
}

.pages a, .pages span {

    padding: 0.2em 0.5em;
    margin-right: 0.1em;
    border: 1px solid #fff;
    background: #f8f8f8;
}

.pages span.current {
    /*border: 1px solid #2E6AB1;*/
    font-weight: bold;
    background: #FFFFFF;
    color: #CC0000;
}

.pages a {
    border: 1px solid #666666;
    text-decoration: none;
	color: #2E6AB1;
}

.pages a:hover {

	color: #CC0000;
	 text-decoration: none;
}

.pages a.nextprev {
    font-weight: bold;
	height:22px;
}

.pages span.nextprev {
    color: #666;
	height:22px;
}

.pages span.nextprev {
        border: 1px solid #ddd;
        color: #999;
		height:22px;
}