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 属性应用

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

七、 常见布局技巧

相关推荐
Ariel_jhy几秒前
fetch和axios的区别
前端
不想说话的麋鹿4 分钟前
《NestJS 实战:RBAC 系统管理模块开发 (一)》
前端·node.js·全栈
前端小同学7 分钟前
【硬核开源mcp-chrome】一个chrome插件,能让任意chatbot接管你的chrome浏览器
前端·人工智能
Uyker17 分钟前
解读Qwin
前端
月忆3641 小时前
等待组(waitgroup)
前端·爬虫·python
令狐寻欢1 小时前
HTML中 的 meta 标签常用属性及其作用
前端·html
SynthWriter1 小时前
Trae 帮我生成了一个贪吃蛇的游戏,好玩儿
前端
用户21411832636021 小时前
dify案例分享-Dify+RSS 聚合 8 大平台实时热点,新闻获取效率飙升 300%
前端
百锦再1 小时前
Razor编程中@Html的方法使用大全
前端·html
啪叽1 小时前
JavaScript可选链操作符(?.)的实用指南
前端·javascript