component.css

非常漂亮的 ecshop 模板 希望大家能够喜欢。

        padding: 30px 0;
      }




      /*  ==================== LightBox ====================  */
      #lightbox {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        z-index: 100;
        text-align: center;
        line-height: 0;
      }
      #lightbox a img { border: none; }
      #outerImageContainer {
        position: relative;
        background-color: #fff;
        width: 250px;
        height: 250px;
        margin: 0 auto;
      }
      #imageContainer {
        padding: 10px;
      }
      #loading {
        position: absolute;
        top: 40%;
        left: 0%;
        height: 25%;
        width: 100%;
        text-align: center;
        line-height: 0;
      }
      #hoverNav {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
      }
      #imageContainer>#hoverNav { left: 0;}
      #hoverNav a { outline: none;}
      #prevLink, #nextLink {
        width: 49%;
        height: 100%;
        background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
        display: block;
      }
      #prevLink { left: 0; float: left;}
      #nextLink { right: 0; float: right;}
      #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
      #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
      #imageDataContainer {
        font: 10px Verdana, Helvetica, sans-serif;
        background-color: #fff;
        margin: 0 auto;
        line-height: 1.4em;
      }
      #imageData {
        padding:0 10px;
      }
      #imageData #imageDetails { width: 70%; float: left; text-align: left; }  
      #imageData #caption { font-weight: bold; }
      #imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em;  }     
      #imageData #bottomNavClose { width: 66px; float: right;  padding-bottom: 0.7em;  } 
      #overlay {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 90;
        width: 100%;
        height: 500px;
        background-color: #000;
        filter:alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
      }
      .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
      }
      * html>body .clearfix {
        display: inline-block; 
        width: 100%;
        }
      * html .clearfix {
        /* Hides from IE-mac \*/
        height: 1%;
        /* End hide from IE-mac */
        }






/***********************************改***********************************/


/*  ==================== 页面头部 ====================  */
#globalHeader {display:block; overflow:hidden; zoom:1; width:100%; margin:0px auto; padding:0px;clear:both;}
#logo {display:inline; float:left; margin:0px 0px 0px 110px;}

/*  ==================== 顶部菜单 ====================  */
#globalTopNav {
	display:inline;
	float:right;
	padding:0px; margin:65px 23px 0px 0px;
	overflow:hidden;}
#globalTopNav li {
	float:left;
	display:inline;
	margin:0px 0px 0px 18px;}
#globalTopNav li a:hover {
	color:#00f;}
#globalTopNav li a {
	color:#264978;}
#globalTopNav #globalTopNavRight {display:none;}

/*  ==================== 主菜单 ====================  */
#globalNav {
	width:100%;
	height:31px;
	margin:0px auto;
	clear:both;
}
#globalNav ul {
	display:inline;	float:left; height:31px;
	margin:0px 0px 0px 30px;
	padding:0px 0px 0px 0px;}
#globalNav li {
    display:inline; float:left; height:31px; margin:0px 2px 0px 0px;
	background:url(../images/libgl.jpg) no-repeat left top;
	height:31px; padding:0px; margin:0px 2px; float:left;}
#globalNav li .span_j {
	display:inline; float:left; height:25px; padding:6px 15px 0px 14px;
	text-align:center; margin:0px; *+height:24px; padding:7px 14px 0px 15px;
	background:url(../images/libgr.jpg) no-repeat right top;}
#globalNav li .span_j a {
	font-size:14px; color:#fff; font-family:"宋体";}
	
#globalNav #currentPage {
	background:url(../images/onbgl.jpg) no-repeat left top;}
#globalNav #currentPage .span_j {
	background:url(../images/onbgr.jpg) no-repeat right top;}
#globalNav #currentPage .span_j a {font-weight:bold;}
#globalNav .span_jr {
	display:inline;
	float:right;
	width:105px;
	height:27px; padding:0px;
	margin:0px;
	background:url(../images/span_jbg.jpg) no-repeat center top;}
#globalNav .span_jr a {
	color:#fff;
	display:inline; float:left;
	margin:6px 8px 0px 18px; *+margin:7px 8px 0px 18px;}
	
#globalHeader .div_jtop {display:block; overflow:hidden; zoom:1; width:100%; clear:both; margin:0px auto; padding:0px;}
#globalHeader .div_jbottom {display:block; overflow:hidden; zoom:1; width:100%; clear:both; margin:0px auto; padding:0px;}

