| 🔥CSS基础班笔记(二) | https://blog.csdn.net/Augenstern_QXL/article/details/115560502 |
| 🔥CSS基础班笔记(三) | https://blog.csdn.net/Augenstern_QXL/article/details/115726577 |
| 🔥CSS进阶班笔记(四) | https://blog.csdn.net/Augenstern_QXL/article/details/119172527 |
=======================================================================
================================================================================
-
为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术
-
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了
使用精灵图的核心:
-
精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中
-
这个大图片也称为 sprites 精灵图 或者 雪碧图
-
移动背景图片的位置,此时可以使用 background-position
-
移动的距离就是这个目标图片的x和y坐标,注意网页中的坐标有所不同(x轴右边走是正值,左边走是负值,y轴下边走是正值,上边走是负值)
-
一般情况下都是往上往左移动,所以数值是负值
-
使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。
精灵图的优点很多,但是缺点也很明显
-
图片文件还是比较大的
-
图片本身放大和缩小会失真
-
一旦图片制作完毕想要更换非常复杂
此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont
==================================================================================
字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标。展示的是图标,本质属于字体
优点:
-
轻量级:一个图标字体比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少了服务器的请求
-
灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影,透明效果,旋转等
-
兼容性:几乎支持所有的浏览器
步骤:
-
字体图标的下载
-
字体图标的引入(引入到我们html页面中)
-
字体图标的追加(以后添加新的小图标)
- icomoon字库
外网,不需要登录即可下载 http://icomoon.io
-
点击 IcoMoon App
-
选择需要的图标
-
点击
Generate Font
-
点击 下载
- 阿里iconfont字库
免费,但是需要登录 http://www.iconfont.cn/
我们以 icomoon 字库网为例,将下载包解压,解压之后的文件如图:
- 把下载包里面的 fonts 文件夹放入页面根目录下
- 在CSS样式中全局声明字体:简单理解把这些字体通过css引入到我们页面中
右键打开 style.css,这里我演示用notepad++打开,复制如图代码引入我们自己的CSS文件中
- html标签内添加小图标
我们打开解压文件中的 demo.html ,复制想要的图标,粘贴进我们的 <span></span>
标签中
- 给标签定义字体
/span使用字体图标/
span {
font-family: “icomoon”;
}
注意:标签中的 font-family
的值和我们之前引入字体图标的font-family
必须一样,这里均为 icomoon
- 完成,所以我们的整体代码为:
测试效果为:
-
如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。
-
以 icomoon字库 网为例,点击网站内
import icons
-
把压缩包里面的 selection.json 重新上传,然后选中自己想要新的图标,重新下载压缩包,并替换原来的文件即可。
不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器支持的字体文件。
.ttf 格式、.woff 格式、.eot 格式、.svg 格式,不同浏览器支持不同的格式
-
如果遇到一些结构和样式比较简单的小图标,就用字体图标
-
如果遇到一些结构和样式复杂一点的小图片,就用精灵图
==========================================================================
所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。
-
更改用户的鼠标样式
-
表单轮廓
-
防止表单域拖拽
鼠标样式cursor
- 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
li {
cursor: pointer;
}
| 属性值 | 描述 |
| — | — |
| default | 小白,默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
轮廓线outline
:
- 给表单添加
outline:0
; 或者outline: none
;样式后,就可以去掉默认的蓝色边框
input {
outline: none;
}
防止拖拽文本域resize
textarea {
resize: none;
}
====================================================================================
vertical-align
:
-
使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
-
官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效
vertical-align: baseline | top | middle | bottom
| 值 | 描述 |
| — | — |
| baseline | 默认,元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐(顶线对齐) |
| middle | 把此元素放置在父元素的中部(中线对齐) |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐(底线对齐) |
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。**
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-FCkNaHiD-1714845312990)]
[外链图片转存中…(img-2tBFtlVP-1714845312990)]
[外链图片转存中…(img-CDAG9jtj-1714845312990)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!