【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧

简介: 定位、CSS精灵与一些其他CSS高级技巧

1.定位

定位
作用:灵活的改变盒子在网页中的位置

实现:
1.定位模式:position
2.边偏移∶设置盒子的位置

  • left
  • right
  • top
  • bottom

1.1相对定位

相对于原先位置的定位

相对定位
position: relative

特点
:one:改变位置的参照物是自己原来的位置
:two:不脱标,占位
:three:标签显示模式特点不变

1.2 绝对定位

子集使用绝对定位,父级使用相对定位
子集悬浮在父亲的内容.用绝对定位,固定的显示

position: absolute
使用场景:子级绝对定位,父级相对定位(子绝父相)

特点
:one:脱标,不占位
:two:参照物:先找最近的已经定位的祖先元素;如果所有祖先元素都没有定位,参照浏览器可视区改位置
:three:显示模式特点改变:宽高生效(具备了行内块的特点)

1.3定位居中

实现步骤:
1.绝对定位
2.水平、垂直边偏移为50%

3.子级向左、上移动自身尺寸的一半

  • 左、上的外边距为-尺寸的一半
  • transform: translate(-50%, -50%)

1.4 固定定位

元素的位置在网页滚动时不会改变

position: fixed

特点
:one:脱标,不占位
:two:参照物:参照物:浏览器窗口
:three:显示模式特点具备行内块特点

1.5 堆叠层级z-index

图片之间有重叠的部分,z-index能决定哪张图片在上面能压住哪张图片

默认效果:按照标签书写顺序,后来者居上
作用:设置定位元素的层级顺序,改变定位元素的显示顺序

z-index: 1
取值是整数,默认是e,取值越大显示顺序越靠上;

2.CSS精灵

CSS精灵,也叫CSS Sprites,是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中,再background-position精确的定位出背景图片的位置。

优点:减少服务器被请求次数,减轻服务器的压力,提高页面加载速度

实现步骤:
1.创建盒子,盒子尺寸与小图尺寸相同
2.设置盒子背景图为精灵图

3.添加background-position 属性,改变背景图位置

  • 使用 Pxcook测量小圈片左上角坐标
  • 取负数坐标为background-position属性值(向左上移动图片位置)

代码举例

<style>div {
    
width: 112px;
height: 110px;
background-color:pink;
background-image: uri(./images/abcd.jpg);
background-position: -256px -276px;
}
</style>

3. 字体图标

字体图标:展示的是图标,本质是字体
作用:在网页中添加简单的颜色单一小图标
优点

  • 灵活性:灵活地修改样式,例如:尺寸、颜色等
  • 轻量级:体积小、渲染快、降低服务器请求次数
  • 兼容性:几乎兼容所有主流浏览器
  • 使用方便:先下载再使用

3.1 字体图标-下载字体

  • iconfont图标库: https://www.iconfont.cn/
  • 下载字体
    登录→素材库→官方图标库→进入图标库→选图标,加入购物车→购物车,添加至项目,确定→下载至本地

3.2 使用步骤

:one:引入字体样式表(iconfont.css)

link上字体样式表

:two:标签使用字体图标类名

<span class="iconfont icon-xxx"></span>

代码样例

<link rel="stylesheet" href="./iconfont/iconfont.css">

<span class="iconfont icon-icon-test3"></span>

注意:


类名在下载文件中的index.html文件中找到

能用.iconfont找到并修改图标大小,但是不能用上面如span标签修改,因为iconfont有默认的font-size

4.CSS部分高级技巧

4.1 过渡 transiton

作用:可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名: transition(复合属性)
属性值:过渡的属性花费时间(s)

提示:

  • 过渡的属性可以是具体的CSS属性
  • 也可以为all (两个状态属性值不同的所有属性,都产生过渡效果)
  • transition设置给元素本身
img {
width: 200px;height: 208px;
transition: all 1s;
}

img:hover{width: 500px;height: 500px;}

4.2 透明度opacity

作用:设置整个元素的透明度(包含背景和内容)
属性名: opacity
属性值:0-1

  • 0:完全透明(元素不可见).
  • 1:不透明
  • 0-1之间小数:半透明

4.3 光标类型cursor

属性名: cursor
属性值
image.png

补充知识点 垂直对齐方式vertical-align

属性名: vertical-align

属性值
image.png

相关文章
|
1月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
312 2
|
22天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
37 3
|
12天前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
17 3
|
19天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
17天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
17天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
27 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
23天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
24 3
|
23天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
36 2
|
1月前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
前端大模型入门(三):编码(Tokenizer)和嵌入(Embedding)解析 - llm的输入
本文介绍了大规模语言模型(LLM)中的两个核心概念:Tokenizer和Embedding。Tokenizer将文本转换为模型可处理的数字ID,而Embedding则将这些ID转化为能捕捉语义关系的稠密向量。文章通过具体示例和代码展示了两者的实现方法,帮助读者理解其基本原理和应用场景。
235 1
下一篇
无影云桌面