light_old.css

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

@charset "gb2312";
/* CSS Document */

/*#1 
global define*/
html{font-size:xx-small}
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}


.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;
}

/* 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.png) repeat-x 0px 0px;
	border-top: 1px solid #9e9e9e;
	border-bottom: 1px solid #9e9e9e;
	padding: 5px 0;
	width: inherit;
}
#headWrap #headLogo {
	position: absolute;
	left: 18px;
	top: 8px;
}
#headWrap #headStatus {
	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 {
	background: url(../imgs/headBg.png) no-repeat right -30px;
	padding-right: 10px;

}
#headWrap #headStatus a {
	font-size:12px;
	color:#0054b4;
}

#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;
	text-decoration: none;
}
#navWrap #navTable td.scrollAD a{
color:white;
font-size:small

}


/*主要内容容器*/
	/*第一行，公告*/
#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;
}
 #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;
}
#secondaryContent #sideContent {
	width: 205px;
	float: left;
}
#secondaryContent #sideContent .sideCell {
	margin-top: 15px;
	padding-bottom: 15px;
}
#secondaryContent #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;
}
/*边-商品分类目录*/
#secondaryContent #sideContent .catelogList .itemList {
	padding-left: 16px;
	padding-right: 16px;
}
#secondaryContent #sideContent .catelogList .catelogName {
	line-height: 22px;
	font-weight: bold;
	color: #cc0000;
	margin: 10px 0 0 0;
	font-size:13px;
}
#secondaryContent #sideContent .catelogList .itemList .catelogContent {
	line-height: 18px;
}

#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;
	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 #secondaryContent #sideContent .sideCell .itemList .richItem {
}

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

#contentWrap #secondaryContent #sideContent .sideCell  .itemList {
	padding-right: 10px;
	padding-left: 10px;
	border: 1px solid #e3e3e3;
}
#contentWrap #secondaryContent #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 #secondaryContent #sideContent .sideCell  .itemList .richItem .itemInfo .price {
	font-weight: bold;
	color: #FF0000;
	padding-left: 10px;
	line-height: 20px;
}
#contentWrap #secondaryContent #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;
}
#contentWrap #secondaryContent #newArrival {
	width: 523px;
	float: left;
	margin-left: 10px;
	padding-top: 15px;
}
#contentWrap #secondaryContent #newArrival .wrapTitle {
	background: url(../imgs/bar1.png) no-repeat 0px 0px;
	height: 30px;
}
#contentWrap #secondaryContent #newArrival .wrapTitle .moreLink {
	width: 60px;
	float: right;
	margin-right: 30px;
	height: 38px;
	padding-top:13px;
	background: url(../imgs/arrow2.png) no-repeat right center;
}
#contentWrap #secondaryContent #newArrival .content ul.cell {
	margin: 0px;
	padding: 0px;
	list-style: none;

}
#contentWrap #secondaryContent #newArrival .content .cell li {
	height: 220px;
	width: 165px;
	padding-top: 25px;
	padding-bottom: 0px;
	float: left;
	border-bottom: 1px dashed #999;
	text-align: center;
}
/*******/
#contentWrap #secondaryContent #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:130px;
	color:#444444;
}

#contentWrap #secondaryContent #newArrival .content .cell .price {
	text-align: left;
	color: red;
}
#contentWrap #secondaryContent #newArrival .content .cell .price label {
	color: #666;
}
#contentWrap #secondaryContent #newArrival .content .cell .rate {
	text-align: left;
	line-height: 20px;
}
#contentWrap #secondaryContent #newArrival .content .cell .rate label {
	color: #666;
}
#contentWrap #secondaryContent #newArrival .content .cell .moreLink {
	text-align: left;
	padding-top:10px;
}
#contentWrap #secondaryContent #newArrival .content .cell .moreLink label {
	color: #666;
}
#contentWrap #secondaryContent #newArrival .content .cell .moreLink a {
	color: red;
}
/**/
.star1 ,.star2 ,.star3 ,.star4 ,.star5 {
	height: 20px;
	background-image: url(../imgs/starts.png);
	background-repeat: no-repeat;
}
.star1 {
	background-position: 60px -20px;
}
.star2 {
	background-position:60px -40px;
}
.star3 {
	background-position:60px -60px;
}
.star4  {
	background-position:60px -80px;
}
.star5 {
	background-position:60px -100px;
}
#contentWrap #secondaryContent .cu {
	float: left;
	width: 244px;
	margin-left: 5px;
	margin-top: 15px;
	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 .goodListWrap {
	height: 273px;
	width: 774px;
	margin-bottom: 10px;

}
#contentWrap #secondaryContent .goodListWrap .titleWrap {
	float: left;
	width: 165px;
	margin-right: 10px;
	margin-left: 10px;
}
#contentWrap #secondaryContent .goodListWrap .titleWrap {
	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: 580px;
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
}
#contentWrap #secondaryContent .goodListWrap .itemList li {
	width: 20%;
	text-align: center;
	float: left;
}
#contentWrap #secondaryContent .goodListWrap .itemList .moreLink {
}
#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;
}
#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;
}
#contentWrap #hotIntroductWrap {
	margin-top: 10px;
}
/*foot*/
#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 .moreLink a {
	background: url(../imgs/arrow2.png) no-repeat left center;
	display: inline;
	padding-left: 15px;
	line-height: 24px;
}
#contentWrap #secondaryContent .goodListWrap .itemList .item .imgWrap {
	margin: auto;
	height: 112px;
}
#contentWrap #secondaryContent #goodListWrapWrap {
float:left;margin-left:5px; width:774px;