[84-86]_京东顶部导航条练习

最新推荐文章于 2022-09-28 19:24:52 发布

「已注销」

最新推荐文章于 2022-09-28 19:24:52 发布

阅读量234

点赞数

分类专栏： HTML CSS 基础文章标签： css

本文链接：https://blog.csdn.net/gty204625782/article/details/119858224

版权

今天花了很久时间，终于把京东顶部的导航条弄好了，学得了一个经验，每次布局的时候先把所有元素都用outline外轮廓给框上，这个和border不同的是，它不会影响页面的布局，仅仅是加上轮廓。这次还用到了阿里巴巴矢量图标库的两个图标，一个特别重要的知识点就是只有当元素是行内块元素时，才能旋转图标，所以在旋转图标之前加上display: inline-block;，这是十分重要的，不然旋转就会失败。这次的练习由于有我下载的图标文件，所以我会将文件打包上传，点击下载，大家可以自行下载，练习十分重要。

下面是HTML源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./font_2760850_j9byr7p8q5/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="./index.css" />
	</head>
	<body>
		<div id="shortcut">
			<div class="w">

				<ul class="fl">
					<li>
						<a href="#">
							<i class="iconfont icon-icon-test"></i>
							<span>湖南</span>
						</a>
						<div id="area">

						</div>
					</li>
				</ul>










				<ul class

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[84-86]_京东顶部导航条练习

今天花了很久时间，终于把京东顶部的导航条弄好了，学得了一个经验，每次布局的时候先把所有元素都用outline外轮廓给框上，这个和border不同的是，它不会影响页面的布局，仅仅是加上轮廓。这次还用到了阿里巴巴矢量图标库的两个图标，一个特别重要的知识点就是只有当元素是行内块元素时，才能旋转图标，所以在旋转图标之前加上display: inline-block;，这是十分重要的，不然旋转就会失败。这次的练习由于有我下载的图标文件，所以我会将文件打包上传，大家可以自行下载，练习十分重要。下面是HTML源代码：
复制链接

扫一扫