必须掌握的前端开发基础知识，什么是字体图标?
zhezhongyun 2025-05-22 14:57 28 浏览
必须掌握的前端开发基础知识,什么是字体图标?
显示隐藏元素
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 禁止
相关推荐
- Flutter TextField 边框样式以及提示文本
-
题记——执剑天涯，从你的点滴积累开始，所及之处，必精益求精。1引言1.1情景一一个文本框默认情况下可编辑（允许输入文本的情况）获取焦点（正在输入文本）下，会有默认的一个下划线，这个下划线的颜...
- 让最懂产品的人成为销售员 亿家净水试水“微分销”
-
国内领先的净水设备服务供应商亿家净水开始试水“微分销”，借助第三方微分销平台——有赞建立的亿家净水微商城近日已经开通。根据规划，下一步将把公司300多名员工以及遍布全国的6000多名安装服务工程师纳入...
- 案例分享丨各品牌软水机和中央净水机的旁通阀介绍、区分辨认和使
-
案例：前几天接到一个浙江的客户反馈，他说凯优的软水机安装后加的盐，使用4、5年了一直没加过盐到现在盐还是那么多，客户以前以为加完盐后能管好长时间就没把软水机当回事，最近听朋友说软水机需要定期加盐客户...
- 一文教你Java字符串处理(String，StringBuffer，StringBuild)
-
前言本文篇幅较长，但都是满满的干货，请大家耐心观看，相信会有不小的收获。本人在总结的过程中也收获了很多的知识，也希望大家可以一起借鉴学习下，希望大家最后都能有所收获！再言字符串的分类在java.lan...
- 浏览器渲染引擎之从入门到优化实践
-
在当今互联网时代，浏览器扮演着人们访问网页和应用程序的主要工具。当我们在浏览网页的时候，页面的展示和交互都是依靠浏览器进行实现的。所以浏览器的表现和性能直接影响着用户的体验。为了提供快速且高效的浏览体...
- NAVI S1mple准星+视角+持枪控制台设置大全 新增显示器设置
-
简单男孩S1mple科斯特利耶夫（AleksandrKostyliev）生日1997年10月2日准星设置cl_crosshairalpha255;cl_crosshaircolor5;cl...
- 2014福布斯全球名人榜:女王碧昂斯登顶 李娜85
-
最近，有一篇名为《浙商炮轰马云：若不改作风，5年内必倒》的文章，在网络和自媒体上流传甚广，引起广泛关注。这篇文章是怎样出炉的？针对这个问题，《浙商》杂志记者进行了调查。2014福布斯全球名人榜前20人...
- 美国处女河中有一条步道，全程只有25公里
-
美国<:articlestyle="BOX-SIZING:border-box;BORDER-BOTTOM:0px;TEXT-ALIGN:left;BORDER-LEFT:0px...
- Unreal丨模块化路牌蓝图制作（路牌模型）
-
本期文章介绍使用虚幻蓝图制作一个模块化的路牌，先来看一下完成后的效果。如图，这些路牌全部是使用同一个蓝图制作的资产。1素材准备基础的路牌模型我使用的是虚幻商城中的资产“FreewayProps”。然...
- 神奇白Tee加减法，1+1>2（equal tee是什么管件）
-
来源：时尚芭莎说到炎炎夏日，除了空调、冰棍、西瓜、网络是缺一不可的以外，衣柜里怎么能少一件白Tee呢？2"style="text-decoration:none;outline:none;c...
- 跟着快联电路学习PCB设计的六个过程
-
PADS是一种常用的PCB设计软件，作为PCB设计工程师，必须掌握熟练应用的设计工具。与AD相比，PADS在开始和设计上相对复杂，需要更多的耐心和时间。在使用PADS设计PCB的过程中，需要关注印刷板...
- Allegro软件中怎么通过ROOM框来放置元器件呢?
-
上述我们讲解了怎么快速的将元器件放置在PCB板上，通过图6-40所示的图可以看出，器件放置的都是很零散的，不是按模块或者是按页放置的，这里给大家介绍一些，通过在原理图添加ROOM属性，然后通过ROOM...
- 电路设计入门-从DXP2004双闪灯电路设计开始
-
DXP2004！？为什么要用这么老的版本呢？因为DXP2004是最经典的版本！protel是最原始的版本，版本包括protelforDOS，protel98，protel99se；后面prte...
- 小幅改进 微软或启用Outlook Mail品牌
-
去年十月微软就对Outlook.com及相关网站进行了改版，改进了下拉菜单，使得用户能够在微软相关的服务，比如OneDrive以及OfficeOnline之间切换。不过现在看来，微软似乎准备再一次对...
- 将多个属性传递给 Vue 组件的几种方式
-
所有使用基于组件的体系结构(如Vue和React)的开发人员都知道，创建可重用组件是很困难的，而且大多数情况下，最终会通过传入大量的属性，以便从外部更容易地控制和自定义组件。这并不坏，但是传递大量属性...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- 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)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)