前端学习第一弹-仿淘宝静态页面

最新推荐文章于 2022-06-16 13:40:09 发布

原创最新推荐文章于 2022-06-16 13:40:09 发布 · 839 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

前端专栏收录该内容

2 篇文章

订阅专栏

本文记录了前端学习过程中制作淘宝静态页面时遇到的问题与解决方案，包括矢量图标的应用、小箭头的绘制、以图代字的实现、换行空格的消除以及div并排布局的方法。通过学习，作者了解到阿里巴巴矢量图标库的Unicode引用方式，并掌握了初始化样式和布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

静态页面采坑记录

网页标题小矢量图
在标签中使用link标签
<link rel="icon" href="图标地址"
将图片转化为ico格式，放在项目根目录下引用即可，标签详解：
https://www.w3cschool.cn/htmltags/tag-link.html
矢量图标的引入
顶部的导航栏 li 标签中的还会存在一些矢量小图标，直接引入矢量图有些部分是无法实现的，如收藏夹前的小星星，鼠标聚焦会改变颜色，很明显不是一个图片，而是类似于一种文字。
正是要把它转换为一种特殊的文字来引用，在阿里巴巴矢量图标库中下载相应的图标代码，下载的html文件中提供了三种相应的引用方法。因为是学习，只应用了Unicode方式。Unicode方法和Font class都不支持多色，可支持多色的Symbol方法可能会成为主流方法。
小小小箭头
淘宝首页顶部导航栏，有的 li 右侧会有一个很小的倒箭头，一开始使用的是缩小矢量图代码相应的font size ，结果没有成功。控制台显示的size就是5px，但没有缩小。设置span标签的宽高，然后overflow：hidden，就截取了箭头下面一丢丢。
```
	```
	#nav-top  span.arrow{
		margin-top: 16px;
		display: block;
		float: left;
		width: 12px;
		height: 6px;
		line-height: 6px;
		margin-left: 7px;
		font-size: 12px;
		overflow: hidden;
	}
	#nav-top .arrow .iconfont{
		display: block;
		margin-top: -2px;
	}
	```
```

以图代字
淘宝网logo图片处，当图片未加载时会显示文字。这个方法有很多中：如设置height为0，用padding-top代表height，然后溢出隐藏。也可以设置缩进，负缩进（或正缩进不换行？）等方法。

```
	#headSearch h1 a{
				display: block;
			    margin-left: 22px;
			    padding-top: 62px;
			    width: 142px;
			    height: 0;
			    overflow: hidden;
			   /* text-indent: -9999px;*/
				background:url(图片路径) center no-repeat
			}
```

换行空格
在html中连续几个内联标签或表单元素标签的换行在浏览器会被解释为一个3px的空格。经过实验发现，这个空格是根据父元素字体变化而变化的，直接给父元素设置字体大小 font-size：0，再给子元素另外设置字体大小。
div并排布局
三个div横向布局（logo、搜索框、二维码），logo左浮动，然后二维码右浮动，搜索框自适应即可（左浮动，自适应）
标准
初始化样式（a，ul/li，body，button，h 标签等），设置一般的常用样式（左右浮动、清除浮动（清除浮动三件套content display clear）、颜色、文本等）这样class直接使用即可。不同部分开始可以设置一个总的id，唯一的id使css各部分其余样式设置更简单，更直观。