网页制作模仿（2）

 我们可以看到红色圆圈中的小图标，接下来示范如何获取小图标。

1，首先登入网站

 2，选择想要的图标，点击download。（这里选择的是定位图标）

 3，下载后会形成一个压缩包，压缩包解压成文件，得到如下图。

 4，把文件中的fonts里面的所有文件复制到项目中的fonts里

 5，在文件中导入s.css样式（原为style.css,我改了名字）

 6，现在开始制作导航栏。

<!--导航栏-->
		<div class="shortcut">
			<!--版心-->
			<div class="w">
				<!--左浮动-->
				<ul class="fl"> 
					<!--定位图标为东京标准红色，且设置了大小-->
					<li><i class = "fred addressSize"></i><a href="#">四川</a></li>
				</ul>
				<!--右浮动-->
				<ul class="fr">
					<li><a href="#">你好 ， 请登录</a> &nbsp; </li>
					<li><a href="#" class="fred">免费注册</a></li>
					<li class="space"></li>
					<li><a href="#">我的订单</a></li>
					<li class="space"></li>
					<li><a href="#">我的京东</a>
						<i></i>
					</li>
					<li class="space"></li>
					<li><a href="#">京东会员</a></li>
					<li class="space"></li>
					<li><a href="#"class = "fred">企业采购</a>
						<i></i>
					</li>
					<li class="space"></li>
					<li><a href="#">客户服务</a>
						<i></i>
					</li>
					<li class="space"></li>
					<li><a href="#">网站导航</a>
						<i></i>
					</li>
					<li class="space"></li>
					<li><a href="#" class="mobile">手机京东
						<!--二维码图片连接-->
					<img src="https://img12.360buyimg.com/img/jfs/t1/67481/15/565/28110/5cec9234E71c47244/dc4cf353fd96922e.png.webp" width="60px" height="60px"/>
					</a>
					</li>
					<li class="space"></li>
					<li><a href="#">网站无障碍</a></li>
				</ul>
			</div>
		</div>

7，基本css样式，和导航栏样式

/*基本样式*/
*{
	padding: 0;
	margin: 0;
}
.fl{
	float: left;
}
.fr{
	float: right;
}

a:hover{
	color: #c81623;
}
/*style样式*/
.shortcut{
	width: 1536px;
	height: 30px;
	line-height: 30px;
	background-color: #e3e4e5;
	border-bottom: 1px solid #ddd;
	color: #999;
	font-size: 12px;
}
.w{
	width: 1190px;
	margin: 0 auto;
}
.fred{
	color: #f10215;
}
i.addressSize{
	font-size: 15px;
	padding: 2px;
}
.space{
	width: 1px;
	height: 10px;
	background-color: #ccc;
	margin: 10px 12px 0;
}

注意：小图标需要进入解压的icomoon文件中的demo.html复制，然后粘贴到上面代码的<i>  <i>中间，图标就能显示出来了。

8，最后得到红框中方的效果