【京东电商网站主界面仿写——CSS第一部分】

_background-image: url(…/images/toolbar-png8.png);

background-repeat: no-repeat;

}

.jdm-toolbar-tab .tab-text {

width: 62px;

height: 35px;

line-height: 35px;

color: #fff;

text-align: center;

font-family: “微软雅黑”;

position: absolute;

z-index: 1;

left: 35px;

top: 0;

-webkit-border-radius: 3px 0 0 3px;

-moz-border-radius: 3px 0 0 3px;

border-radius: 3px 0 0 3px;

-webkit-transition: left .3s ease-in-out .1s;

-moz-transition: left .3s ease-in-out .1s;

transition: left .3s ease-in-out .1s;

_display: none;

}

.jdm-toolbar-footer {

position: absolute;

bottom: -1px;

width: 100%;

left: -29px;

}

.jdm-toolbar .jdm-toolbar-footer .jdm-tbar-tab-survey .tab-text {

left: 0px;

width: 35px;

height: 30px;

padding: 2px 0 3px;

line-height: 15px;

background: #c81623;

_display: block;

}

.jdm-toolbar-footer .jdm-tbar-tab:hover .jdm-tbar-tab-top>.tab-text {

left: -48px;

}

.jdm-toolbar-tab:hover,.jdm-toolbar-tab .tab-ico:hover{background-color: #c81623;}

.jdm-toolbar-tab:hover .tab-text {

left: -60px;

background-color: #c81623;

_display: block;

}

/顶部/

.header-box{width:1210px;margin:0 auto;}

.header-left{float:left;font-size:12px;color:#666;width:96px;height:30px;}

.header-left li{padding:0 24px 0 10px; position:relative;}

.header-right{float:right;}

.header-right li{float:left;padding:0 2px;font-size:12px;height:30px; padding:0 24px 0 10px;position:relative;}

.header-right .shu{width:1px;height:12px;margin-top:9px;background:#ddd;padding:0;}

.ci-right{font: 400 15px/15px consolas;height: 7px;overflow: hidden;position:absolute;top:12px;right:5px;-webkit-transition: -webkit-transform .1s ease-in 0s;color:#6a6a6a;-moz-transition: -moz-transform .1s ease-in 0s;color:#6a6a6a;}

.ci-leftll{font: 400 15px/15px consolas;height: 7px;overflow: hidden;position:absolute;top:12px;right:5px;-webkit-transition: -webkit-transform .1s ease-in 0s;color:#6a6a6a;-moz-transition: -moz-transform .1s ease-in 0s;}

#header li:hover .ci-right{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);}

#header li:hover .ci-leftll{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);}

/北京二级菜单/

.bj{border-left:1px solid #F1