/*  ==================== 搜索 ====================  */
.div_jsearch {
	display:inline; float:left; width:650px; height:32px; margin:20px 0px 0px 5px; padding:0px;}
	
.div_jsearch #globalSearch {
	display:block; overflow:hidden; zoom:1; width:100%; height:33px;
	padding:0px; margin:0px; border:none;}
.div_jsearch #globalSearch #searchForm {
	display:inline; float:left; overflow:hidden; zoom:1; width:100%; height:33px;
	margin:0px 0px 0px 0px; padding:0px;}
.div_jsearch #globalSearch .select_j {
	width:94px;
	display:inline; float:left;
	margin:8px 0px 0px 8px; padding:0px;}
.div_jsearch #globalSearch #category option {
	background:none; border:none;}
.div_jsearch #globalSearch .textInput {
	width:160px; height:20px;
	display:inline; float:left; margin:8px 0px 0px 2px; *+margin:7px 0px 0px 2px;
	padding:3px 0px 0px 4px; border:none;
	background:url(../images/textInput.gif) no-repeat center top;}
.div_jsearch #globalSearch .vAlign {
	width:26px; height:26px;
	display:inline; float:left;
	padding:0px; margin:6px 5px 0px 3px;}
.div_jsearch #globalSearch #adSearch:hover {
	color:#fff;
	text-decoration:none;}
.div_jsearch #globalSearch #adSearch {
	color:#000;
	text-decoration:underline;
	float:left; display:block;
	margin:10px 0px 0px 0px; *+margin:12px 0px 0px 0px;}
.div_jsearch #globalSearchKeywords {line-height:normal; float:right; padding:0px; margin:10px 0px 0px 0px; *+margin:12px 0px 0px 0px; display:inline; width:280px;}
.div_jsearch #globalSearchKeywords a {text-decoration:underline; white-space: nowrap; margin-right:5px; font-family:"宋体"; font-size:12px;}
	

/*  ==================== 品牌专区 ====================  */
.l_ppzq #brandScroller {display:block; overflow-y:scroll; zoom:1; height:200px; margin:0px auto; padding:5px;}
.l_ppzq #brandScroller .textLink {margin:0px auto;}
.l_ppzq #brandScroller .textLink2 {padding:5px 0px;}
.l_ppzq #brandScroller .textLink2 img {max-width:215px; width:expression(this.width > 215 ? 215: true);}
	
/*  ==================== 购物车 ====================  */
.div_jmes {display:inline; float:right; margin:26px 10px 0px 0px; padding:0px;}
.div_jmes .span_j02 {padding:4px 0px 0px 25px; display:block; background:url(../images/span_j02bg.jpg) no-repeat left top;}
.div_jmes .span_j02 a:visited {color:#fff; font-weight:bold;}
.div_jmes .span_j02 a {color:#fff; font-weight:bold;}


      /*  ==================== 用户登录 ====================  */
      #ECS_MEMBERZONE p {
        margin-bottom: 3px;
      }
      #ECS_MEMBERZONE input,
      #ECS_MEMBERZONE img {
        vertical-align: middle;
      }
      #ECS_MEMBERZONE .textInput {
        height: 15px;
        padding: 3px;   margin-right: 5px;
        border: 1px solid #c2c2c2;
      }
      #ECS_MEMBERZONE .textInputSign {
        width: 117px;
      }
      #ECS_MEMBERZONE .textCaptcha {
        width: 49px;
      }
      #ECS_MEMBERZONE .welcome    {
        color: #337fe6;
      }
      #ECS_MEMBERZONE .btnList {
        margin:5px 5px;
        padding:0 10px;
      }
      #ECS_MEMBERZONE .btnList a {
        margin-right:5px;
      }
	  
