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

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

静态页面采坑记录

  1. 网页标题小矢量图
    在标签中使用link标签
    <link rel="icon" href="图标地址"
    将图片转化为ico格式,放在项目根目录下引用即可,标签详解:
    https://www.w3cschool.cn/htmltags/tag-link.html

  2. 矢量图标的引入
         顶部的导航栏 li 标签中的还会存在一些矢量小图标,直接引入矢量图有些部分是无法实现的,如收藏夹前的小星星,鼠标聚焦会改变颜色,很明显不是一个图片,而是类似于一种文字。
         正是要把它转换为一种特殊的文字来引用,在阿里巴巴矢量图标库中下载相应的图标代码,下载的html文件中提供了三种相应的引用方法。因为是学习,只应用了Unicode方式。Unicode方法和Font class都不支持多色,可支持多色的Symbol方法可能会成为主流方法。

  3. 小小小箭头
         淘宝首页顶部导航栏,有的 li 右侧会有一个很小的倒箭头,一开始使用的是缩小矢量图代码相应的font size ,结果没有成功。控制台显示的size就是5px,但没有缩小。设置span标签的宽高,然后overflow:hidden,就截取了箭头下面一丢丢。

    	```
    	#nav-top  span.arrow{
    		mar
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值