【鸿蒙开发从0到1-day03】

2024-09-01 02:04
文章标签 开发 鸿蒙 day03

本文主要是介绍【鸿蒙开发从0到1-day03】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

css进阶

  • 一.结构伪类选择器
  • 二.伪元素选择器
  • 三.PxCook
  • 四.盒子模型
  • 五.清除默认样式
  • 六.盒子模型-元素溢出
  • 七.外边距问题-合并现象
  • 八.行内元素-内外边距的问题
  • 九.盒子模型-圆角
  • 十.盒子的过渡属性
  • 十一.盒子模型 - 阴影
  • 十二.透明度
  • 十三.总结

一.结构伪类选择器

选择器                                     说明
E:first-child                      查找第一个E元素
E:last-child						查找最后一个E元素
E:nth-child(N)					查找第n个E元素(第一个元素N的值为1)

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

ps:想要设置段落1样式,不能通过.box p:first-child{}
div E:first-child{}代表的是即是div中的E孩子并且
E孩子必须是div中的第一个孩子,div E:lastchild也是如此E:nth-child(公式)根据元素的结构关系查找多个元素功能															公式偶数标签										2n奇数标签										2n-1,2n+1找到五的倍数的标签								5n找到5个以后的标签(包含5)							n+5找到五个以前的标签(包含5)						-n+5

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

二.伪元素选择器

作用: 创建虚拟元素(伪元素),用来摆放装饰性的内容

选择器 说明
E::before 在E元素里面最前面添加一个伪元素
E::after 在E元素里面最后面添加一个伪元素

ps:必须设置content:属性,用来设置伪元素的内容,如果没有内容,则引号留空即可
伪元素默认行内显示模式
权重和标签选择器相同

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

三.PxCook

是一款切图设计的工具软件,支持psd文件的文字,颜色,距离自动智能识别
开发面板(自动智能识别)
设计面板(手动测量尺寸和颜色)
点击设计模块,通过左边窗格中的工具进行测量
空格键+鼠标 =  拖拽
删除: 选中+delete

四.盒子模型

作用:布局网页,摆放盒子的内容
内容区域--width&height
内边距---padding(内容和盒子边缘之间)
边框线--border
外边距--margin(出现在盒子外边)

border(快捷键bd)属性值 : 三个属性值不区分顺序
边框线粗细 数字+px
线条样式 solid dashed虚线 dotted点线
颜色 color
也可以单方向设置边框border-left/top/right/bottom
在这里插入图片描述
运行效果:
在这里插入图片描述

	padding内边距:设置内容与盒子边缘之间的间距
属性名padding /padding-方位名词ps内边距会撑大盒子从而改变盒子的大小如果padding只有一个取值,那么他就是四周都是这个内边距
也可以通过padding-方位名词可以只对一个方向进行内边距设置如果padding有多个值,那么就是从上开始顺时针赋值,如果当前方向没有值,就是与其对面的值保持一致

在这里插入图片描述
运行结果:
绿色区域就是内边距
在这里插入图片描述

外边距(margin):设置盒子与盒子之间的距离
也可以使用margin-方位对每个方位设置不同的外边距

在这里插入图片描述
运行结果:
上外边距20px
左外边距20px:
在这里插入图片描述

盒子水平居中:margin: 0px  auto;前提条件:1盒子必须具有具体的长宽尺寸2.元素必须是块级元素

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

五.清除默认样式

比如默认的内外边距,标题标签,a标签,ul,li,p,em/i

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

六.盒子模型-元素溢出

overflow:hidden:溢出隐藏scroll:无论是否溢出都会有滚轮auto:只有溢出了才会有滚轮

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

七.外边距问题-合并现象

margin合并问题:
场景:垂直排列的兄弟元素,上下margin会合并
现象:取两个margin最大的值生效
在这里插入图片描述
上面那个div的外边距20px而下面的div外边距30px,垂直合并,之间的间距只会保留更大的30px

运行结果

塌陷问题:
塌陷的原因: 两个相互嵌套的盒子,给内部的盒子
设置外边距,会把父元素拉下来

解决办法:
1.取消子子级得margin给父元素加padding进行设置(给父元素设置box-sizing)
2.给父元素加哦overflow:hidden
在这里插入图片描述
运行结果:
在这里插入图片描述

八.行内元素-内外边距的问题

行内元素

      场景:行内元素添加margin和padding,无法改变元素垂直位置水平方向是会生效的

解决办法:

	给行内元素添加 line-height,可以改变垂直位置

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

九.盒子模型-圆角

作用:设置元素外边框的圆角
boder-radius:属性值
属性值:数字+px / 百分比
ps:属性值指定的是圆角半径

运行结果:
在这里插入图片描述
设置一个圆形:
1.形状要求是一个正方形,圆角属性值设置为长宽的一半,或者50%
设置一个胶囊形
1…形状要求是一个长方形
2.border-radius值设置为高度的一半
在这里插入图片描述
运行结果:
在这里插入图片描述

十.盒子的过渡属性

transition:就是使得某个操作能够有延迟效果,一般配合hover使用
第一个属性all 全部属性
第二个值代表过渡的时间,单位是s
在这里插入图片描述
运行结果:
在这里插入图片描述

十一.盒子模型 - 阴影

属性名 box-shadow

十二.透明度

属性名 opacity
设置整个元的透明度(包含背景和内容)
rgba中的a只能设置背景的透明度而对内容无效
0完全透明 1不透明
0-1之间的小数是半透明状态

十三.总结

本章主要学习盒子模型的一些操作,内外边距,绘制圆形,胶囊形状的盒子,盒子模型的一些塌陷问题,margin的合并问题,以及详细的解决这些问题的方法

这篇关于【鸿蒙开发从0到1-day03】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1125637

相关文章

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上,除了众多新品的发布,还有一个消息也点燃了所有鸿蒙用户的期待,那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上,华为宣布鸿蒙 HarmonyOS 5.1 将于 7

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件

基于Python开发一个有趣的工作时长计算器

《基于Python开发一个有趣的工作时长计算器》随着远程办公和弹性工作制的兴起,个人及团队对于工作时长的准确统计需求日益增长,本文将使用Python和PyQt5打造一个工作时长计算器,感兴趣的小伙伴可... 目录概述功能介绍界面展示php软件使用步骤说明代码详解1.窗口初始化与布局2.工作时长计算核心逻辑3

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1

如何基于Python开发一个微信自动化工具

《如何基于Python开发一个微信自动化工具》在当今数字化办公场景中,自动化工具已成为提升工作效率的利器,本文将深入剖析一个基于Python的微信自动化工具开发全过程,有需要的小伙伴可以了解下... 目录概述功能全景1. 核心功能模块2. 特色功能效果展示1. 主界面概览2. 定时任务配置3. 操作日志演示