/*  ==================== 登录 ====================  */
.div_jlogin .globalModuleContent .floatleft {margin:0px 0px 0px 5px; display:inline; float:left;}
.div_jlogin .globalModuleContent .input_jimg {margin:8px 2px 0px 0px; display:inline; float:right;}
.div_jlogin {display:inline; float:left; overflow:hidden; zoom:1; width:215px; height:90px; margin:20px 0px 0px 30px; padding:0px;}
.div_jlogin .globalModuleContent {display:block; overflow:hidden; zoom:1; padding:0px; line-height:normal;}
.div_jlogin .globalModuleContent .floatleft {display:inline; overflow:hidden; zoom:1; float:left; margin:0px 0px 0px 0px; padding:0px; width:160px;}
.div_jlogin .globalModuleContent .p_j01 {display:inline; overflow:hidden; zoom:1; float:left; margin:8px 0px 0px 0px!important; padding:0px; width:100%; clear:both;}
.div_jlogin .globalModuleContent .p_j01 .font_j {display:inline; float:left; margin:3px 3px 0px 0px; *+margin:4px 4px 0px 0px; padding:0px; font-family:"宋体"; font-size:12px; color:#000;}
.div_jlogin .globalModuleContent .p_j01 .textInput  {display:inline; float:left; margin:0px!important; width:105px!important; height:16px; padding:3px 0px 0px 3px; border:#438289 1px solid; font-family:"宋体"; font-size:12px;}
.div_jlogin .globalModuleContent .p_jnone {display:inline; overflow:hidden; zoom:1; float:left; margin:5px 0px 0px 0px; padding:0px; width:100%; clear:both;}
.div_jlogin .globalModuleContent .p_jnone .font_j  {display:inline; float:left; margin:4px 0px 0px 0px; *+margin:5px 0px 0px 0px; padding:0px; font-family:"宋体"; font-size:12px; color:#000;}
.div_jlogin .globalModuleContent .p_jnone .textInput  {display:inline; float:left; margin:0px!important; width:50px; height:16px; padding:3px 0px 0px 3px!important; border:#438289 1px solid; font-family:"宋体"; font-size:12px;}
.div_jlogin .globalModuleContent .p_jnone .img_jimg  {display:inline; float:left; margin:0px 0px 0px 3px; width:50px; height:20px; cursor:pointer;}
.div_jlogin .globalModuleContent .input_jimg {display:inline; float:right; margin:8px 0px 0px 0px; padding:0px;}
.div_jlogin .globalModuleContent .span_jbtn {clear:both; margin:5px auto; display:block; overflow:hidden; zoom:1; width:70%;}
.div_jlogin .globalModuleContent .btnList a {margin-right:5px;}

/*  ==================== module_j ====================  */
.module_j {display:block; overflow:hidden; zoom:1; border:none;}
/*modhead*/
.modhead_j {width:100%; height:27px;}

#globalMiddle .mhl_j {width:5px; background:url(../images/mhlbg3.gif) no-repeat left top;}
#globalMiddle .mhc_j {height:100%; height:31px; background:url(../images/mhcbg3.gif) no-repeat left top;}

#globalBigRight .mhl_j {width:5px; background:url(../images/mhlbg4.gif) no-repeat left top;}
#globalBigRight .mhc_j {height:100%; height:31px; background:url(../images/mhcbg4.gif) no-repeat left top;}

.mhl_j {width:5px; background:url(../images/mhlbg.jpg) no-repeat left top;}
.mhc_j {height:100%; height:52px; background:url(../images/mhcbg.jpg) no-repeat left top;}

.inmhc_j {display:block; zoom:1; width:100%; height:100%;}
	.mhc_j .h6_j {float:left; font-size:14px; color:#fff; font-weight:bold; display:inline; margin:6px 0px 0px 10px; *+margin:7px 0px 0px 10px;}
	.mhc_j .a_jmore {float:right; width:35px; height:16px; display:inline; margin:14px 0px 0px 0px; background:url(../images/a_jmore.gif) no-repeat center top}
#globalMiddle .mhr_j {width:5px; background:url(../images/mhrbg3.gif) no-repeat left top;}

#globalBigRight .mhr_j {width:5px; background:url(../images/mhrbg4.gif) no-repeat left top;}

.mhr_j {width:5px; background:url(../images/mhrbg.jpg) no-repeat left top;}

/*modbody*/
.modbody_j {width:100%;}
.mbl_j {width:0px;}
.mbc_j {
	height:100%;
	background:none;
}
.inmbc_j {display:block; zoom:1; overflow:hidden;
	background:none;
}
#globalLeft .mbc_j {
	height:100%;
	background: url(../images/mod_b.jpg) no-repeat center bottom;
}
#globalLeft .inmbc_j {
	background: url(../images/mod_t.jpg) no-repeat center top;
}
#globalRight .mbc_j {
	height:100%;
	background: url(../images/mod_b.jpg) no-repeat center bottom;
}
#globalRight .inmbc_j {
	background: url(../images/mod_t.jpg) no-repeat center top;
}

#categoryTree .mbc_j {
	background:none;
}
#categoryTree .inmbc_j {
	background:none;
}

