【鸿蒙开发从0到1 day05】

一. 清除浮动

1.当外面的大盒子,仅仅只设置了宽度,里面的子盒子为了行排序,
设置了浮动,以至于小盒子脱标,大盒子的高度为0,这个时候就会导致大盒子下面的盒子会跑上去
解决办法方法一:给父盒子添加overflow:hidden,这个就是如果子盒子有溢出,,溢出部分会隐藏方法二:在子盒子的最后面添加一个块级标签,然后给这个块级标签设置一个清除浮动,clear:both;方法三:给父盒子添加一个伪类选择器

二.字体图标

我们开发过程中会使用到各种小图标,除了可以用精灵图之外,我们可以用字体图标,精灵图它图片放大会有失真

阿里字体图标链接

注册-登陆-素材库-加入购物车-下载至项目-引入`iconfont.css
在这里插入图片描述
在这里插入图片描述
运行结果:
在这里插入图片描述

三.平面转换transform

作用:为元素添加动态效果,一般与过渡transition配合使用

概念:改变盒子在平面内的形态(位移、旋转、缩放.倾斜)

1.平移

属性transform:translate(x轴距离,y轴距离)
取值:
像素单位数值
百分比(参照盒子本身尺寸计算结果)
正负均可
技巧:
1.translate()只写一个值,表示沿着×轴移动
2.单独设置×或Y轴移动距离:translateX()或 translateY()
在这里插入图片描述
运行结果:
向右边偏移100px
在这里插入图片描述

2.盒子垂直水平居中

在这里插入图片描述
运行结果:
在这里插入图片描述

四.双开门案例-transition和transform

在这里插入图片描述

五.平面转换-旋转

transfrom:rotate(角度deg)
可以让图片添加旋转效果
在这里插入图片描述

六.多重转换

ps 旋转方向必须放在位移的后面,因为放在
前面,位移过程中就会改变位移的方位,导致轮子跑出来
在这里插入图片描述
运行结果:
在这里插入图片描述

七.平面转换-缩放

属性:
transform: scale(缩放倍数);
transformm: scale(X轴缩放倍数,Y轴缩放倍数);
技巧
通常,只为 scalel设置一个值,表示×轴和y轴等比例缩放取值大于1			表示放大,取值小于1表示缩小

在这里插入图片描述
运行结果:
在这里插入图片描述

八.空间转换

空间︰是从坐标轴角度定义的X、Y和Z三条坐标轴构成了一个立体空间,Z轴位置与视线方向相同。
空间转换也叫3D转换
属性: transform

1.空间转换-平移

属性
transform: translate3d(x,y,z);
transform: translateX();
transform: translateY();
transform: translateZ();
·
取值〔正负均可)
像索单位数值
百分比(参照盒子自身尺寸计算结果)

提示
默认情况下,Z轴平移没有效果

在这里插入图片描述

2.视距

视距perspective
作用:指定了观察者与Z=0平面的距离,为元素添加透视效果
透视效果:近大远小、近实远虚
属性:(添加给父级。取值范围800-1200)
transform:translateZ();对空间转换的Z图的变化,如果数值为负数,图形变小,正数则变大
在这里插入图片描述

3.空间-旋转

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
在这里插入图片描述

4.立体呈现-transform-style

作用:设置元素的子无素是位于3D空间中还是平面中属性名: transform-style属性值:flat:子级处于平面中preserve-3d:子级处于3D空间

呈现立体图形步骤
1.父元素添加transform-style: preserve-3d;
2.子级定位
3.调整子盒子的位置〈位移或旋转)
●提示
空间内,转换元素都有自已独立的坐标轴,互不千扰
在这里插入图片描述

线性渐变

线性渐变
属性:
background-image: linear-gradient
渐变方向,
颜色1终点位置,
颜色2终点位置,;
取值
渐变方向:
可选to方位名词
角度度数

在这里插入图片描述
运行结果:
在这里插入图片描述

九.动画-animation

过渡:实现两个状态间的变化过程,必须结合hover使用动画:实现多个状态间的变化过程,动画过程可控(重复猫放、最终画面、是否暂停)步骤:1.定义动画

在这里插入图片描述
在这里插入图片描述

	2.使用动画animation:动画名称,动画花费时长当from的值和初始的值一致的时候,from的值可以省略

在这里插入图片描述

在这里插入图片描述

运行结果:
在这里插入图片描述

2.逐帧动画

精灵动画制作步骤
1.准备显示区域盒子尺寸与一张精灵小图尺寸相同3
2.定义动画移动背景图〔移动距离=精灵图宽度)
3.使用动画steps(N),N与精灵小图个数相同

在这里插入图片描述
运行结果
在这里插入图片描述

十.总结

本章主要是学了清除浮动的一些常用方法,还分享了一个开发过程中会用到的一个字体图标,以及它的获取方式平面和空间的转换,线性渐变,css动画

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/415860.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux【2】文件目录-ls进阶

目录 ls 组合使用:ls -lha​编辑 ls 通配符 ls .是隐藏文件 ls -a可以显示所有文件包括隐藏文件 ls- l列表形式,详细信息 ls -l -h 大小更详细 组合使用:ls -lha ls 通配符 *任意长度 ?一个字符 带扩展名 可选from…

计算机网络-VRRP切换与回切过程

前面我们学习了VRRP选举机制,根据VRRP优先级与IP地址确定主设备与备份设备,这里继续进行主备切换与主备回切以及VRRP抢占模式的学习。 一、VRRP主备切换 主备选举时根据优先级选择主设备,状态切换为Master状态,那当什么时候会切换…

HTTPS 协议“加密和解密”详细介绍

目录 一、加密 二、HTTPS的工作过程 2.1 引入对称加密 2.2 引入非对称加密 2.3 中间人攻击 2.4 引入证书 2.5 理解数据签名 2.6 通过证书解决中间人攻击 三、总结 HTTPS 是一个应用层协议,是在 HTTP 协议的基础上引入了一个加密层。 一、加密 加密就是把明文&#x…

Golang环境安装、配置详细

Windows下安装Go开发环境 点我下载 Windows配置Go环境变量 出现工具install失败时,切换其它代理 # 1. 七牛 CDN go env -w GOPROXYhttps://goproxy.cn,direct# 2. 阿里云 go env -w GOPROXYhttps://mirrors.aliyun.com/goproxy/,direct# 3. 官方 go env -w GOP…

【wsl2】从C盘迁移到G盘

参考大神 C盘的ubuntu22.04 非常大,高达30g 迁移后就只有几百M了: 右键有一个move没有敢尝试 迁移过程 Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved.Install the latest PowerShell for new features and improveme…

Xcode插件开发

Xcode插件开发 文章目录 Xcode插件开发一、插件开发流程创建插件Extension文件介绍文件说明 二、插件使用安装说明 一、插件开发流程 创建插件的过程并不复杂,只是官方教程,过于简单,所以这里补充下创建细节 创建插件 环境:Xco…

vue在生产环境和测试环境去掉 console 打印日志 只保留 “error“、 “warn“

vue在生产环境和测试环境去掉 console 打印日志 只保留 “error”、 “warn” 文章目录 vue在生产环境和测试环境去掉 console 打印日志 只保留 "error"、 "warn"一、安装插件二、babel.config.js配置 一、安装插件 npm install babel-plugin-transform-r…

C++11中的function和bind

目录 1.一个引例 2.function 什么是function? function模板原型 function的使用 使用示例代码 使用function解决引例中的问题 3.bind 什么是bind? 如何理解bind? bind的使用 4.function和bind总结 1.一个引例 看下面这一段代码…

仿华为车机UI--图标从Workspace拖动到Hotseat同时保留图标在原来位置

基于Android13 Launcher3,原生系统如果把图标从Workspace拖动到Hotseat里则Workspace就没有了,需求是执行拖拽动作后,图标同时保留在原位置。 实现效果如下: 实现思路: 1.如果在workspace中拖动,则保留原来“改变图标…

前端脚手架,自动创建远程仓库并推送

包含命令行选择和输入配置,远程仓库拉取模板,根据配置将代码注入模板框架的代码中,自动创建远程仓库,初始化git并提交至远程仓库,方便项目开发,简化流程。 目录结构 创建一个bin文件夹,添加ind…

云计算之存储

目录 一、产品介绍 1.1 对象存储oss 1.2 特点 二、产品技术背景 三、产品架构及功能 四、常见问题及排查思路 4.1 两个bucket目录文件如何快速复制? 4.2 oss里的目录如何删除? 4.3 能否统计oss一个目录的大小 4.4 异常诊断 - 上传下载速度慢 4…

CentOS 7安装Docker详细步骤-无坑-丝滑-顺畅

一,安装软件包 yum install -y yum-utils device-mapper-persistent-data lvm2二,更换yum源为阿里源: yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 三,查看docker版本&…

uniapp 自定义微信小程序 tabBar 导航栏

背景 做了一个校园招聘类小程序,使用 uniapp vue3 uview-plus pinia 构建,这个小程序要实现多角色登录,根据权限动态切换 tab 栏文字、图标。 使用pages.json中配置tabBar无法根据角色动态配置 tabBar,因此自定义tabBar&…

交换机自动化备份配置(H3C_无人值守)

介绍: 在日常运维过程中,需要定时备份设备的配置,在设备数量过于庞大的情况下,对我们的运维工作会造成极大地不便,通过python自动化能够完美解决人工手动保存设备配置的问题。而且自动化运维在未来也一定是大势所趋&a…

Spring框架——springweb(一篇包会)

目录 一、Springweb概述 1.SpringWeb特点 2.SpringWeb组件 3.SpringWeb运行流程 二、搭建Springweb 1.导入框架所需的包 2.配置 DispatcherServlet 3.开启SpringWeb注解 4.处理器类搭建 5.请求处理 (1)接收请求RequestMapping (2&…

2.1概率统计的世界

欢迎来到概率统计的世界!在量化交易中,概率统计是至关重要的工具。通过理解概率,我们可以用数学的方法来描述市场行为,预测未来走势,并制定交易策略。让我们一起从基础概念开始,逐步深入,揭开概…

vmware中克隆过来的linux节点无system eth0

问题现象 使用vmware虚拟机的克隆功能后,找不到system eth0 解决办法 编辑/etc/udev/rules.d/70-persistent-net.rules文件 可以看到,eth0,是克隆前机器的网卡,eth1是克隆后机器生成的网卡,所以把NAME"eth0&q…

Windows安装docker,启动ollama运行open-webui使用AIGC大模型写周杰伦歌词

Windows安装docker,启动ollama运行open-webui使用AIGC大模型写周杰伦歌词 1、下载docker的Windows版本。 docker下载地址: https://docs.docker.com/desktop/install/windows-install/https://docs.docker.com/desktop/install/windows-install/ 2、设…

(十五)SpringCloudAlibaba-Sentinel持久化到Nacos

前言 在前面我们已经将Sentinel配置的规则持久化到系统的文件中。本章节我们将Sentinel持久化到Nacos中; 传送门(Sentinel数据持久化到文件)https://blog.csdn.net/weixin_45876411/article/details/140742963 默认情况下 Sentinel 只能接收到 Nacos 推送的消息,但…

24并发设计模式——线程池模式

一、线程池模式介绍 线程池模式(Thread Pool Pattern)是一种并发设计模式,用于管理和循环使用线程资源以处理大量任务。它旨在提高系统性能和资源利用率,特别是在需要频繁创建和销毁线程的环境中。 1、线程池模式结构图 线程池管…