必须掌握的前端开发基础知识,什么是字体图标?
显示隐藏元素
display显示隐藏
none 隐藏
block 显示
隐藏后不再占有原来的位置
visibility
隐藏元素后,继续占有原来的位置
visible 元素可见
hidden 元素隐藏
overflow
hidden 溢出隐藏
scroll 溢出的部分显示滚动条, (不溢出也隐藏)
auto 在需要的时候添加滚动条(溢出的时候才显示,不溢出不显示)
如果有定位的盒子慎用隐藏hidden,因为它会隐藏多余的部分,故意漏出的就不用.
透明: opacity:0 1不透明
精灵图(sprites 也叫雪碧图)
为了有效减少服务器接收和发送次数,提高页面的加载速度
background-position
y往上 x 往左 是负值 一般是负值或者是0
主要针对背景图使用
字体图标
结构样式较简单的小图标用字体图标,可以改颜色放大不失帧,可以旋转做阴影
①把下载包里面的fonts(字体文件夹) 文件夹放入页面根目录下
② 字体文字引入(字体声明)@font-开始.....font-dispay -block结束 注意路径问题
③ 打开素材复制"□"□
④span{ font-family : "icomoom"} (指定字体)
用iconfont时
1.第一步直接拷贝iconfont文件到根目录
2.link 外部引入css
3. #x26f3; (用类名字体样式复制过来)
Unicode 用的是内容
Font class 类名 (用这个时要提升权重的话用并集)
复制声明过来需要改变前面的路径
字体图标追加: selection.son 重新上传
css 三角的做法:
width:0
height:0 (没有高宽)
border:50px solid transprent ;
border -left -color :red
正方形把需要的两条边留下,再把不用的边透明掉, 如果想要三角形变长就把一边变短
用户界面样式:
鼠标样式:cursor
default 小白默认
pointer 小手
move 移动
text 文本
not-allowed 禁止