light.css

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

@charset "gb2312";
@import url("light1.css");
@import url("lightUserCenter.css");
/* CSS Document */

/*#1 
global define*/
html{font-size:xx-small}
#cls{ clear:both;}
#body {
	width: 987px;
	font-family: "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;
	background-color:white;
	padding:0px;
	margin:auto;
	font-size:12px;
	float: none;
	clear: both;
}
/*global def*/
a:link{color:#656565;
text-decoration:none;}
a:visited{color:#656565;
text-decoration:none;}
a:hover{color:#656565;
text-decoration:underline}
a:active{color:#656565}

ul{padding:0;margin:0}

.line{
	border-style:solid;
	border-width:1px;
	border-color:#808080 #fff #fff #808080;
	width:95%;
	clear:both;
}
div.line{
	border-style:solid;
	border-width:1px;
	border-color:#808080 #fff #fff #808080;
	width:95%;
	height:0px;
	overflow:inherit!important;/*没有这个dreamweaver 显示不正常*/
	overflow:hidden;
	clear: both;
	float: none;
	margin:auto;
	line-height:0px;
}
.clearFloat{float:none; clear:both;}
a img{border:none}
.price{color:red;}
.price .label,.price label{color:#666}
label{color:#666};
ul , li{padding:0;margin:0;
list-style-type:none;}



/*=======================*/
/*星级*/
.rate {
	width: 102px;

}
/**/
.star0, .star1 ,.star2 ,.star3 ,.star4 ,.star5 {
	height: 20px;
	background-image: url(../imgs/starts.png);
	background-repeat: no-repeat;
	line-height:20px;
}
.star0 {
	background-position:0 0px;
}
.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;
}
/*.rate.star1,.rate.star0,.rate.star2,.rate.star3,.rate.star4,.rate.star5,.rate.star6{
	background-position: 60px 0px;
}*/

.title{
	font-weight:bold;

}


/*有标签的星级*/
/*.rate.star1 {
	background-position: 60px -20px;
}
.rate.star2 {
	background-position:60px -40px;
}
.rate.star3 {
	background-position:60px -60px;
}
.rate.star4  {
	background-position:60px -80px;
}
.rate.star5 {
	background-position:60px -100px;
}*/



/*分页设计*/
/*<div class="pagerWrap">
					<div style="float:right"><a href="#" class="prev"><img src="../imgs/prev.png" width="61" height="18" border="0" /></a> <a href="#1">1</a> <a href="#2" class="currentPage">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> <a href="#" class="next"><img src="../imgs/next.png" width="61" height="18" border="0" /></a><span>跳转到 </span>
						<input name="page" type="text" id="page" value="1" />
						<input name="submit" type="submit" id="submit" value="go" />
					</div>
				</div>*/
/*<DIV class=pages> 
<SPAN class=nextprev>?首 页</span><SPAN class=nextprev>?上一页</span> <span class=current>1</span>  <a  onfocus='this.blur()' href=javascript:go(2)>2</a> <a  onfocus='this.blur()' href=javascript:go(2)>下一页?</a><a  onfocus='this.blur()' href=javascript:go(2)>末 页?</a>
</div> */
/*
.pages {
	clear: both;
	float: none;
	height: 20px;
	line-height: 20px;
	border-top: 1px dashed #a8a8a8;
	padding-top: 20px;
}
.pages span {
	height: 22px;
	
	float: left;
	border: 1px solid #ddd;
	margin-right: 3px;
	margin-left: 3px;
	line-height: 16px;
	text-align: center;
}
.pages .current {
	color: #ff6600;
	border: 1px solid #FFFFFF;
	font-weight: bold;
}
*/
/*.pagers .nextprev {
	border-style: none;
}
.pagers .nextprev {
	border-style: none;
}
.pagers #page {
	width: 50px;
}
.pagers .goto {
	height: 19px;
	width: 26px;
	background: url(../imgs/headBg.png) no-repeat left -90px;
	border: none;
}*/
				

/* header 
头部 logo 搜索 购物车信息
*/
#headWrap {
	height: 87px;
	position: relative;
	font-size:small;
	background: url(../imgs/logoBg.png) no-repeat 43px;
}
#navWrap {
	height: 30px;
	background: url(../imgs/bgSet.gif) repeat-x 0px 0px;
	border-top: 1px solid #9e9e9e;
	border-bottom: 1px solid #9e9e9e;
	padding: 5px 0;
	width: inherit;
	background-color:#CC0000;/*背景红*/

}
#headWrap #headLogo {
	position: absolute;
	left: 18px;
	top: 8px;
}
#headWrap #headStatus {
width:450px;

	position: absolute;
	top: 5px;
	right: 0px;
	height: 25px;
	background: #eaeaea url(../imgs/headBg.png) no-repeat left top;
	padding-right: 0px;
	padding-left: 10px;
	line-height: 25px;
	overflow: hidden;
}
#headWrap #headStatus .rightBg {
height:100%;
	background: url(../imgs/headBg.png) no-repeat right -30px;
	padding-right: 10px;
}
#headWrap #headStatus a {
	font-size:12px;
	color:#0054b4;
}
#headWrap #headStatus .rightBg a {
	background: url(../imgs/blueDot.png) no-repeat left center;
	display: inline;
	padding-left: 8px;
	line-height: 25px;
}

