最全的京东商城模板(含所有源代码)

/* Template Name: ECSHOP 仿京东 Template URI: http://www.ecshop.com/ Description: The default ECSHOP template. Version: 2.6.1 Author: ECSHOP Team Author URI: http://www.ecshop.com/ Logo filename: logo.gif */ /* ==================== 公共样式 ==================== */ body{background:#fff; font-size:12px; font-family:"宋体",Verdana, Arial; line-height:150%; margin:0; padding:0; color:#222; background:url(images/bodyBg.gif) repeat-x 0 0; } div{margin:0 auto; padding:0;} h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form,img,p{ margin:0; padding:0; border:none; list-style-type:none; } h1,h2,h3,h4,h5,h6{font-size:12px;} .block{ width:980px; height:auto; } .f_l{float:left;} .f_r{float:right;} .tl{ text-align:left;} .tc{ text-align:center;} .tr{ text-align:right;} .dis{display:block;} .inline{display:inline;} .none{display:none;} .flash{margin-bottom:6px;} .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } *html .clearfix{ height:1%; } *+html .clearfix{ height:1%; } /*英文强制换行*/ .word{word-break:break-all;} a:link {color: #222; text-decoration:none;} a:visited {color: #222;text-decoration:none;} a:hover {color: #ff0000; text-decoration:none;} a:active {color: #222; text-decoration:none;} /*字体颜色*/ .f1{color:#cc0000;} .f2{color:#ff0000; font-weight:bold;} .f3{ font-size:14px; color:#005aa0;} .f4{font-size:16px; font-weight:bold; color:#005aa0;} .f5{color:#999999;} .price{color:#cc0000; font-weight:bold;} .market_price{color:#757575; font-weight:bold; text-decoration:line-through;} /*表单*/ .InputBorder{ border:1px solid #1c618e; background:#fff; height:17px; } .formBorder{border:1px solid #468ebe;} /*按钮*/ .bnt_number2{border:none; width:50px; height:22px; line-height:22px; background:url(images/bg.gif) no-repeat 0 -152px; } .bnt_number4{border:none; width:70px; height:22px; line-height:22px; background:url(images/bg.gif) no-repeat -64px -152px; } .bnt_number6{border:none; width:93px; height:22px; line-height:22px; background:url(images/bg.gif) no-repeat 0 -181px; } .bnt_number10{border:none; width:155px; height:22px; line-height:22px; background:url(images/bg.gif) no-repeat -116px -181px; } .tips{ text-align:center; padding:50px 0; font-size:14px; font-weight:bold; color:#ff0000;} /* ==================== 页面头部 ==================== */ #HeadTop{ width:980px; } #HeadTop .logo{ width:220px; padding:20px 0; text-align:center; overflow:hidden; } #HeadTop .logoRight{ width:760px; } /*顶部导航*/ #HeadTop .logoRight .TopNav{ height:25px; line-height:25px; padding:0 10px; background:url(images/headTopNav_bg.gif) repeat-x 0 0; color:#b8d1ea; position:relative; } #HeadTop .logoRight .TopNav .left{ display:block; width:5px; height:25px; background:url(images/bg.gif) no-repeat 0px 0px; position:absolute; left:0px; top:0px; } #HeadTop .logoRight .TopNav .right{ display:block; width:5px; height:25px; background:url(images/bg.gif) no-repeat -6px 0px; position:absolute; right:0px; top:0px; } #HeadTop .logoRight .TopNav a{ color:#333; text-decoration:none; } /*用户信息*/ #ECS_MEMBERZONE{ margin-top:30px; } /*主导航*/ #Nav{ height:28px; margin-top:10px; } #Nav a{ display:block; line-height:28px; color:#005ba1; text-decoration:none; background:url(images/navBg_1.gif) repeat-x 0 0; font-weight:bold; font-size:14; float:left; padding:0 8px; text-align:center; position:relative; margin-right:2px; _margin-right:1px; } #Nav a .left{ display:block; background:url(images/bg.gif) no-repeat -20px 0px; width:5px; height:28px; position:absolute; left:0px; top:0px; _position:absolute; left:-1px; top:0px; } #Nav a .right{ display:block; background:url(images/bg.gif) no-repeat -26px 0px; position:absolute; right:0px; top:0px; _position:absolute; right:-1px; top:0px; width:5px; height:28px; } #Nav a:hover,#Nav .cur{ display:block; line-height:28px; color:#fff; text-decoration:none; background:url(images/navBg.gif) repeat-x 0 0; font-weight:bold; font-size:14; float:left; padding:0 8px; text-align:center; position:relative; } #Nav a:hover .left,#Nav .cur .left{ display:block; background:url(images/bg.gif) no-repeat -40px 0px; width:5px; height:28px; position:absolute; left:0px; top:0px; _position:absolute; left:-1px; top:0px; } #Nav a:hover .right,#Nav .cur .right{ display:block; background:url(images/bg.gif) no-repeat -46px 0px; position:absolute; right:0px; top:0px; _position:absolute; right:-1px; top:0px; width:5px; height:28px; } /*搜索*/ #Search{ width:940px; height:60px; padding:8px 15px 0 25px; background:url(images/searchBg.gif) repeat-x 0 0; position:relative; color:#fff; margin-bottom:6px; } #Search .left,#Search .right{ width:15px; height:68px; display:block; } #Search .left{ background:url(images/bg.gif) no-repeat -72px 0px; position:absolute; left:0px; top:0px; } #Search .right{ background:url(images/bg.gif) no-repeat -89px 0px; position:absolute; right:0px; top:0px; } #Search a{ color:#fff; text-decoration:none; } #Search a:hover{ color:#fff; text-decoration:underline; } #Search .FormBox{ margin-top:6px; } /*购物车*/ #Search .cart a,#Search .cart a:hover{ color:#a0410a; text-decoration:none; } .cart{ background:url(images/cartBg.gif) repeat-x 0 0; height:28px; line-height:28px; position:relative; padding:0 15px 0 36px; margin-top:3px; } #Search .cart .left{ display:block; background:url(images/bg.gif) no-repeat 0px -115px; width:36px; height:28px; position:absolute; left:0px; top:0px; } #Search .cart .right{ display:block; background:url(images/bg.gif) no-repeat -37px -115px; width:10px; height:28px; position:absolute; right:0px; _right:-1px; top:0px; } /* ==================== 结构布局 ==================== */ /*整体两栏式*/ #left{ width:211px; float:left; margin-right:6px; } #right{ width:763px; float:right; } #right #Rleft{ float:left; width:546px; } #right #Rright{ float:right; width:211px; margin-left:6px; } /*文章内容页*/ #aritile_left{ width:763px; float:left; margin:0 6px 0 0; } #aritile_right{ width:211px; float:right; } /*通用模块（风格一）*/ .modTitle{height:27px; line-height:27px; background:url(images/titleBg.gif) repeat-x 0 0; color:#fff; text-align:left; font-weight:bold; position:relative; padding:0px 12px; } .modTitle span{display:block; width:7px; height:27px;} .modTitle .left{background:url(images/bg.gif) no-repeat -121px 0px; position:absolute; left:0px; top:0px; } .modTitle .right{background:url(images/bg.gif) no-repeat -129px 0px; position:absolute; right:0px; _right:-1px; top:0px; } .modTitle .more{float:right; font-weight:100;} .modTitle .more a{color:#fff;} .modTitle .more img{margin-top:10px;} .modBox{border:1px solid #468ebe; margin-bottom:6px; border-top:none;} .modBox_1{border:1px solid #b2d2dd; border-top:none; margin-bottom:6px;} /*通用模块（风格二）*/ .mod2{ border:1px solid #b2d2dd; margin-bottom:6px; } .mod2 h1{ background:url(images/mod2Bg.gif) repeat-x 0 0; position:relative; *margin-top:-4px; height:24px; color:#005aa0; padding:5px 10px 0px 10px; } .mod2 h1 a{color:#005aa0;} .mod2 .more{margin-top:5px;} .mod2 h1 span{display:block; width:5px; height:5px;} .mod2 h1 .left{background:url(images/bg.gif) no-repeat -155px 0px; position:absolute; left:-1px; top:-1px; } .mod2 h1 .right{background:url(images/bg.gif) no-repeat -162px 0px; position:absolute; right:-1px; _right:-2px; top:-1px; } /*通用模块（风格三）*/ .mod3{ margin-bottom:6px; } .mod3 h3{height:27px; line-height:27px; background:url(images/mod3Bg.gif) repeat-x left top; text-align:right; padding:0 10px; position:relative; } .mod3 h3 .more{margin-top:10px; *margin-top:0px; _margin-top:10px;} .mod3 h3 span{display:block; width:5px; height:27px; background:url(images/bg.gif) no-repeat -181px 0px; position:absolute; top:0px; right:0px; } .mod3 h3 .mod3Tit{backgrou