网页制作模仿（2）

兰陵笑笑生生

已于 2022-08-29 14:39:01 修改

阅读量701

点赞数

文章标签： html css

于 2022-08-04 01:59:05 首次发布

本文链接： https://blog.csdn.net/qq_64276680/article/details/126151646

版权

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

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，最后得到红框中方的效果