当前位置:Gxlcms > html代码 > 重构不完全教程集之二_html/css_WEB-ITnose

重构不完全教程集之二_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:27人阅读

故不登高山,不知天之高也;不临深溪,不知地之厚也。--摘自《劝学》

::before & ::after

相当于多了两个空白标签,可以放置一些修饰的点缀或内容等

  • css3 生成内容
  • A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

字体

字体方面主要包括:字体渲染方式,浏览器默认字体及重置,@font-face自定义字体,字体性能等

  • 字体渲染背后不得不说的故事
  • 字体渲染
  • 自定义字体 @font-face 详解
  • 移动端字体
  • 图标自定浅谈
  • google fonts
  • icomoon

图片

总得来说,图片的使用分为background和img,而从优化方向来说分为减少请求和减少大小。

图片优化原则:

  1. 能不使用就不使用(使用css3绘制简单的图形等)
  2. 矢量图与位图选择
  3. 挑选合适的图片格式(gif, png, jpg, webp等)及准备不同的规格大小(不同大小或retina屏)
  4. 合并(sprites)与压缩(有损压缩和无损压缩)

资源链接:

  • 图片延迟加载的实现
  • CSS Gradients
  • css sprites
  • 图片优化 - 谷歌图片优化手册
  • baseline vs progressive
  • 图片原理与优化
  • WebP 探寻之路
  • Web性能优化:图片优化

svg

目前svg最大的用途在图标及动画,最大的优点在于矢量图,可以任意缩放不失真,而且大小还比较小。

  • svg 兼容性
  • Pocket guide to writing svg
  • MDN svg tutorial
  • 理解SVG的viewport,viewBox,preserveAspectRatio
  • SVG Sprite技术介绍
  • SVG symbol a Good Choice for Icons
  • svg sprites 兼容js
  • svg line animation
  • 超级强大的SVG SMIL animation动画详解
  • awesome svg

css3 动画

分transition动画和animation动画,前者为两帧动画(只能控制开始和结束),而后者可以对任意帧进行更多处理。

  • Intro to CSS 3D transforms
  • CSS3 Transitions 101
  • CSS3 Animations 101
  • CSS3: Animations vs. Transitions
  • css3 动画疑难杂症
  • High Performance Animations
  • css triggers

动画库

  • animate.css
  • effeckt
  • hover.css
  • animatable
  • css3 magic animation

响应式

响应式主要包括断点的设置,及各种断点情况下样式的改变

  • MDN CSS媒体查询
  • 下手响应式及断点设置分析
  • 响应式图片处理
  • Media Queries: Width vs. Device Width
  • media queries resource
  • 案例参考

如果需要ie8-也支持相应式,得引入js库兼容,如 respond.js (不建议ie8去做响应式)

重排与重绘

  • 网页性能管理详解
  • 10 Ways to Minimize Reflows and Improve Performance

class命名

  • 如何命名class
  • BEM
  • CCSS
  • ACSS
  • SMACSS
  • An Introduction To Object Oriented CSS (OOCSS)

注:该系列将会汇总在github上的 重构优秀教程合集

人气教程排行