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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/1-home.css" />
		<title>home</title>
		
	</head>
	<body>
		<div class="topBJ">
			<ul class="top">
				<li>Currency:GBP</li>
				<li class="gouwuche"><img src="img/gouwuche.png" alt="" />empty</li>
				<li class="mouse">Sign In</li>
				<li class="mouse">Register</li>
				
			</ul>
		</div>
	</body>
</html>

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

下面是它的样式内容：

@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*/
}

所用到的图片：

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

猜你喜欢