@CHARSET "UTF-8";

#div1 {
    height: 31px;
   	position: relative;
   	left:2px;
   	margin-left : -32px ;
}
#div1 ul {
    margin-left: 30px;
}
#div1 li
{
	float: left;
    list-style-type: none;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin-right: 2px; 
    /*在这里解释一下为什么height，line-height都取28px，这也是我们在定义样式中常用到的方法，
	假如我们只定义了高度28而没有定义行高的话，那么文字有一个默认的行高比如是12，那么文字就是在最上部显示，
	我们看到的也就是文字好象是偏在上方，如果我们在定义行高也是28那么我们看到的是就文字在垂直中部的位置了
	！这也是就我们所说的文字垂直居中的很好的一种方法！*/
}

#div1 a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left 0px;
    /*先说一下关于display: block;这个问题。定义块与不定义块的差别在于：
	不定义块我们点击这个链接时只有把属标放在文字上时我们才真正的接触到链接。
	定义块如果又定了它的高或者行高了补白了我们在用鼠标只要接触到了这些样式的上面我们实际上就是接触到了链接！
	两者比较这不就更人性化一些吗？做网站是用技术实现更重要的是用了技术能给人更好的服务，这就是人性化的服务！
    第二个要说的问题是关于背景的问题。背景请不要象上面分别定义样式，
	我们可以写成：
	background：url(http: //pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) 
	no-repeat left -29px;。上面多数情况是由可视化软件写成的，这就是为什么我们要用手写的原因。
	手写代码有更大的灵活性。必竞机器并不能完全知道你想要什么。如果想在加上一个背景色请这样写：
	background：#xxxxxx url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif)
	no-repeat left -29px;
    第三个问题是背景位置：背景位置第一个参数是关于水平的，第二个参数是垂直方向的参数。不要记错了。
	此外我们做翻转图片时，可能把原图片与翻转时图片做在一个图片中，这样在写样式时定义背景位置就可以了，
	此处-29px就定义到了灰色图的位置。在用同一个图片做翻转的另外一个好处是不会出现图片延迟现象的发生。
	第四个问题是为什么在定义图片位置为左。这是我们平时常在网上说的滑门技术！
	tab_selected_left_bk2.gif这个图片也就是用于滑门左边的那个图宽度是250PX所以整个菜单足够放很多个字了
	。因为在下还有一个样式#title a span，它是放右边的那个滑门图片的。注意#title a的图片是在里层，
	#title a span的背景图片是外层，所以右边的图片在一定范围内总是盖住左边图像的一部分。这样做的优点在于有可延伸性
	，如导航名字有三个字，有四个字都不会有问题。*/
}

#div1 a span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-repeat: no-repeat;
    background-position: right 0px;
    padding-right: 25px;
    padding-left: 25px;    
    /*具体看#title a，补充：这几句代码要知道是补白是可透背景图片的，
	另外这里加入左右各15PX是文字用的。加入后文字两边就有15PX的补白了。
	加入这个补白后父元素也会随着里面的子元素的宽度增加而增加。
	平时是否还记得我们在应该背景图片时如何让里面的文字隐藏的呢，
	常用的一共有两种方法：第一种：用text- indent: -99999px;
	第二种：在一个元素中加多加入一个SPAN元素，定义样式span{display:none;}
	当然#title a span的作用并不是这样了，我只是顺便提一句。我建议用第二种方法。*/
}


/*=====================同城促销=====================*/
#div1 #index a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -232px;
}

#div1 #index a:hover span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -232px;
    padding-right: 25px;
    padding-left: 25px;    
}

#div1 #index a:active {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -232px;
}

#div1 #index a:active span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -232px;
    padding-right: 25px;
    padding-left: 25px;
}
/*=====================加盟网店=====================*/
#div1 #gjgw a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -261px;
}

#div1 #gjgw a:hover span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -261px;
    padding-right: 25px;
    padding-left: 25px;    
}

#div1 #gjgw a:active {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -261px;
}

#div1 #gjgw a:active span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -261px;
    padding-right: 25px;
    padding-left: 25px;    
}

/*=====================箱包服饰=====================*/
#div1 #dxsc a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -29px;
}

