精灵图可以减少网络请求次数,有效降低页面加载延迟。
如何生成精灵图?
两个有用的站点:
可以选择、查看指定背景块的样式。
https://www.toptal.com/developers/css/sprite-generator
可以将小图片合成精灵图。下载精灵图后,可以使用webp工具,将其转换为webp格式,进一步降低图片文件大小。
示例:
<h1>如何使用精灵图?</h1>
效果:
如果没有设置display:block或inline-block,或float:left,是没有效果的。为什么?
块级元素
行内级元素
行内级元素没有宽高(但margin、padding可以起作用),块级元素有宽高。
块级元素 -> 行内级元素: display:inline;
inline-block与inline、block有什么区别?
block元素前后有换行效果(但是没有换行标签)。
inline、inline-block前后无换行效果,元素水平从左向右逐一排列。
2020年9月25日
**【关于作者】
**
李艺,笔名“石桥码农,腾讯云最具价值专家(TVP),腾讯课堂启明星俱乐部成员,日行一课联合创始人兼 CTO,前 VIPKID 资深技术专家。国内早期闪客之一,具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线,为数千万人使用。从 0 到 1 创建课件标准,被团队誉为课件之父,官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1:微信全栈工程师一本通》等计算机图书,是极客时间视频畅销课《微信小程序全栈开发实战》的作者,知乎 Live 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。
【著作介绍】
《小程序从0到1:微信全栈工程师一本通》是一本全面讲解微信小程序开发技术的书籍,既包括前端开发,又包括后端及数据库开发。内容依据初学者而编,特别适合新手入门。戳下方小程序链接购买签名版,或至京东当当搜索书名购买普通版。
戳此购买《小程序从0到1:微信全栈工程师一本通》作者签名版
所有《小程序从0到1的》读者朋友,及所有极客时间视频学员,欢迎戳下方卡片限时免费加入微信圈子:
李艺读者朋友的微信圈子
在圈子里可以与圈友讨论交流技术,还可以免费向作者提问。
【篆刻定制】
篆刻是作者个人的爱好,长年坚持小有起色。除了为周围亲戚好友定制,还向读者朋友们提供私人定制服务。共提供普通版定制,与收藏版定制两种规格,戳下方链接下单。
李艺印章私人定制链接
【课程介绍】
介绍一下作者的极客时间视频课《微信小程序全栈开发实战——手把手带你实现一款电商小程序》,戳此链接团购入手价格更实惠:http://gk.link/a/10itD
学习技术一定是需要知行合一的,在掌握原理和工具的使用后,结合具体的项目实践,让功能实现出来,同时加深对原理的理解。很多人在学习开始时急于求成,前面一些问题上没有完全搞明白,就着急往下走,当后面遇到挑战,需要依赖前面那部分知识作为支撑的时候,难免心生茫然,无计可施。在开始的时候,下一些苦功夫、笨功夫,从长远来看是非常值得的。
因此,本课程将在基础部分讲解常用的组件与接口,并且注重与最佳实践和易错问题的结合。在实战项目的安排上,为了避免实例太多,知识断裂无序,会带你开发一个大的项目,把绝大部分小程序开发的知识和技术包括进去,同时将必须的基础知识,在课程中按从易到难的顺序,穿插项目讲解,相信会让你受益匪浅。
购课后记得加入上面的微信圈子,有问题欢迎在圈子里互动讨论。
我们所有的骄傲多半来源于我们的无知。关注我 一起成长。
微信号:ygsjjs
文章开白及商务合作请发邮件至:liyi@rxyk.cn
最后来个点赞、在看、转发三连吧~
你点的每个“在看”,我都当成了喜欢~
本文分享自微信公众号 - 程序员LIYI(CoderLIYI)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。