仿小米官网首页 动态交互（HTML+css+jq）1.通栏以及logo部分

刚学完jQuery ，所以想巩固一下。小米官网的首页是我一直想写的，因为觉得他的页面结构 特效什么的都很好看，正好也复习一下css。 然后整个页面大概用了4.5天的样子，总算将其中大部分效果都做出来了，还有些效果有一点bug 然后如果有说的不对的地方希望路过的大佬能帮忙指正。

第一部分 通栏**

HTML 代码（因为还没学面向对象所以结构有点繁琐）

		
"hader">
			
"w">
				
				
"nav_left">
					"javascript:;">小米商城
					"javascript:;">MIUI
					"javascript:;">loT
					"javascript:;">云服务
					"javascript:;">金融
					"javascript:;">有品
					"javascript:;">小爱开放平台
					"javascript:;">企业团购
					"javascript:;">资质证照
					"javascript:;">协议规则
					"javascript:;" class="xiazai">下载APP
						
"erweima">
							
							"images/download.png">
							
小米商城APP
						
					"javascript:;">Select Location
				
				
				
"nav_right">
					
					
"text">
						"javascript:;">登录
						"javascript:;">注册
						"javascript:;">消息通知
					
					
					
"car">购物车(0)
						
"cars">这里还什么都没有哦
					
				
			
		
		

CSS 代码

.w {
	width: 1226px;
	margin: 0 auto;
}

/* 头部通栏 */
.hader {
	height: 40px;
	background-color: #333333;
}

/* 头部左移模块 */
.nav_left {
	float: left;
	height: 40px;
	line-height: 40px;
}

.nav_left a {
	display: inline-block;
	height: 40px;
	font-size: 13px;
	margin-left: 10px;
}

.nav_left a:hover,
.nav_right a:hover {
	color: #FFFFFF;
}

.xiazai {
	position: relative;
}

/* 二维码部分 */
.erweima {
	position: absolute;
	top: 40px;
	left: -47px;
	width: 140px;
	height: 165px;
	text-align: center;
	line-height: 154px;
	display: none;
	background-color: #FFFFFF;
	z-index: 999;
	box-shadow: 0 0px 10px rgba(0, 0, 0, .3);
}

.erweima img {
	width: 100px;
	height: 100px;
}

.erweima p {
	position: absolute;
	bottom: 80px;
	left: 23px;
	height: 15px;
	color: #333333;
	font-size: 16px;
}
.erweima span {
	position: absolute;
	top: -20px;
	left: 61px;
	width: 0;
	height: 0;
	/* 照顾兼容性 */
	line-height: 0;
	font-size: 0;
	/* 三角形大小靠边框大小控制 */
	border: 10px solid transparent;
	/*bottom 箭头朝上 ，top 箭头朝下*/
	border-bottom-color: #FFFFFF;
}

/* 头部右移模块 */
.nav_right {
	float: right;
	width: 270px;
	height: 40px;
}

.nav_right a {
	float: left;
	height: 40px;
	font-size: 13px;
	line-height: 40px;
	margin-right: 10px;
}

.car {
	position: relative;
	float: right;
	width: 120px;
	height: 40px;
	background: rgba(85, 85, 85, 0.3);
	line-height: 40px;
	text-align: center;
	cursor: pointer;
}

.cars {
	position: absolute;
	top: 40px;
	left: -165px;
	width: 285px;
	height: 100px;
	background-color: #ffffff;
	box-shadow: 0 5px 3px rgba(0, 0, 0, .3);
	font-size: 14px;
	text-align: center;
	line-height: 100px;
	display: none;
}

.car::before {
	font-family: 'icomoon';
	content: "\e93a";
}

jQ部分
当鼠标移入下载APP 时做下拉滑动 移开上拉滑动
这里有个小bug 就是当鼠标移入时 下拉 那个小三角会延迟出现，不会和父盒子同步出现
代码`：

// 一、头部部分
	// 1.鼠标经过下载APP 二维码显示
	// .hover() 事件切换 .slideToggle() 滑动切换
	$(".xiazai").hover(function() {
		$(".erweima").stop().slideToggle();
	});

鼠标移入购物车 下拉

// 2.鼠标经过购物车
	$(".car").hover(function() {
		$(".cars").stop().slideDown()
		$(this).css("background-color", "white")
	}, function() {
		$(".cars").stop().slideUp();
		$(this).css("background-color", "rgba(85, 85, 85, 0.3)")
	});

第二部分 logo 部分

这个我是用css写的 参考了一位老哥的写法
首先有一个盒子包裹一个a标签：
HTML

"nav w">
			
			
"logo">
				"index.html" title="小米官网">小米官网
			

css 部分
将a 背景色改为橙色 同时加上 溢出隐藏（overflow：hidden）

/* logo部分 */
.logo {
	float: left;
	margin-top: 20px;
}

.nav .logo a {
	position: relative;
	display: block;
	width: 55px;
	height: 55px;
	background-color: orangered;
	font-size: 0;
	overflow: hidden;
}

然后给他追加 before 、after 伪元素

.nav .logo a::after,
.nav .logo a::before {
	content: "";
	/* 动画必须加定位 */
	position: absolute;
	top: 0;
	left: 0;
	width: 55px;
	height: 55px;
	transition: all .3s;
}

将before 伪元素 的背景图 设为logo 就是这个：

.nav .logo a::before {
	background: url(images/mi-logo.png) no-repeat 50% 50%;
}

将 after 伪元素的背景图 设为 home ：
同时要将after 伪元素 向左偏移55像素

.nav .logo a::after {
	background: url(images/mi-home.png) no-repeat 50% 50%;
	left: -55px;
}

当我们鼠标 移入 a 时我们 的before、after 伪元素全都向右移动55像素

.nav .logo a:hover::after,
.nav .logo a:hover::before {
	/* 注意这里往右走的距离要和上面after往左偏移走的距离一样 */
	transform: translate(55px);
}