网络安全之前端学习(css终章)
如大家所见,今天的文章就是css的最后一篇文章。那么话不多说,我们开始吧。本章内容比较杂,就是补充之前几章没讲到的。
- 关系选择器
之前我们讲到了很多选择器,这里补充一个关系选择器。
1.1后代选择器
后代选择器,顾名思义,就是选择自己的后面的选择器,将要选择的和被选择的放在一起,再使用css,以下是一个样例。
在这里我们可以看见,不管中间隔了多少,只要是ul标签下的li标签,都会被选中。即使后面的li标签是属于ol的但是我们就是不讲理,就选中。
1.2子代选择器
基于上面一种情况,那如果我就要ul下的li标签变红怎么办?那就是用子代选择器>
这里很明显,只选择ul下的li标签,但是ol下的li标签却没有变红。
1.3相邻兄弟选择器
但是再实际引用中,我可能不要全部变红,只要一个变红,但是是同一个标签,怎么办,接下来讲讲相邻兄弟选择器,这个选择器可以选择和要选择的标签相邻的标签
很明显可以看到,nihao1变色,nihao2不变色。值得一提的是,相邻兄弟选择器只会往下寻找而不会往上寻找。
1.4通用兄弟选择器
这个就和上面的有所区别,和后代选择器有点像,选择所有兄弟,使用~
这张图可以明显看到,与p标签同级的h1标签都被选中,但是他不可以选择不同级的标签。
- 盒子模型
我们打开一个网页,按f12,选择计算样式,就会看到盒子模型,下图是一个哔哩哔哩视频的盒子模型。
Css盒子模型有主要四种属性,外边距(margin),边框(border),内边距(padding),实际内容(content)。
2.1内边距属性
Padding属性就是把你的框撑大,是你的内容更好展示。
两图对比发现,padding属性似乎把图撑大了,其实他就是填充周围,使其距离边框50px,就是这个作用。Padding可以写两个值,第一个值代表上下,第二个值代表左右。当然你也可以写一个,就表示距离周围。
但是如果四个方向都不一样要怎么办,可以使用padding不同方向,padding-right,padding-left,padding-top,padding-bottom四个值设置。
2.2border属性
Border边框属性可以对选中的内容制造边框。
第一个是实线的宽度大小,第二个是实线的样式(主要为solid,实线),第三个是线的颜色。当然你也可以分开写
但是可以一起写为什么要分开写呢。
2.3外边距属性
外边距完全透明,但是会间隔开与其他内容
两张图可以清晰的看出margin可以撑开大小,撑开距离。
- 弹性盒子模型
弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。
弹性容器通过设置display属性的值为flex将其定义为弹性容器。
弹性容器内包含一个或多个弹性子元素。
那么这个弹性盒子模型就是管理多个盒子的东西
3.1display属性
Display就是启动弹性容器的条件属性。使用display可以使用弹性盒子。
显而易见,display属性使得盒子横向摆放,因为这就是display的默认值。
3.2flex-direction属性
但是我也可以让他横向摆放。Flex-direction属性就可以改变横竖方向。他有四个值row(左对齐同时横向排列),row-reverse(反转横向排列),column(纵向排列),column-reverse(反转纵排列)。这里我就演示一个column其他的大家自行演示。
3.3justify-content属性
这个属性就是改变盒子的位置,值分别为flex-start(上),flex-end(下),flex-center(居中)
3.4align-items
改变盒子的位置,不过一个是上下,一个是左右。,值也是相同的,flex-end(右),flex-start(左),center(中)
3.5flex属性
(这是作用在子元素,切记。)
对于flex属性,可以设置占总体比例大小。可以在父级盒子发生变化时同时变化,不需要改变大小。
我没有改变盒子的大小,但是盒子法生变化,这是因为我设置了占比,使其发生变化。
- 浮动
浮动就是使用float属性定义浮动的方向,任何元素都可以浮动。浮动后使元素脱离文档流,但是浮动只有左右浮动,没有上下浮动。
元素浮动后,脱离文档流,你可以理解为变成两层,出现折叠现象
同时使用浮动可以去除图片的间距
比如这是没有使用float的,可以看到两张图片之间有空隙
使用float之后就没有这个困扰。
当多个div一起时,我们可以使用float使得他们横向摆放。
那么这个到底有什么作用呢
在我们的有序和无序标签,都是纵向摆放,那么我们可以使用float使其横向摆放。
当容器不足以容纳子级容器,那么只能放在第二排。
- 清除浮动
浮动其实是有副作用的,他会造成父级元素塌陷,后续元素也会受到影响。所以必要情况下,我们要清除浮动
5.1clear
使用clear可以直接清除浮动(运用于子级盒子)
这里很明显看到浮动被清除了。
5.2overflow
当遇到父级元素塌陷的情况,使用overflow和clear可以处理。(作用于父级)但是如果没有出现父级塌陷,那么是无法清除浮动的。
- 定位
6.1绝对定位
顾名思义,就是绝对的定位,同时是脱离文档流的,根据自己的定义的位置而变化。
6.2固定定位
固定定位就是把定位固定在一个地方,表面上似乎和绝对定位没什么区别,但是他会被固定在一个地方,不论你怎么滚动界面,固定定位会一直在那个地方。
这里无法给大家演示动画,那么大家一起去试一下,使用height属性把页面撑高,可以使页面滚动。
6.3相对定位
相对定位就是相对父级元素定位
可以看到,使用relative后会跟着父级元素一起移动。
- css3新特性
7.1border-radius
这个属性可以使得边框变得圆润
它可以设置为一个值,四个角相同,两个值,第一个为左上和右下,第二个为右上和左下,三个,不建议用,四个一个角一个,从上到下,从左到右。
7.2box-shadow
这个属性就是给容器添加阴影。
第一个值是左右,第二个值是上下,第三个是阴影长度,第四个是颜色。
- 动画
之前讲过图片标签img,那么这次来讲讲动画。动画就是从一个变化到第二个。
使用@keyframe的方式创建动画。
其中设置变化的位置,如果只有两个,使用from-to,也可以使用百分比的形式设置。
而在我们的容器中就比较讲究了
首先写入animation关键字,第二个就是名字,即keyframes后面的名字,然后是动画持续时间,就是几秒循环一次,下一个是效果,这里只推荐一个linear匀速。接下来是延时,没写默认是零。最后一个是播放方向,默认是正向。
这样就会实现动画这里不好演示,大家自己上机实验。
大家可以在这个基础上加入其他属性来玩玩,顺便练一下手。
- 结语
那么这一章就到这里结束了。其实因该还有几个内容没讲,但是我看似乎没有很重要(其实也是因为我懒),在最后先给大家道个歉,由于本人课程安排,关于前端的内容会断更一段时间,后续有时间会补上,实在是挤不出时间。
最后的最后,附上学习视频,本文学习自
【HTML+CSS+JS+Vue】比大学课程还详细的Web前端教程,整整180集,学完即可兼职就业!附学习文档PDF,随时都能学_前端开发_WEB入门_哔哩哔哩_bilibili
如要学习建议去看原视频。
相关文章:
网络安全之前端学习(css终章)
如大家所见,今天的文章就是css的最后一篇文章。那么话不多说,我们开始吧。本章内容比较杂,就是补充之前几章没讲到的。 关系选择器 之前我们讲到了很多选择器,这里补充一个关系选择器。 1.1后代选择器 后代选择器,…...
多线程代码案例 - 2
阻塞队列 阻塞队列,我们熟悉的概念是队列,即一种先进先出的数据结构。阻塞队列,就是基于普通队列做出的扩展。 特点 1. 线程安全的 2. 具有阻塞特性 (a)如果针对一个已经满了的队列进行入队列,此时入队操…...
Qt实现鼠标右键弹出弹窗退出
Qt鼠标右键弹出弹窗退出 1、鼠标右键实现1.1 重写鼠标点击事件1.2 添加头文件1.3 添加定义2、添加菜单2.1添加菜单头文件2.2创建菜单对象2.3 显示菜单 3、添加动作3.1添加动作资源文件3.2 添加头文件3.3 创建退出动作对象3.4菜单添加动作对象 4、在当前鼠标位置显示菜单4.1当前…...
AI绘画中的LoRa是什么?
Lora是一个多义词,根据不同的上下文可以指代多种事物。以下将详细介绍几种主要的含义: LoRa技术 LoRa(Long Range Radio)是一种低功耗广域网(LPWAN)无线通信技术,以其远距离、低功耗和低成本的特…...
LaTeX、KaTeX、Markdown 的用法
文章目录 1. LaTeX 用法概述1.1 LaTeX简介1.2 优点与应用场景2. LaTeX 基础语法2.1 文档结构2.2 文本格式化2.3 数学公式3. KaTeX 用法3.1 KaTeX简介3.2 基本使用方法3.2.1 引入KaTeX3.2.2 渲染数学公式3.2.3 自定义配置3.3 与LaTeX的兼容性4. Markdown 用法4.1 Markdown简介4.…...
Python 如何高效实现 PDF 内容差异对比
Python 如何高效实现 PDF 内容差异对比 1. 安装 PyMuPDF 库2. 获取 PDF 内容通过文件路径获取通过 URL 获取 3. 提取 PDF 每页信息4. 内容对比metadata 差异文本对比可视化对比 5. 提升对比效率通过哈希值快速判断页面是否相同早停机制多进程机制 6. 其他 最近有接触到 PDF 内容…...
JJJ:generic netlink例程分析
接嵌入式毕设、课设辅导、技术咨询,欢迎私信 完整代码:github代码仓链接 若想要和指定的generic netlink family通信,如: 994 static struct genl_family genl_ctrl __ro_after_init { // generic netlink子协议995 .module THIS_MODU…...
3D图像重建中Bundle Adjustment的推导与实现
介绍 捆集调整(Bundle Adjustment),也称为光束平差法,是一种利用来自多台相机的图像数据同时优化相机位置和姿态以及 3D 点位置的技术。该技术历史相当悠久,于 1958 年由 DC Brown1 首次提出。 最初这是美国空军正在进行的从航拍照片中恢复环境的研究,随着视觉SLAM和Sf…...
【代码模板】C语言如何修改文件权限?读写执行权限对应值是多少?(chmod(“./a.out“, 0741);bit 2 1 0表示 读 写 执行)
#include "stdio.h" #include "unistd.h"int main(int argc, char *argv[]) {if (chmod("./a.out", 0741) ! 0) {perror("Failed to set exec permission");return -1;}return 1; }0741中0是8进制,7是 0111, 4是…...
新版pycharm如何实现debug调试需要参数的python文件
在最顶上有这个选项 把鼠标移上去 点击号 选择python 具体长这样 名字随便取 script选择你要调试的python文件 脚本形参填入参数,如:--arg1 value1 --arg2 value2 点击应用确定 最后给文件打上断点,再点击调试按键,就可以调试了…...
赚钱模拟器-百宝库v0.1.1
#include<bits/stdc.h> #include<windows.h> using namespace std; int n,i,j; void welcome(); void zhuye(); void GAME(); int main(){welcome();zhuye();return 0; }void welcome(){cout<<"欢迎您使用更多资源-百宝库v0.1.1"<<endl;sys…...
实战打靶集锦-38-inclusiveness
文章目录 1. 主机发现2. 端口扫描&服务枚举3. 服务探查4.系统提权 靶机地址:https://download.vulnhub.com/inclusiveness/Inclusiveness.ova 1. 主机发现 目前只知道目标靶机在192.168.56.xx网段,通过如下的命令,看看这个网段上在线的主…...
01人工智能基础入门
一、AI应用场景和发展历程 1.1行业应用 1、deepdream图像生成、yolo目标检测 2、知识图谱、画风迁移 3、语音识别、计算机视觉 4、用户画像 5、百度人工智能布局 1.2发展历程 人工智能的发展经历了 3 个阶段: 1980年代是正式成形期,尚不具备影响力。 …...
SortedSet结构之用户积分实时榜单实战
Redis 中的SortedSet结构非常适合用于实现实时榜单的场景,它根据成员的分数自动进行排序,支持高效的添加、更新和查询操作。 SortedSet实时榜单的一些典型应用场景: 游戏中的玩家排行榜:在多人在线游戏中,使用 Sorte…...
C++_类和对象(上)
【本节目标】 面向过程和面向对象初步认识类的引入类的定义类的访问限定符及封装类的作用域.类的实例化类的对象大小的计算类成员函数的this指针 1. 面向过程和面向对象初步认识 C语言是面向过程的,关注的是过程,分析出求解问题的步骤,通过…...
vllm作为服务启动,无需额外编写sh文件,一步到位【Ubuntu】
看到网上有的vllm写法,需要额外建立一个.sh文件,还是不够简捷。这里提供一种直接编写service文件一步到位的写法: vi /etc/systemd/system/vllm.service [Unit] DescriptionvLLM Service Afternetwork.target[Service] Typesimple Userroot…...
Mathematics | Branch
注:本文为“遇见数学”翻译的 “数学分支概览” 两篇文章合辑。 数学世界的版图:主要分支概览(上) 原创 遇见数学 2025 年 04 月 03 日 12:02 河南 数学的分支(Areas of Mathematics) 在文艺复兴之前&am…...
8.5/Q1,Charls最新文章解读
文章题目:Associations of estimated glucose disposal rate with frailty progression: results from two prospective cohorts DOI:10.1186/s12933-025-02650-7 中文标题:估计葡萄糖处理率与虚弱进展的关系:两个前瞻性队列的结果…...
PCL学习(5)随机采样一致性算法RANSAC
一、RANSAC概念及作用 1.1 基本概念 RANSAC是一种鲁棒的参数估计方法,用于从包含大量异常值的数据中拟合数学模型。其核心思想是通过随机采样和迭代验证,找到最优的模型参数,避免异常值的干扰。 1.2 核心思想 随机采样:每次从数…...
app逆向专题一:如何下载app
app逆向专题一:如何下载app 一、打开豌豆荚官网 一、打开豌豆荚官网 打开豌豆荚官网豌豆荚,在右上角搜索框中输入要下载的app名称 依次点击搜索–查看–普通下载,即可将apk文件下载到本地电脑上。...
将 DataFrame 中某一列的列表拆分成多个独立的列的方式
要将 DataFrame 中某一列的列表拆分成多个独立的列,可以使用以下方法,具体取决于数据结构和需求: 场景示例 假设 DataFrame 中 genres 列存储的是列表(如 [drama, action]),目标是将每个列表元素拆分成多列…...
VUE+SPRINGBOOT+语音技术实现智能语音歌曲管理系统
语音控制歌曲的播放、暂停、增删改查 <template><div class"Music-container"><div style"margin: 10px 0"><!--检索部分--><el-input style"width: 200px;" placeholder"请输入歌曲名称"v-model"sen…...
安卓开发工程师-自定义 View
1. 如何创建一个简单的自定义 View? 创建自定义 View 的基本步骤如下: 继承 View 或其子类:自定义 View 可以继承自 View 或其他更具体的视图类(如 ImageView、Button 等)。重写构造方法:通常需要重写三个…...
Vue中权限控制的方案
文章目录 源码:一、页面级1.1、路由守卫1.2、动态路由 二、按钮级别2.1、通过v-if来判断2.2、通过组件包裹的方式来判断2.3、通过自定义指令的方式 三、接口级别 源码: https://gitee.com/liu-qiang-yyds/sysPermission 一、页面级 1.1、路由守卫 前端…...
磁盘分析工具合集:告别C盘焦虑!
今天李师傅带大家盘点五款硬盘空间分析利器,帮你精准定位那些"吃空间"的元凶,让C盘告别臃肿烦恼! 一、WizTree 这款NTFS磁盘的"透视眼"堪称效率典范。它通过直接读取硬盘主文件表(MFT)实现秒级扫描,1TB机械…...
硬件学习之器件篇-蜂鸣器
根据工作原理的不同,可以分为电磁式蜂鸣器和压电式蜂鸣器。 1、电磁式蜂鸣器 电磁式蜂鸣器根据内部是否有震荡源,又可以分为有源电磁式蜂鸣器和无源电磁式蜂鸣器。 1.1 外观区别 有源电磁式蜂鸣器从底部看是,是黑胶密封的。 无源电磁式蜂…...
紫檀博物馆一游与软件开发
今天去逛了中国紫檀博物馆,里边很多层展品,也有一些清代的古物,檀木,黄花梨木家具和各种摆件,馆主陈丽华女士也是发心复原、保留和弘扬中国的传统文化,和西游记唐僧扮演者迟成瑞先生一家。 每一件展品都精…...
Cribl 新建Datatype
Cribl 数据dataset 有个很重要的就是datatype, 下面来新建一下: 先看一下原来的datatype : 再点击Add Datatype: Rule...
开源 LLM 应用开发平台 Dify 全栈部署指南(Docker Compose 方案)
开源 LLM 应用开发平台 Dify 全栈部署指南(Docker Compose 方案) 一、部署环境要求与前置检查 1.1 硬件最低配置 组件要求CPU双核及以上内存4GB 及以上磁盘空间20GB 可用空间 1.2 系统兼容性验证 ✅ 官方支持系统: Ubuntu 20.04/22.04 L…...
医药档案区块链系统
1. 医生用户模块 目标用户:医护人员 核心功能: 检索档案:通过关键词或筛选条件快速定位患者健康档案。请求授权:向个人用户发起档案访问权限申请,需经对方确认。查看档案…...
Redis常见命令
(一)常见命令① 一、数据结构 二、通用命令 ①KEYS查询语句 pattern代表模板,有点像匹配表达式(不是正则),是redis的一种内置表达式,可以在里面使用通配符 底层存在一种模糊查询机制,效率并不高。当redis的数据量达到一定规模时(数百万上千万甚至更多),使用这种模糊查询机制会…...
Qt的window注册表读写以及删除
Qt的window注册表读写以及删除 1. 使用 QSettings(Qt推荐方式)基本操作关键点限制 2. 调用Windows原生API示例:创建/读取键值常用API注意事项 3. 高级场景(1) 递归删除键(2) 注册表权限修改 4. 安全性建议总结其他QT文章推荐 在Qt中操作Windo…...
纯css实现环形进度条
需要在中实现一个定制化的环形进度条,最终效果如图: 使用代码 <divclass"circular-progress":style"{--progress: nextProgress,--color: endSliderColor,--size: isFull ? 60rpx : 90rpx,}"><div class"inner-conte…...
20250405周赛-S
链接 A. 日历 我的: #include<bits/stdc.h> using namespace std; int n,d[105],ans; bool check(int x,int y){if(x<10){if(y<10){return xy;}else{return xy%10&&xy/10;}}else{if(y<10){return yx%10&&yx/10;}else{return y/10…...
某碰瓷国赛美赛,号称第三赛事的数模竞赛
首先我非常不能理解的就是怎么好意思自称第三赛事的呢?下面我们进行一个简单讨论,当然这里不对国赛和美赛进行讨论。首先我们来明确一点,比赛的含金量由什么来定?这个可能大家的评价指标可能不唯一,我通过DeepSeek选取…...
希象传屏下载
2025年4月5日,11~22℃ 免费软件,功能:手机、个人笔记本和智慧黑板可以双向控制。要求在同一网络下或者同一WiFi下。 目的:自己下载的时候比较方便。 1、希沃易官网 2、如何下载? 被投屏:接收端࿱…...
解决 PDF 难题:批量处理、文档清理与自由拆分合并
软件介绍 在日常办公与学习中,处理 PDF 文件常常让人头疼不已,不过别担心,今天有一款堪称神器的国产老牌 PDF 工具要分享给大家。它就是 PDF 补丁丁,凭借其强大功能,为大家排忧解难。 界面体验 初次打开 PDF 补丁丁&…...
SQL Server 2022 数据同步到 Elasticsearch 思考
公司的老项目了,采用的是sqlserver 2022作为数据卡做的,但是产品对接客户,发现对搜索的要求很高,尤其是全文检索,考虑到ES采用倒排所以效率上的优势和整体开发的成本,大佬们商量之后,果断的采用…...
基于Spark的哔哩哔哩舆情数据分析系统
【Spark】基于Spark的哔哩哔哩舆情数据分析系统 (完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 本项目基于Python和Django框架进行开发,为了便于广大用户针对舆情进行个性化分析处…...
分布式事务解决方案全解析:从经典模式到现代实践
前言 在分布式系统中,数据一致性是一个核心问题。随着微服务架构的普及,跨服务、跨数据库的操作变得越来越普遍,如何保证这些操作的原子性、一致性、隔离性和持久性(ACID)成为了一个极具挑战性的任务。本文将全面介绍…...
迈向未来:数字化工厂管理如何重塑生产力
迈向未来:数字化工厂管理如何重塑生产力 随着工业4.0的浪潮席卷全球,“数字化工厂管理”成为制造业转型的关键一步。从传统生产模式到数据驱动的智能制造,企业在追求生产效率、质量与灵活性方面实现了飞跃式发展。然而,实施数字化管理不仅仅是技术问题,更关乎流程优化、数…...
LeetCode 1863.找出所有子集的异或总和再求和
题解 根据上述图可以根据二进制运算获取所有的子集,但是可以使用二进制获取所有子集需要有题目的这一句话才能够使用注意:在本题中,元素相同的不同子集应多次计数。 也就是对于{2,2,3,4,5}的子集不会简化成{2,3,4,5} public static int sub…...
蓝桥云客---蓝桥速算
3.蓝桥速算【算法赛】 - 蓝桥云课 问题描述 蓝桥杯大赛最近新增了一项娱乐比赛——口算大赛,目的是测试选手的口算能力。 比赛规则如下: 初始给定一个长度为 N 的数组 A,其中第 i 个数字为 Ai。随后数组会被隐藏,并进行 Q 次…...
Kafka 概念
🌀 Kafka 是什么? Kafka 是一个分布式流处理平台,可以用来: 🚚 高效地收集、传输、存储、处理 实时数据流。 它最初由 LinkedIn 开发,用于解决海量日志处理的问题,后来开源给 Apache࿰…...
双向链表增删改查的模拟实现
本章目标 0.双向链表的基本结构 1.双向链表的初始化 2.头插尾插 3.头删尾删 4.查找与打印 5.在指定位置之前插入数据/在指定位置之后插入数据 6.在指定位置之前删除数据/在指定位置之后删除数据 7.销毁链表 0.双向链表的基本结构 本章所实现的双向链表是双向循环带头链表,是…...
配置ASP.NET Core+NLog配置日志示例
以下是一个精简且实用的 NLog 配置文件示例,适用于 ASP.NET Core 项目,包含文件日志、控制台日志和自动归档功能: NLog.config 示例 (保存到项目根目录) xml Copy Code <?xml version="1.0" encoding="utf-8" ?> <nlog xmlns="http:…...
Roo Code使用MCP服务(大模型上下文协议)
MCP概念火爆,但是理解起来有点难度,使用起来也有点难度。 启用MCP RooCode直接支持使用MCP服务,甚至可以帮助写MCP,为我们提供了很大的方便。单击 Roo Code 窗格顶部导航栏中的类似三个插座的图标,显示如下MCP的配置…...
【项目管理】第一部分 信息技术 1/2
相关文档,希望互相学习,共同进步 风123456789~-CSDN博客 概要 知识点: 现代化基础设施、数字经济、工业互联网、车联网、智能制造、智慧城市、数字政府、5G、常用数据库类型、数据仓库、信息安全、网络安全态势感知、物联网、大数…...
《UNIX网络编程卷1:套接字联网API》第6章 IO复用:select和poll函数
《UNIX网络编程卷1:套接字联网API》第6章 I/O复用:select和poll函数 6.1 I/O复用的核心价值与适用场景 I/O复用是高并发网络编程的基石,允许单个进程/线程同时监控多个文件描述符(套接字)的状态变化,从而高…...
Three.js 系列专题 1:入门与基础
什么是 Three.js? Three.js 是一个基于 WebGL 的 JavaScript 库,它简化了 3D 图形编程,让开发者无需深入了解底层 WebGL API 就能创建复杂的 3D 场景。它广泛应用于网页游戏、可视化、虚拟现实等领域。 学习目标 理解 Three.js 的核心组件:场景(Scene)、相机(Camera)…...