【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识(一)

简介: 本期主要介绍CSS样式表进阶之图像的灵活使用与拓展知识

1. 图像的灵活使用(拓展)


1.1 引言


网页上我们经常能够看到大量图标图片使用

image.png

若每张图片都单独进行一次传输,效率会很低。

好比:我们去超市买水果,若买一个带回家一个,那么效率很低,不如买完一次性打包带回家更方便。

image.png

这个网页数据传输道理相同,所以我们的选择是将当前页面所需要的图标图片一次性打包传输,方便使用。

所以,为了提高页面加载效率,这里我们就需要学习 CSS 的精灵图和字体图标。

1.2 精灵图


1.2.1 概念


image.png

1.2.2 步骤解析


1、在精灵图上,找到要使用的图片,测量其宽高

image.png

2、以 div 为例,为其设置和图片相同的宽高(加边框仅为了方便演示)

image.png

3、通过背景图片引入,不能重复

image.png

4、因为现在显示的背景图默认为左上角,我们要通过 background-position 来调节。

image.png

5、从图片左上角 测量 距离目标图像左上角的距离(注意,不要覆盖了目标图像

image.png

6、通过测量得知,目标图像左上角坐标:x=275,y=200

设置时,全部更改为负数即可实现

image.png

1.2.3 总结


精灵图通过背景图片、背景位置结合使用,可以提高页面加载的效率,在后期页面美化中使用较为频繁。

1.3 字体图标


1.3.1 引言&概念


精灵图虽然可以提高页面加载效率,但是精灵图同样也存在问题:

1 、 图片放大失真

2 、 图片过大,加载速度过慢,导致网页在加载初期看不到任何图像

3 、 如果想为精灵图添加或者减少图标,要对整体修改,加大了精灵图修改难度

所以,为了弥补精灵图的不足之处,我们还需要学习字体图标,来和精灵图结合使用。

字体图标:引入第三方特殊字体,以特殊字体显示为图片图标。

image.png

注:因为在计算机中,字体的本质就是图片,所以又称为图标字体。

优点:

1 、轻量级:字体加载速度极快。

2 、灵活:可以为字体加入颜色、大小、阴影等字体样式

3 、兼容性:支持几乎所有浏览器

4 、效率高:减少了数据传输次数

1.3.2 项目准备


可以使用老师提供的资源,也可以进行如下自由下载

1、登陆 阿里字体图标库,搜索你需要的字体:http://www.iconfont.cn

image.png

2 、例如搜索:“Java 

image.png

3、把需要的图标添加到购物车中

image.png

4、选择过各种图标后,点击购物车

image.png

5、点击“下载代码” 

image.png

6、下载完毕,所有代码都在 download.zip

image.png


相关文章
|
2月前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
3月前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
106 30
|
3月前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
46 5
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
84 5
|
3月前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
57 3
|
3月前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
3月前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
51 5
|
3月前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
364 4
|
3月前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
49 2
|
3月前
|
编解码 前端开发 开发者
前端开发的必修课:如何让你的网页在不同设备上完美呈现?
【10月更文挑战第30天】随着互联网的普及,用户访问网页的设备种类繁多。前端开发者需确保网页在不同设备上完美呈现。本文介绍了一些最佳实践,包括使用响应式设计、相对单位、灵活的图片和视频、测试与优化及考虑交互设计,帮助实现跨设备兼容。
94 2

热门文章

最新文章

  • 1
    DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
  • 2
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 3
    2025年前端局势分析,我该不该转行?
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    docker安装nginx,前端项目运行
  • 6
    《前端技术基础》第01章 HTML基础【合集】
  • 7
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 8
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