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

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

七、 常见布局技巧

相关推荐
Htr_3 分钟前
Anysite.io 使用指南:把整个 Web 变成 AI 智能体的数据库
前端·数据库·人工智能
知兀6 分钟前
【前端】受控和非受控组件
前端·javascript·react
玉宇夕落7 分钟前
别再把 SSE 当普通流式了!从 EventSource 到 LangChain,一次讲透实时推送与流式输出
前端
CappuccinoRose9 分钟前
专项事件体系
前端·学习·网络状态·表单事件·剪贴板事件·拖放事件·页面可见性
李剑一14 分钟前
各位产品经理求你们优化一下吧,暗黑模式最大的BUG!文中附解决方案
前端
huali36 分钟前
vue-split-screen:让 Vue Router 的导航轨迹变成两个页面
前端·javascript·vue.js
bug总结1 小时前
uniapp总结
开发语言·前端·javascript
云运维笔记1 小时前
华为VRP系统文件管理全攻略
前端·华为
走到天涯海角1 小时前
pinia和Vuex的区别以及使用pinia
开发语言·前端·javascript
电梯界知识分子1 小时前
江西抚州临川九尊府五层别墅:受限楼梯间里,全黑铝合金观光井道配曳引龙门架的落地记录
大数据·前端·网络·算法·家用电梯