且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

必须掌握的前端开发基础知识,什么是字体图标?

更新时间:2022-08-19 16:51:51

  必须掌握的前端开发基础知识,什么是字体图标?

  显示隐藏元素

  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 禁止