#headWrap #headStatus a:link {
	color:#0054b4;
}
#headWrap #headStatus a:hover{
	color:#0054b4;
}
#headWrap #headHotPoint {
	line-height: 16px;
	width: 450px;
	position: absolute;
	top: 37px;
	right: 0px;
	text-align:left;
	/*left:565px;*/
}
#headWrap #headHotPoint a {
font-size:small;
color:#999;
}
#headWrap #headHotPoint a:link {
color:#999;
}
#headWrap #headHotPoint a:visited {
color:#999;
}
#headWrap #headHotPoint a:hover {
color:#999;
}
#headWrap #searchBar {
	height: 26px;
	right: 0px;
	bottom: 0px;
	position: absolute;
	background: #e3e3e3 url(../imgs/headBg.png) no-repeat left -60px;
	width: 560px;
	padding-left: 20px;
	line-height: 26px;
	z-index: 2;
}

#headWrap #searchBar input
{
	background-color: #f8f8f8;
}

#headWrap #searchBar select
{
	background-color: #f8f8f8;
}

#headWrap #bottomLine{
	position: absolute;
	height: 6px;
	width: 100%;
	left: 0px;
	bottom: 0px;
	background: #e3e3e3;
	font-size: 1px;
	overflow: hidden;
}
#headWrap #searchBar #form1 .submit {
	background: #999999 url(../imgs/headBg.png) no-repeat left -90px;
	height: 19px;
	width: 26px;
	margin: 0px;
	padding: 0px;
	border-style: none;
}
#headWrap #searchBar form {
	margin: 0px;
	padding: 0px;
}
/*
导航容器-区域*/
#navTable{
	table-layout:fixed;
	width:100%;
	margin:auto;
	font-size:14px;
	/*border-collapse:collapse;*/
	/*border-spacing : 0;*/
	/*border:1px solid #2A4DAB;*/
	/*border-top:2px solid #d0d0d0;*/
}
#navWrap #navTable td.firstChild {
}

#navWrap #navTable td {
border-left:1px solid #B22322;
border-right:1px solid #9c0001;
text-align:center;
}
#navWrap #navTable td.lastChild {
}
#navWrap #navTable td a
{
	font-size:14px;
	color:white;
}
#navWrap #navTable td.scrollAD a{
color:white;
font-size:12px;

}


/*主要内容容器*/
/*hotIntriductWrap是首页最值得推荐的看的*/
#contentWrap #hotIntroductWrap {
	margin-top: 10px;
}

	/*第一行，公告*/
