CSS高级技巧

一、 精灵图

1.1 为什么需要精灵图?

1.2 精灵图(sprites)的使用

二、 字体图标

2.1 字体图标的产生

2.2 字体图标的优点

2.3 字体图标的下载

icomoom字库 http://icomoon.io

阿里iconfont字库 http://www.iconfont.cn/

2.4 字体图标的引用

复制代码
/*字体声明*/ 
@font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

2.5 字体图标的追加

三、 CSS三角

四、 CSS用户界面样式

五、 vertical-align 属性应用

六、 溢出的文字省略号显示

七、 常见布局技巧

相关推荐
程序视点10 分钟前
已成绝版!8月5日即将下线!b站国际版
前端
遂心_12 分钟前
React初学者必备:用“状态管家”Reducer轻松管理复杂状态!
前端·javascript·react.js
老神在在00115 分钟前
SpringMVC2
java·前端·学习·spring·java-ee
老神在在00116 分钟前
SpringMVC3
java·前端·学习·spring·java-ee
李明卫杭州20 分钟前
前端实现多标签页通讯
前端·javascript
前端领航者20 分钟前
国际化LTR&RTL布局实战
前端·css
贝加尔湖Pan22 分钟前
图片预加载和懒加载
前端
在钱塘江25 分钟前
《你不知道的JavaScript-上卷》第二部分-this和对象原型-笔记-6-行为委托
前端·javascript
Point25 分钟前
[ahooks] useControllableValue源码阅读
前端·javascript
独立开阀者_FwtCoder33 分钟前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js