必须掌握的前端开发基础知识，什么是字体图标?
zhezhongyun 2025-05-22 14:57 6 浏览
必须掌握的前端开发基础知识,什么是字体图标?
显示隐藏元素
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>□</span>
④span{ font-family : "icomoom"} (指定字体)
用iconfont时
1.第一步直接拷贝iconfont文件到根目录
2.link 外部引入css
3.<span class="iconfont"> #x26f3; </span> (用类名字体样式复制过来)
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 禁止
相关推荐
- 办公小技巧:杜绝意外 让字体永不丢失
-
当精心编辑的文档，在其它电脑上打开时，最常见的问题就是页数增加了，表格被撑破了，有些严重的甚至会出现乱码……为什么会这样呢？究其根源都是因为缺少相应的字体。本文介绍各类文档中（包括Word文档、PPT...
- 网站速度优化:从10秒到2秒的极致性能提升方案
-
核心内容：性能诊断工具：PageSpeedInsights与Lighthouse的评分差异解读。WebPageTest多地区、多设备性能对比。前端优化：CSS/JS压缩与合并的自动化方案（如Webp...
- 如何在WordPress中删除谷歌字体(2种简单方法)
-
许多WordPress主题都会用Google字体，然而，Google字体并不存储在网站本地，它是一个第三方资源，这会影响网站的加载速度，让网站变慢，尤其当你的网站面向的是国内用户时，更需要禁用Goog...
- 2019年免费可商用字体大全(附打包下载)
-
私信“字体”可免费获得。附送一个几十G的，有商业授权要求的字体包！不说那么复杂了，简单讲，可能你下载的大多数字体都是收费的。比如方正、文鼎、汉仪等的90%以上需要商业授权，甚至个人授权。这儿的授权，指...
- 开源免费、美观实用的后台管理系统模版，简单轻量、开箱即用!
-
项目介绍ArtDesignPro是一款开源免费（基于MITlicense开源协议）、美观实用的后台管理系统模版，专注于用户体验和快速开发的开源后台管理解决方案。基于ElementPlus设计...
- 【推荐】一款开源免费、美观实用的后台管理系统模版
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍ArtDesignPro是一款开源免费（基于MITlicense开源协议）、美观实用的后台管理系统模...
- 想要字体图标设计师却给了SVG?没关系，自己转
-
本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。Varlet提供了一些常用的图标，图标都来自Mater...
- 零基础教你学前端——66、CSS谷歌字体和Icon图标
-
我们学习CSS谷歌字体和CSSIcon图标。我们在应用font-family属性声明样式字体时，除了使用HTML中的标准字体外，还可以使用谷歌字体。谷歌字体是免费使用的，并且有1000多种字体...
- 必须掌握的前端开发基础知识，什么是字体图标?
-
必须掌握的前端开发基础知识,什么是字体图标?显示隐藏元素display显示隐藏none隐藏block显示隐藏后不再占有原来的位置visibility隐藏元素后,继续占有原来的位置visible元...
- 让你的网站速度提升10倍!(四):压缩~~~
-
在前面的内容中讲了如何降低页面大小（给页面瘦身）,重点讲的是如何优化图片，而没有讲文本内容如何优化，这是因为与其辛苦的优化文本还不如使用我们的秘密武器：Gzip压缩！如果你还不清楚Gzip是什么，看这...
- MFC转QT - Qt界面开发 - 常用控件
-
基础控件(QPushButton,QLabel,QLineEdit等)按钮控件族Qt提供了丰富的按钮控件，比MFC的按钮控件更加细分和功能丰富。QPushButton（标准按钮）//创建按钮...
- 使用CSS实现苹果官网文字渐入效果
-
效果分析文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度。我们可以想到渐变文字，然后通过改变背景的位置来控制文字的显示与隐藏。渐变文字渐变文字该如何实现呢？这是实现这个效果的关键...
- HarmonyOS NEXT - ArkUI: Text组件
-
Text组件用于在界面上展示一段文本信息，可以包含子组件Span。文本样式包含文本元素的组件，例如Text、Span、Button、TextInput等，都可以使用文本样式。文本样式的属性如下表：.f...
- 计算机网络的 166 个核心概念，你知道吗?
-
上回我整理了一下计算机网络中所有的关键概念，很多小伙伴觉得很有帮助，但是有一个需要优化的点就是这些概念不知道出自哪里，所以理解起来像是在云里穿梭，一会儿在聊应用层的概念，一会儿又跑到网络层协议了。针对...
- 软网推荐:请个多功能纯文本管理助手
-
纯文本不单是指常用的语言文字，还包括各种类型的程序代码、编码等。作为常用的纯文本处理工具，“记事本”显得力不从心。我们可用一款免费软件AlternateTextbrowser，随心所欲地管理各种类型...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)