.mbr_j {width:0px;}
#globalLeft .inmbc_j h4 {padding:5px 0px 4px 5px;}
#globalLeft .inmbc_j h4 a {font-size: 12px;font-weight: normal;color: #000;padding: 0px 0px 0px 8px;}

/*modfoot*/
.modfoot_j {width:100%; height:0px; font-size:1px;}
.mfl_j {width:0px; height:100%;}
.mfc_j {height:100%;}
.mfr_j {width:0px; height:100%;}

/*  ==================== 友情链接 ====================  */
#globalLink {
	width:970px;
	padding:5px 0px; margin:5px auto;
	border:#CCC 1px solid; background:#fff;}
#globalLink p {
	width:95%; margin:0px auto;}
#globalLink a {
	margin-right:5px;}
	
/*  ==================== 最新文章-商店公告 ====================  */
.div_jtab {display:block; overflow:hidden; zoom:1; width:212px; clear:both; margin:0px auto; padding:0px; background:url(../images/tab_jbg.jpg) repeat-y center top;}
#newArticleTab {display:block; overflow:hidden; zoom:1; width:100%; clear:both; margin:0px auto; padding:0px;}
#newArticleTab #ECS_NOTICE {display:inline; float:left; width:105px; height:26px; cursor:pointer; text-align:center; padding:7px 0px 0px 0px; font-family:"宋体"; font-size:14px; color:#fff; font-weight:bold;}
#newArticleTab #ECS_ARTICLE {display:inline; float:right; width:105px; height:26px; cursor:pointer; text-align:center; padding:7px 0px 0px 0px; font-family:"宋体"; font-size:14px; color:#fff; font-weight:bold;}
#newArticleTab .tabFront {background:url(../images/tab_jon.gif) no-repeat center top;}
#newArticleTab .tabBack {background:url(../images/tab_j.gif) no-repeat center top;}

#newArticle {display:block; overflow:hidden; zoom:1; clear:both; margin:0px auto; line-height:20px; height:265px; padding:6px; background:url(../images/tab_jbottom.jpg) no-repeat center bottom;}
.linkSkyblue {display:block; overflow:hidden; zoom:1; clear:both; margin:0px auto; padding:0px;}
.linkSkyblue li {display:block; overflow:hidden; zoom:1; float:left; width:100%; clear:both; margin:0px auto; padding:3px 0px; background:url(../images/tab_jlibg.jpg) repeat-x left bottom;}

/*  ==================== 页面脚部 ====================  */
#globalFooter {
	display:block; overflow:hidden; zoom:1; clear:both;
	width:970px; border:#DADADA 1px solid; margin:5px auto; background:#fff;}
#globalFooter .floatleft {display:inline; float:left; width:195px; height:100px; background:url(../images/footbg.jpg) no-repeat right center;}
#globalFooter .floatright {display:inline; float:right; width:70%;}
#copyright, #qureyInfo, #PoweredBy, #address, #phone, #imList, #icpInfo {
	color:#808080;
	margin-bottom:5px;}
#copyright {margin:5px 0px 20px 0px;}
#imList a{
	margin-right:15px;}
#footerNav {
	color:#808080;
	margin-bottom:5px;}
#footerNav a:hover {
	color:#000;}
#footerNav a {
	color:#808080;}
#footerNav .fontline {
	font-family:"宋体"; font-size:12px; margin:0px 5px;}

/*  ==================== inbody ====================  */
.inbody_j {
	display:block;
	overflow:hidden;
	zoom:1;
	width:971px;
	margin:5px auto;
	padding:10px 0px 0px 0px;
	clear:both;
	background:#fff url(../images/inbody_j.jpg) no-repeat left top;
}
	
/*  ==================== 商品分类 categoryTree ====================  */
#categoryTree .toggleblock {border-bottom:1px #fff solid;}
#categoryTree .toggletitle {
	display:block;
	overflow:hidden;
	zoom:1;
	width:100%;
	height:26px;
	clear:both;
	border-bottom:#DEDEDE 1px solid;
	background:url(../images/toggletitle.gif) no-repeat left top;
}
#categoryTree .toggletitle .fontpoint {
	font-size:12px; font-family:"宋体"; font-weight:normal; color:#727069;
	float:left; display:inline; margin:5px 0px 0px 5px;}
#categoryTree .toggletitle a {
	font-size:12px; font-family:"宋体"; font-weight:normal; color:#000;
	float:left; display:inline; margin:5px 0px 0px 2px;}
