前端web实训——小米商城（第二天）

上次遗留问题

（1）topbar顶端的按钮悬浮时文字变色：

.topBar a:hover{
	color: #fff;
}

（2）购物车按钮是的鼠标悬停范围和图标一致：

.topBar.shop a{
	width: 120px;
	height: 40px;
	display: inline-block;
}

display: inline-block;a标签是个行内标签，设置宽高是不起作用的需要用到此代码转换成行内块。

1.导航栏结构搭建

分析结构：

1是site-logo，2是site-list，3是site-search

<!-- 导航栏 -->
		<div class="header">
			<div class="container">
				<div class="site-logo"></div>
				<div class="site-list"></div>
				<div class="site-search"></div>
			</div>
		</div>

（1）logo的创建：

<div class="site-logo">
					<a href="#">
						<img src="" />
					</a>
				</div>

（2）list的创建：

<div class="site-list">
					<ul>
						<li>
							<a href="#">小米手机</a>
						</li>
						<li>
							<a href="#">Redmi红米</a>
						</li>
						<li>
							<a href="#">电视</a>
						</li>
						<li>
							<a href="#">笔记本</a>
						</li>
						<li>
							<a href="#">家电</a>
						</li>
						<li>
							<a href="#">路由器</a>
						</li>
						<li>
							<a href="#">智能硬件</a>
						</li>
						<li>
							<a href="#">服务</a>
						</li>
						<li>
							<a href="#">社区</a>
						</li>
					</ul>
				</div>

（3）search搜索form：

<div class="site-search">
					<form action="">
						<input type="text" name="shop" />
						<input type="submit" />
					</form>
				</div>

2.小米导航栏的样式

（1）设置顶端导航栏样式

.header{
	height: 6.25rem;
}

（2）设置logo的位置和悬浮状态

.header .site-logo{
	float: left;
	width: 3.875rem;
	margin-top: 1.375rem;
}

（3）设置logo的a标签大小和logo大小一致

.header .site-logo a{
	display: block;
	width: 3.5rem;
	height: 3.5rem;
}

（4）设置ul中的属性
设置ul浮动，靠左，控制ul的高度让其保持在一行内

.header .site-list ul{
	width: 51.25rem;
	height: 5.5rem;
	padding: 0.75rem 0 0 1.875rem;
	font-size: 1rem;
}

.header .site-list ul li{
	float: left;
}

（5）设置li内a标签的属性：

.header .site-list ul li a{
	display: block;
	padding: 1.625rem 0.625rem 2.375rem;
	color: #333;
}

（6）设置鼠标在悬浮上去时会有颜色变化：

.header .site-list ul li a:hover{
	color: #ff6700;
}

（7）设置查询栏的属性：

.header .site-search{
	float: right;
	width: 7.5rem;
	margin-top: 1.5625rem;
	background-color: #B0B0B0;
}
.header .site-search form{
	width: 7.5rem;
	height: 3.125rem;
}

（8）设置两个input中的内容：

.header .site-search form .search-text{
	width: 14rem;
	height: 3rem;
	border: 0.0625rem solid #0e0e0e;
	font-size: 0.875rem;
	padding: 0 0.625rem;
	float: left;
	}
.header .site-search form .search-btn{
	margin-left: -0.0625rem;
	float: left;
	width: 3.125rem;
	height: 3.125rem;
	border: 0.0625rem solid #0e0e0e;
}

3.轮播图和侧边栏

（1）修改轮播图的大小：

.site-content .site-slider a{
	display: block;
	width: 76.625rem;
}
.site-content .site-slider a img{
	width: 76.625rem;
}

（2）侧边栏固定的位置是依据侧边栏上面的图片。

.header .site-list ul .site-category a{
	padding: 0;
}
.header .site-list ul li.site-category{
	position: relative;
}
.header .site-list ul li.site-category .category-list{
	position: absolute;
	top: 88px;
	left: -140px;
	width: 280px;
	height: 460px;
	background-color: rgba(0,0,0,0.6);
}

此过程是将侧边栏固定在头顶的按钮下方，并且调整好位置的过程。
rgba，a表示的是透明度。
（3）使用选择器将里面的css样式不作用到侧边栏内的内容。

.header .site-list>ul{
	width: 53.125rem;
	height: 5.5rem;
	padding: 0.75rem 0 0 1.875rem;
	font-size: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

重点在>号
(4)让侧边栏中的内容平均分布。
<号可以特定指向某个元素，只控制此元素。

.category-list>ul{
	width: 234px;
	height: 420px;
	padding: 20px 0;
}
.category-list>ul>li{
	height: 42px;
}