小米页面2

1.缩放页面，不会跑

 下方蓝色区域不会随着缩放而改变位置

为蓝的加样式

.page-nav {
	height: 96px;
	background-color: aquamarine;
	width: 1226px;
	margin-right: auto;
	margin-left: auto;
}

<div class="page-nav">
			<a href="" class="logo">
			<img src="img/logo-mi2.png" />
			</a>
			<ul class="container-nav">
                
				<li class="nav-item">
					<a href="" class="tit">
						全部商品分类
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="tit">
						Xiaomi手机
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="tit">
						Redmi 红米
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="tit">
						电视
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="tit">
						笔记本
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="tit">
						平板
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="tit">
						家电
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="tit">
						路由器
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="tit">
						服务
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="tit">
						社区
					</a>
				</li>
			</ul>
			<div class="search"></div>
		</div>
		</div>

2.通栏的效果，要注意参考的父级

3.遇到这样一个问题-自己设定的line-height不生效

 只要两者都定义了高度，就不会影响了。

.slider-nav .slider-li{
	list-style: none;
	height: 42px;
	line-height: 42px;
	padding: 0 24px 0 30px;
}