前端web实训——小米商城（第三天）_小米商城实训报告

1.侧边栏

(1)编辑侧边栏文字使得其平均的分布在侧边栏一侧：

.category-list>ul>li>a{
	padding-left: 30px;
	display: block;
	height: 42px;
	line-height: 42px;
	font-size: 12px;
	color: #fff;
}
1
2
3
4
5
6
7
8

（2）当鼠标悬停时，a块会变色：

.category-list>ul>li>a:hover{
	background-color: #FF6700;
}
1
2
3

（3）让图标“>”在指定位置，使用了父子类定位：

.category-list>ul>li>a>span{
	position: absolute;
	top: 12px;
	right: 20px;
	font-size: 16px;
	line-height: 16px;
}
1
2
3
4
5
6
7

父类是a标签，子类是a下的span
（4）实现轮播图中的切换上一张下一章按钮：

.site-content .site-slider span{
	position: absolute;
	width: 41px;
	height: 69px;
	background: url(../img/icon-slides.png)no-repeat 0 0;
	top: 50%;
	margin-top: -35px;
}
1
2
3
4
5
6
7
8

原始图片是一个背景透明的四个图标的排列，分别是悬停状态的左右以及非悬停状态的左右。
（5）将非悬停状态和悬停状态下的图标排列，利用了原图片切块的方式来显示不同的图标。

.site-content .site-slider span.prev{
	background-position: -83px 0;
	left: 234px;
}
.site-content .site-slider span.prev:hover{
	background-position: 0 0;
}
.site-content .site-slider span.next{
	background-position: -123px 0;
	right: 0px;
}
.site-content .site-slider span.next:hover{
	background-position: -41px 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

（6）编辑轮播栏右下角控制图片页数的部分：定位

.site-content .slider-item {
	position: absolute;
	width: 200px;
	height: 30px;
	line-height: 30px;
	text-align: right;
	background-color: green;
	bottom: 20px;
	right: 40px;
}
1
2
3
4
5
6
7
8
9
10

line-height: 30px;垂直居中
（7）指定控制页面部分的属性：

.slider-item>a{
	display: inline-block;
	width: 6px;
	height: 6px;
	background-color: rgba(255,255,255,.4);
	margin: 2px;
	border-radius: 6px;
	border: 2px solid #fff;
	border-color: rgba(255,255,255,.3);
}
1
2
3
4
5
6
7
8
9
10

2.向导

（1）结构搭建

左边是ul中有6个li，右边是ul中有三个li

<div class="content-sub">
				<div class="content-channel">
					<ul class="channel-list">
						<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>
				<div class="content-list">
					<ul>
						<li>
							<a href="#">
								<img s />
							</a>
							<a href="#">
								<img s />
							</a>
							<a href="#">
								<img s />
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

（2）下载要引入图标
使用iconfont将图标添加到项目中，下载到本地，添加font文件夹，将文件拷贝进去。
（3）根据iconfont中自带的index文件进行指引。
必须要有class：“iconfont” 再加上图标编号
（4）向导栏分为左右两边，添加图片和文字进去。设置其大小和浮动为向左浮动。

.content-sub{
	margin-top: 18px;
	overflow: hidden;
}
.content-sub .content-channel{
	float: left;
	width: 234px;
}
.content-sub .content-channel ul{
	background-color: #5f5750;
	font-size: 12px;
	text-align: center; 
}
.content-sub .content-channel ul li{
	float: left;
	width: 33.33%;
	height: 85px;
}
.content-sub .content-channel ul li a{
	display: block;
	color: rgba(255,255,255,0.6);
}
.content-sub .content-list{
	float: left;
	width: 992px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

（5）让i标签内的内容变成块的模式。
display取值
1、block 块级
2、inline 行内
3、inline-block 行内块级
设置 h1、h2、h3 元素的文本对齐方式：
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

3.banner图的实现

<div class="content-banner">
			<div class="container">
				<a href="#">
					<img src="img/banner.jpg" >
				</a>
				
			</div>
		</div>
1
2
3
4
5
6
7
8

.content-banner{
	margin-top: 18px;
}
.content-banner a{
	display: block;
	width: 1226px;
	height: 120px;
}
.content-banner a img{
	width: 1226px;
	height: 120px;
}
1
2
3
4
5
6
7
8
9
10
11
12

4.内容详情

分析图：

（1）标题部分：

<div class="box-hd">
					<h2>手机</h2>
					<div class="more">
						<a href="#">
							查看全部
							<i class="iconfont">&#xe602;</i>
						</a>
					</div>
				</div>
1
2
3
4
5
6
7
8
9

（2）内容部分：内容右边一个有四部分，分为图片，标题，段落，价格段落。

<li>
									<div class="figure">
										<a href="#">
											<img src="img/m1.png" />
										</a>
										<h3 class="title">
											<a href="#">
												小米MIX FOLD
											</a>
										</h3>
										<p class="desc">
											折叠大屏｜自研芯片
										</p>
										<p class="price">
											<span class="num">2999</span>元
										</p>
									</div>
								</li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

（3）标题部分样式：

.content-desc .box-hd{
	height: 58px;
	position: relative;
}
.content-desc .box-hd h2{
	font-size: 22px;
	font-weight: 200;
	line-height: 58px;
	color: #333;
}
.content-desc .box-hd .more{
	position: absolute;
	right: 0;
	top: 0;
}
.content-desc .box-hd .more a{
	font-size: 16px;
	line-height: 58px;
	color: #424242;
}
.content-desc .box-hd .more a i{
	width: 12px;
	height: 12px;
	padding: 4px;
	margin-left: 8px;
	border-radius: 12px;
	background-color: #b0b0b0;
	color: #fff;
	font-size: 12px;
	vertical-align: 1px;
}
.content-desc .box-hd .more:hover a{
	color: #ff6700;
}
.content-desc .box-hd .more:hover a i{
	background-color: #ff6700;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

border-radius圆边边框
vertical-align水平移动
（4）

在这里插入代码片
1

overflow: hidden清除浮动
overflow: hidden;超出部分不显示
white-space: nowrap;不允许换行