#hotIntroductWrap #announcementWrap {
	height: 227px;
	float: left;
	width: 203px;
	position: relative;
	background: url(../imgs/bgSet.png) repeat-x 0px -80px;
	border: 1px solid #ccc;
}
#hotIntroductWrap #announcementWrap .title {
	height: 14px;
	font-size: 14px;
	font-weight: bold;
	color: #666666;
	border-left:2px solid #990000;
	padding:1px 0 1px 14px;
	margin:15px 0 17px 15px;
}
#hotIntroductWrap #announcementWrap .content ul {
	margin: 0px;
	padding: 0px;
	padding-left: 12px;
	padding-right:10px;
	margin-left: 12px;
}
#hotIntroductWrap #announcementWrap .content ul li {
	line-height: 24px;
	list-style: url(../imgs/arrow1.png);
	height:24px;
}
#hotIntroductWrap #announcementWrap .content a {
	display: block;
	border-bottom: 1px dashed #bfbfbf;
	padding-left:.5em;
}
#hotIntroductWrap #announcementWrap .content .lastChild  a{
border-bottom:none;}
	/*第一行，flash滚动图片*/
#contentWrap #hotIntroductWrap .picAd {
	float: left;
	width: 547px;
	height: 230px;
	margin-left: 8px;
	margin-right: 8px;
}
/*第一行，本周热卖*/
#hotIntroductWrap .bestSell {
	float: left;
	width: 212px;
	border: 1px solid #676767;
}
#hotIntroductWrap .bestSell .wrapTitle {
	height: 38px;
	color: #666;
	padding: 7px 0 0 7px;
	font-weight: bold;
	background: url(../imgs/hotWeekSell.png) no-repeat left bottom;
}
/*rich*/
#hotIntroductWrap .bestSell .itemList .richItem {
	position: relative;
	height: 92px;
}
 #hotIntroductWrap .bestSell .itemList .richItem .itemPic {
	position: absolute;
	height: 62px;
	width: 62px;
	left: 13px;
	top: 11px;
	/*border: 1px solid #666;*/
}
 #hotIntroductWrap .bestSell .itemList .richItem .itemInfo {
	position: absolute;
	width: 120px;
	left: 88px;
	top: 5px;
}
 #hotIntroductWrap .bestSell .itemList .richItem .itemInfo .title {
	color: #000000;
	font-weight: normal;
	background: url(none);
	height: auto;
}
 #hotIntroductWrap .bestSell .itemList .richItem .itemInfo .price {
	color: #FF0000;
	margin-top: 5px;
	margin-bottom: 5px;
	font-weight:bold;
}
 #hotIntroductWrap .bestSell .itemList .richItem .itemInfo .moreLink {
	color: #666;
	text-align: left;
}
 #hotIntroductWrap .bestSell hr.line{
	border-color:#eee;
	text-align: right;
	}
	
/*主要内容 ，重点！！！*/	
#secondaryContent {
	clear: both;
	float: none;
}


/*左边========================*/
#sideContent {
	width: 205px;
	float: left;
}
#sideContent .sideCell {
	margin-top: 5px;
	padding-bottom: 5px;
}
#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: 13px;
}

/*  mini cart  */
#sideContent .sideCell .mini-cart-title {
	line-height: 24px;
	color: #FFFFFF;
	background: url(../imgs/bar_mini_cart.png) no-repeat 0px 0px;
	text-align: center;
	height: 24px;
	font-size: 13px;
	padding-top:3px;
}




#sideContent .sideCell .title a.hi{
padding-left:85px;
color:white;
}

/*边-商品分类目录*/
#sideContent .catelogList .itemList {
	padding-left: 16px;
	padding-right: 16px;
}
#sideContent .catelogList .catelogName a {
	line-height: 25px;
	font-weight: bold;
	color: #cc0000;
	margin: 10px 0 0 0;
	font-size:14px;
}
#sideContent .catelogList .itemList .catelogContent {
	line-height: 18px;
	padding-bottom:10px;
}

#contentWrap .itemList .richItem {
	position: relative;
	height: 83px;
}
#contentWrap .itemList .richItem .itemPic {
	position: absolute;
	height: 62px;
	width: 62px;
	left: 0px;
	top: 11px;
	border: 1px solid #ccc;
}
#contentWrap .itemList .richItem .itemInfo {
	position: absolute;
	width: 95px;