CSS样式---电商案例之页面头部样式

	
		
		
		
		
	
	
		

			

				
Currency:GBP
				
empty
				
Sign In
				
Register
				
			
		
	

==========================================================

下面是它的样式内容：

@charset "utf-8";

/*去掉自带的样式*/
*{
	padding: 0;/*内填充*/
	margin: 0;/*外边距*/
	font-size: 12px;/*设置公共字体大小*/
	list-style: none;/*去掉表上的点*/
}
.topBJ{
	width:100%;/*顶部设计 宽*/
	height: 33px;/*顶部设计  高*/
	background: #333;/*顶部设计  背景色*/
}
.topBJ .top{
	width: 860px;/*顶部中间盒子 宽*/
	height: 100%;/*顶部中间盒子 高*/
	margin: 0 auto;/*顶部盒子与topBJ盒子的外边距和 居中设计*/
	 
}
.topBJ .top li{
	width: 110px;/*top盒子的列表 宽*/
	height: 100%;/*top盒子内li列表的高与top、topBJ盒子高相同*/
	float: right;/*向右浮动*/
	line-height: 33px;/*列表里字体行高*/
	color: #777777;/*字体颜色*/
	cursor: pointer;/*当鼠标指针指向列表时变成小手形式*/
}
.topBJ .top li:first-child{
	float: left;/*这是个伪类元素，用于li表里第一个元素右移*/
}
.topBJ .top .mouse:hover{/*鼠标滑过时颜色改变*/
	color: #00c8c8;
}
.topBJ .top .gouwuche{
	width: 60px;/*购物车宽度*/
	background: #00c8c8;/*购物车背景*/
	color: #fff;/*购物车字体颜色*/
	padding-left:50px;/*购物车向右浮动*/
	position: relative;/*购物车相对定位*/
}
.topBJ .top .gouwuche img{
	position: absolute;/*购物车里的图片绝对定位*/
	left: 17px;/*向右浮动17px*/
	top: 10px;/*与盒子顶部距离为10px*/
}

所用到的图片：