shopnc系统高仿天猫上半部分代码

阡陌尘 · 发表于 2013-6-15 12:53:43

模板说明：
需要仿天猫左边导航的的颜色
在index_layout.css里的以下样式表，改变背景、边框颜色就可以了，本人就不详细说了，自己琢磨

#all-category {
width:210px;
position: relative;
z-index:999;
background-color: #FFFFFF;
top: -47px;
}
#all-category h2.title a {
line-height: 1000px;
background: #FFF5E1 url(../images/title.gif) no-repeat 12px 9px;
display:block;
width: 208px;
height: 45px;
*height:43px; margin:0;
position: absolute;
overflow: hidden;
top: 0px;
left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
#all-category .category {
background-color: #FFF5E1;
width: 208px;
position: absolute;
overflow:visible;
top: 45px;
*top: 43px; left: 0px;
z-index: 11;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
.category ul {
overflow: visible;
*overflow: hidden;
}
.category li { position: relative; z-index: 1; margin:0; padding: 0;}
.category li { margin:0; padding: 0;}
.category li h3 { line-height:40px; *line-height: 38px; background: url(../images/categorybg.gif) no-repeat 50% 0; height:40px; *height: 38px; padding: 0 7px;}
.category li h3 b { line-height: 1000px; background: url(../images/categorybg.gif) no-repeat 0px -193px; width: 15px; height: 29px; position: absolute; z-index: 1; overflow: hidden; top: 0px; left: 175px; }
.category li h3 a { font-size: 14px; font-weight: normal; text-decoration:none; background: url(../images/categorybg.gif) no-repeat 24px -119px; text-align: left; text-indent: 36px; display: block; width: 171px; padding: 1px 0; *padding: 4px 0 0 0; position: absolute; z-index: 2; top: -1px; left: 0;}
#category .a {z-index:2;}
#category .a h3 { background: #FFF; }
.category .a h3 b {}
.category .a h3 a {
color: #C00;
background: #FFF url(../images/categorybg.gif) repeat-x 0px -70px;
border-right-width: 0;
top: -2px;
left:-1px;
z-index: 100;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
.category .open { line-height:10px; text-indent: -9999px; background:url(../images/more_cat.gif) no-repeat 50% 0; width: 140px; height: 10px; display: block; margin: 5px auto; overflow: hidden; outline:none; }
.category .close { background:url(../images/more_cat.gif) no-repeat 50% -10px; }
.cat-menu { background: #fff; display: none; width: 590px; padding: 8px; border: 1px solid #999999; position: absolute; z-index: 99; overflow: hidden; top: -8px; left: 170px;}
.cat-menu dl {
display: block;
width: 580px;
float: left;
clear: left;
padding: 8px;
margin: 0;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #CCCCCC;
border-left-color: #FFFFFF;
}
.cat-menu dl.c1 {background-color: #FFF; border-color: #FFF #FFF #EFEFEF #FFF;}
.cat-menu dl.c2 { background-color: #F5F5F5; border-color: #EFEFEF; }
.cat-menu dt {
font-weight: bold;
line-height: 20px;
display: block;
width: 80px;
height: 20px;
float: left;
padding: 2px 0;
overflow: hidden;
}
.cat-menu dd {
display: block;
width: 500px;
float: left;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 5;
text-indent: 5px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCCCCC;
}
.cat-menu dd a {
font-size: 12px;
line-height: 20px;
display: block;
width: 80px;
height: 20px;
float: left;
overflow: hidden;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 1px;
padding-right: 0;
padding-bottom: 1px;
padding-left: 0;
}
/* 左边样式*/
.mall-cat{
display: block;
height: 108px;
width: 999px;
margin-right: auto;
margin-left: auto;
}