#div1 #dxsc a:hover span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -29px;
    padding-right: 25px;
    padding-left: 25px;    
    /*为了使鼠标放上后背景图发生变化，这里必须定两个样式也就是a和上一个样式span;*/
}

#div1 #dxsc a:active {
	text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -29px;
}

#div1 #dxsc a:active span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -29px;
    padding-right: 25px;
    padding-left: 25px;    
    /*为了使鼠标放上后背景图发生变化，这里必须定两个样式也就是a和上一个样式span;*/
}



/*=====================美容化妆=====================*/
#div1 #ylxx a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -58px;
}
#div1 #ylxx a:hover span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -58px;
    padding-right: 25px;
    padding-left: 25px;    
}


#div1 #ylxx a:active {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -58px;
}

#div1 #ylxx a:active span{
	display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -58px;
    padding-right: 25px;
    padding-left: 25px;    
}

/*=====================数码电器=====================*/
#div1 #bgjd a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -203px;
}
#div1 #bgjd a:hover span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -203px;
    padding-right: 25px;
    padding-left: 25px;    
}

#div1 #bgjd a:active {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -203px;
}
#div1 #bgjd a:active span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -203px;
    padding-right: 25px;
    padding-left: 25px;    
}

/*=====================居家装饰=====================*/

#div1 #msjy a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -174px;
}
#div1 #msjy a:hover span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -174px;
    padding-right: 25px;
    padding-left: 25px;    
}

#div1 #msjy a:active {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -174px;
}
#div1 #msjy a:active span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -174px;
    padding-right: 25px;
    padding-left: 25px;    
}

/*=====================其他更多=====================*/

#div1 #other a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -145px;
}
#div1 #other a:hover span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -145px;
    padding-right: 25px;
    padding-left: 25px;    
}

#div1 #other a:active {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background-image: url(tab_selected_left_bk2.gif);
    background-repeat: no-repeat;
    background-position: left -145px;
}
#div1 #other a:active span{
    display: block;
    background-image: url(tab_selected_right_bk2.gif);
    background-position: right -145px;
    padding-right: 25px;
    padding-left: 25px;    
}


/*==================百易直通车==================*/
.81car{
	border-style:none;
	height:27px;
	width:62px;
	padding-top:1px;
	padding-left:2px;
	color:red;
	background-image:url(81car1.gif);
	background-repeat:no-repeat
}.81car2{
	border-style:none;
	height:27px;
	width:25px;
	padding-top:1px;
	padding-left:-1px;
	color:#808080;
	background-image:url(81car2.gif);
	background-repeat:no-repeat;
	cursor:hand;
}
/*====================逛街购物街道背景====================*/
.index_streetStyle_head{
    background-image: url(index_gjgw_streetbg.gif);
    background-repeat: no-repeat;
	border-left : 1px solid #D0C8F2;
	border-right : 1px solid #D0C8F2;
}
.index_streetStyle_content{
	border-left : 1px solid #D0C8F2;
	border-bottom : 1px solid #D0C8F2;
	border-right : 1px solid #D0C8F2;
}
/*====================快速查找商品导航区====================*/

.index_quickSelect{
	border : 1px #FF9900 solid;
	padding:5px 5px;
}
.index_quickSelect_bgcolor{
	height:50px;
	padding:5px 5px;
	event:expression(
		onmouseover = function(){this.style.backgroundColor = '#FFF5D9';},
		onmouseout = function(){this.style.backgroundColor = '#FFFFFF';}
	)
}
.index_quickSelect_submenu_title{
	background-color : #FEEDDE;
	width:30px;
	height:100%;
	color:#FF6600;
	font-size:15px;
	font-weight:bold;
	margin-right:20px;
	text-align:center;
}
.index_quickSelect_submenu{
	border-right:1px solid #808080;
	padding-right:4px;
}


/*====================同城快迅===================*/
.index_top{
	background-image:url(index_bgImg.png);
	background-repeat:no-repeat;
	width:330px;
	height:20px;
	text-align:center;
	font-weight:bold;
	font-size:15px;
	cursor:hand;
}
.index_title{
	width:250px;
	margin-left:5px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	
}
.index_title_date{
	width:50px;
	text-align:right;
	color:#808080;	
}