#categoryTree .toggletitle .span_jr {float:right; display:inline; margin:10px 10px 0px 0px;}
#categoryTree .toggletitle .span_jr img {cursor:pointer;}
#categoryTree .ul_jtree {
	display:block; overflow:hidden; zoom:1;
	width:100%; margin:0px auto; padding:0px;}
#categoryTree .li_jtree {
	display:block; overflow:hidden; zoom:1;
	width:100%; float:left; clear:both; margin:0px auto; padding:0px;}
#categoryTree .li_jtree .span_j01 {
	display:block; overflow:hidden; zoom:1; clear:both; float:left;
	border-bottom:1px #fff solid; background:#f2f2f2; width:100%;
	height:25px; padding:0px;}
#categoryTree .li_jtree .span_j01 a {
	display:inline; clear:both; float:left;
	margin:5px 0px 0px 20px; *+margin:6px 0px 0px 20px;}
	
#globalHistory .listStyle li a { color:#000000;}	

	
/********l_flash***********/	
.flash_l {
	display:block;
	clear:both;
	width:971px;
	height:276px;
	margin:3px auto;padding:0px; 		
	background: url(../images/l_flash.jpg) no-repeat center top;
}
.l_ppzq {display:inline; float:left; overflow:hidden; width:215px; height:240px; margin-left:10px;}
.l_ppzq h3 {
	font-size:14px;
	color:#FFF;
	font-weight: bold;
	line-height:2.0em;
	display:block;
	text-indent: 50px;
}
.l_ppzq ul { width:100%; height:200px; margin:0px; padding:0px; display:block; overflow:hidden;}
.l_ppzq ul li {
	background: url(../images/l_ppzqul.jpg) no-repeat left top;
	width:89px; height:24px; display:block; overflow:hidden; float:left;
}
.l_ppzq ul li a { font-size:12px; color:#000; line-height:2.0em;}
.r_flash {display:inline; float:right; width:718px; height:246px; margin:14px 14px 0px 0px;}

/******产品栏目标题*******/
#globalLeft .mhc_j .h6_j {float:left; font-size:14px; color:#fff; font-weight:bold; display:inline; margin:6px 0px 0px 10px; *+margin:7px 0px 0px 10px; line-height:2.2em;}
#globalRight .mhc_j .h6_j {float:left; font-size:14px; color:#fff; font-weight:bold; display:inline; margin:6px 0px 0px 10px; *+margin:7px 0px 0px 10px; line-height:2.2em;}
#globalMiddle .mhc_j .h6_j {float:left; font-size:14px; color:#fff; font-weight:bold; display:inline; margin:6px 0px 0px 10px; *+margin:7px 0px 0px 10px; line-height:1.6em;}

.l_cp .itemGrid { background:#F9F9F9; border:1px solid #AEAEAE; border-top:none; display:block; overflow:hidden; zoom:1; padding:20px 0px;}
.l_cp .inmbc_j .item { width:112px; display:block; overflow:hidden; float:left; margin:0 0 0 10px; background:#E3E3E3;}
.l_cp .inmbc_j .item p { width:112px; display:block; overflow:hidden; float:left; margin:0xp; padding:0 0 5px; text-align:center;}


#globalGoodsList h3 { background:#AEAEAE; color:#FFF;}


/*  ==================== 网店帮助分类 ====================  */
#globalHelp {display:block; overflow:hidden; zoom:1; width:970px; margin:5px auto; background:#fff; border:#ccc 1px solid;}
#globalHelp .inmbc_j th {text-align:center; color:#000; font-family:"宋体"; font-size:14px; font-weight:bold; padding:10px 0px 5px 0px;}
#globalHelp .inmbc_j td {text-align:center; vertical-align:top; color:#000; font-family:"宋体"; font-size:14px; padding:0px 20px;}
#globalHelp .inmbc_j td .span_j {text-align:center; display:block; clear:both; margin:8px 0px;}
#globalHelp .inmbc_j td a:hover {color:#000; text-decoration:none;}
#globalHelp .inmbc_j td a {color:#333; font-family:"宋体"; font-size:14px; text-decoration:underline;}

#globalHelp .modhead_j {width:100%; height:25px; border-bottom:#ccc 1px solid;}
#globalHelp .mhl_j {width:5px; background:none;}
#globalHelp .mhc_j {height:100%; height:25px; background:none;}
#globalHelp .mhr_j {width:5px; background:none;}
#globalHelp .mhc_j .h6_j {color:#000;}