CSS高级技巧

1、CSS精灵技术

sprite 减少请求次数

合成一张大图片(精灵图,雪剪图)
处理网页背景图像的方式

2、字体图标

iconfont UI.svg(UI提供) 可以无限放大

1)上传字体包
国外:http://icomoon.io
阿里:http://www.iconfont.cn/
2)告诉别人我们生成的文字图标
@font-face{} 声明字体,电脑里没有
3)使用引用
font-family:"iconmoon" 自定义
html 找 复制
标签::before{content:"\eqq0"}
4)追加新图标
导入.json 重新下载

3、滑动门技术

背景自由拉伸适应文字多少

用到CSS精灵.padding 撑开





  • span 不给宽度 用padding

    4、其他一些小技巧

    鼠标样式 style = "cursor: default ""

    • default 小白
    • poniter 小手
    • move 移动
    • text 文本

    取消轮廓线 outline:0
    防止拖拽文本 resize:none
    垂直对齐 vertical:align
    去除图片底侧有空隙 display:block vertical-align:top/middle
    溢出文字隐藏 word-break 自动换行

    你可能感兴趣的:(CSS高级技巧)