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

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

七、 常见布局技巧

相关推荐
siroi1 分钟前
【nginx】NJS 的简单实践
前端
饮水机战神3 分钟前
震惊!多核性能反降11%?node接口压力测试出乎意料!
前端·node.js
一只叁木Meow4 分钟前
JavaScript数学库深度对比
前端
顾辰逸you5 分钟前
uniapp--咸虾米壁纸项目(一)
前端·微信小程序
方方洛20 分钟前
电子书阅读器:epub电子书文件的解析
前端·产品·电子书
idaibin21 分钟前
Rustzen Admin 前端简单权限系统设计与实现
前端·react.js
GISer_Jinger27 分钟前
Trae Solo模式生成一个旅行足迹App
前端·javascript
zhangbao90s28 分钟前
Intl API:浏览器原生国际化API入门指南
前端·javascript·html
艾小码30 分钟前
构建现代前端工程:Webpack/Vite/Rollup配置解析与最佳实践
前端·webpack·node.js
跟橙姐学代码35 分钟前
Python 集合:人生中最简单的真理,只有一次
前端·python·ipython