当前位置: 首页 > news >正文

前端web

学习笔记:

基本属性

  1. color: 设置文本的颜色。代码:color: red;
  2. background-color: 设置元素的背景颜色。background-color: blue;
  3. font-size: 设置文本的大小font-size: 16px;
  4. font-family: 设置文本的字体font-family: Arial, sans-serif;
  5. text-align: 设置文本的对齐方式text-align: center;
  6. margin: 设置元素的外边距margin: 10px;
  7. padding: 设置元素的内边距padding: 20px;
  8. border: 设置元素的边框border: 1px solid black;

布局属性

  1. display: 定义元素的显示类型。

display: block;

display: inline;

display: flex;

  1. position: 定义元素的定位方式。

position: absolute;

position: relative;

position: fixed;

position: sticky;

  1. top, right, bottom, left: 定义定位元素的偏移量。

top: 10px;

right: 20px;

  1. float: 定义元素的浮动。

float: left;

float: right;

  1. clear: 清除浮动clear: both;
  2. flex: 定义弹性盒模型中的弹性子项。

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

尺寸属性

  1. width: 设置元素的宽度。width: 100px;
  2. height: 设置元素的高度。height: 50px;
  3. max-width: 设置元素的最大宽度。max-width: 100%;
  4. min-width: 设置元素的最小宽度。min-width: 300px;
  5. max-height: 设置元素的最大高度。max-height: 500px;
  6. min-height: 设置元素的最小高度。min-height: 200px;

高级属性

  1. z-index: 设置元素的堆叠顺序。z-index: 10;
  2. opacity: 设置元素的透明度opacity: 0.5;
  3. overflow: 设置溢出内容的处理方式。

overflow: hidden;

overflow: scroll;

  1. box-shadow: 设置元素的阴影效果。box-shadow: 10px 10px 5px #888888;
  2. transition: 设置元素的过渡效果transition: all 0.3s ease-in-out;
  3. transform: 设置元素的2D或3D转换。transform: rotate(45deg);
  4. animation: 设置元素的动画。

animation: mymove 5s infinite;

@keyframes mymove

{

from {top: 0px;}

to {top: 200px;}

}

行内元素(Inline Elements)

·  <a> - 超链接

·  <span> - 通用行内容器

·  <em> - 强调文本(斜体)

·  <strong> - 强调文本(加粗)

·  <img> - 图片

·  <input> - 输入控件

·  <label> - 标签

块级元素(Block Elements)

·  <div> - 通用块级容器

·  <p> - 段落

·  <h1> - <h6> - 标题

·  <ul> - 无序列表

·  <ol> - 有序列表

·  <li> - 列表项

·  <header> - 页眉

·  <footer> - 页脚

·  <section> - 区块

将块级元素变为行内元素:

.block-to-inline { display: inline;}

将行内元素变为块级元素:.inline-to-block {display: block;}

inline-block: 结合了行内和块级元素的特点,元素会像行内元素一样排列,但可以设置宽高。.inline-block-element {display: inline-block;width: 100px;height: 50px;}

flex: 用于创建弹性布局容器。.flex-container {display: flex;}

grid: 用于创建网格布局容器。.grid-container {display: grid;}

相关文章:

前端web

学习笔记&#xff1a; 基本属性 color: 设置文本的颜色。代码&#xff1a;color: red;background-color: 设置元素的背景颜色。background-color: blue;font-size: 设置文本的大小font-size: 16px;font-family: 设置文本的字体font-family: Arial, sans-serif;text-align: 设…...

如何通过 Nginx 实现 CouchDB 集群的负载均衡并监控请求分发

在现代分布式系统中&#xff0c;负载均衡是确保高可用性和性能的关键组件。CouchDB 是一个强大的分布式数据库&#xff0c;而 Nginx 是一个高性能的反向代理和负载均衡器。本文将详细介绍如何通过 Nginx 实现 CouchDB 集群的负载均衡&#xff0c;并监控请求被分发到哪一台 Couc…...

基于代理的RAG实现-Agentic RAG

基于代理的RAG实现-Agentic RAG Agentic RAG 体系结构中&#xff0c;不再被动地响应查询请求&#xff0c;而是主动地分析初步检索到的信息&#xff0c;并基于对任务复杂性的评估&#xff0c;战略性地选择最为合适的工具和方法进行进一步的数据检索和处理。这种多步骤推理和决策…...

ZIP怎么加密?

想要禁止他人随意解压zip压缩包&#xff0c;我们可以加密zip文件&#xff0c;那么zip设置密码的方法有哪些&#xff1f;今天分享三个加密方法 工具&#xff1a;WinRAR&#xff0c;这里需要注意&#xff0c;WinRAR默认压缩格式是.rar&#xff0c;所以我们想要加密zip文件&#…...

森林网络部署,工业4G路由器实现林区组网远程监控

在广袤无垠的林区&#xff0c;每一片树叶的摇曳、每一丝空气的流动&#xff0c;都关乎着生态的平衡与安宁。林区监控正以强大的力量&#xff0c;为这片绿色家园筑起一道坚固的防线。 工业 4G 路由器作为林区监控组网的守护者&#xff0c;凭借着卓越的通讯性能&#xff0c;突破…...

汽车网络信息安全-ISO/SAE 21434解析(上)

目录 概述 第四章-概述 1. 研究对象和范围 2. 风险管理 第五章-组织级网络安全管理 1. 网络安全治理&#xff08;cybersecurity governance&#xff09; 2. 网络安全文化&#xff08;cybersecurity culture) 3. 信息共享&#xff08;Information Sharing) 4. 管理体系…...

一个方法被多个线程同时调用,确保同样参数的调用只能有一个线程执行,不同参数的调用则可以多个线程同时执行

我们知道通过lock一个固定静态object给代码段加同步锁&#xff0c;可以让多个线程的同时调用以同步执行&#xff0c;因此可以利用字典来给不同参数分配不同的静态对象&#xff0c;方法中不同的参数调用锁住各自不同的静态对象即可实现不同参数不加锁&#xff0c;相同参数才加锁…...

军用通信设备通用规范GJB367A-2001试验

军用通信设备通用规范GJB367A-2001通常适用于地面、舰载和机载设备的型式试验验收标准&#xff0c;地面设备分为便携式设备、固定式设备和车载式设备。 GJB367A-2001军用通信设备通用规范规定了军用通信设备或系统的通用要求和检验验收规则以及试验方法。 GJB367A-2001军用通…...

AWS云计算概览(自用留存)

目录 一、云概念概览 &#xff08;1&#xff09;云服务模型 &#xff08;2&#xff09;云计算6大优势 &#xff08;3&#xff09;web服务 &#xff08;4&#xff09;AWS云采用框架&#xff08;AWS CAF&#xff09; 二、云经济学 & 账单 &#xff08;1&#xff09;定…...

AWS云平台上生成式AI通过项目文档内容分析获知项目风险

要在AWS云平台上设计和实施高性能系统&#xff0c;同时使用生成式人工智能识别项目风险来分析项目文档内容。 利用生成式AI分析项目文档并协助风险管理可以显著提高识别和解决AWS上托管的复杂项目中的风险的速度、准确性和效率。通过将AI的功能与传统的项目管理最佳实践相结合&…...

搜广推日常实习面经一

写在前面&#xff1a;除了校招的面经&#xff0c;实习的面经我也会更新&#xff0c;毕竟俺后续可能还要找一段实习。从八股来看&#xff0c;实习的八股更加的八股一点。和校招的面经有点不一样&#xff0c;所以还是可以学习了解一下。总之一句话&#xff1a;面向工作学习&#…...

分布式CAP理论介绍

分布式CAP理论是分布式系统设计中的一个核心概念,由加州大学伯克利分校的Eric Brewer教授在2000年的ACM研讨会上首次提出,随后在2002年由Seth Gilbert和Nancy Lynch从理论上证明。以下是对分布式CAP理论的详细剖析: 文章目录 一、CAP理论的基本概念二、CAP理论的取舍策略三、…...

网格参数化,Mesh parameterization processing

目录 前言1.Barycentric mappingMapping 步骤实例 2.Laplace mapping3.Laplace improvement4.Coding 前言 多边形网格的类型多种多样。本文所实现的网格多边形参数化是指三角多边形。 不同的表示被用来编码三维物体的几何形状。选择一种表示方式取决于在上游的获取过程和下游的…...

路由环路的产生原因与解决方法(1)

路由环路 路由环路就是数据包不断在这个网络传输&#xff0c;始终到达不了目的地&#xff0c;导致掉线或者网络瘫痪。 TTL &#xff08;生存时间&#xff09;&#xff1a;数据包每经过一个路由器的转发&#xff0c;其数值减1&#xff0c;当一个数据包的TTL值为0是&#xff0c;路…...

编程工具箱(免费,离线可用)

https://www.yuque.com/huanmin-4bkaa/ii1hx1?# 《工具箱》 常用的大部分工具都有, 比如mysql可视化 redis可视化, json编辑器, 加解密等(免费,离线可用) 后续也会慢慢的集成...

从Arrays源码学习定义工具类

背景 在日常编码中&#xff0c;一个比较好的实践是&#xff1a;我们把一些业务无关的、可复用的一些通用逻辑&#xff0c;封装成工具类、甚至jar包。这样一方面方便通用代码抽取、代码复用&#xff0c;同时也隔离经常变动的业务代码和不变的通用代码。那如何定义好一个工具类呢…...

Unity中实现倒计时结束后干一些事情

问题描述&#xff1a;如果我们想实现在一个倒计时结束后可以执行某个方法&#xff0c;比如挑战成功或者挑战失败&#xff0c;或者其他什么的比如生成boss之类的功能&#xff0c;而且你又不想每次都把代码复制一遍&#xff0c;那么就可以用下面这种方法。 结构 实现步骤 创建一…...

FPGA随记——时钟时序一些基本知识

原文链接&#xff1a;跨时钟域设计-CSDN博客 前言 CDC&#xff08;clock domain crossing&#xff09;检查&#xff08;跨时钟域的检查&#xff09;是对电路设计中同步电路设计的检查。非同步时钟没有固定的相位关系&#xff0c;这样Setup/Hold不满足而产生了亚稳态是无法避免…...

【微服务】SpringBoot 通用异常处理方案使用详解

目录 一、前言 二、SpringBoot 异常介绍 2.1 SpringBoot 中异常定义 2.1.1 SpringBoot 异常处理机制的重要性 2.2 常用的异常分类 2.3 常用的异常处理解决方案 三、springboot 异常处理操作实践 3.1 springboot自适应错误处理机制 3.1.1 使用默认错误页面 3.1.2 自定义…...

初识MyBatis(详细)

目录 回顾 前提回忆下web应用程序的三层架构&#xff1a; ​编辑 一.什么是MyBatis&#xff1f; 二.Mybatis操作数据库的步骤&#xff1a; 2.1准备工作 2.2配置Mybatis(数据库连接信息&#xff09; 2.3写持久层代码 2.4测试 三.Mybatis配置文件 3.1打印日志 3.2参数传递…...

elementui表单验证,数据层级过深验证失效

先看示例代码&#xff0c;代码为模拟动态获取表单数据&#xff0c;然后动态添加rules验证规则&#xff0c;示例表单内输入框绑定form内第四层&#xff1a; <template><el-form :model"form" :rules"rules" ref"ruleForm" label-width&…...

HTTPS与HTTP:区别及安全性对比

目录 一、基础概念 二、安全性对比 1. 加密传输 2. 身份验证 3. 数据完整性 4. 端口 5. 浏览器展示方式 三、使用场景与性能 1. 使用场景 2. 性能开销 四、成本与维护 五、搜索引擎优化&#xff08;SEO&#xff09; 六、案例分析 七、隐私保护与中间人攻击 八、…...

中国石油大学(华东)自动评教工具(涵盖爬虫的基础知识,适合练手)

我开发了一个用于自动评教的工具&#xff0c;大家可以试着用用&#xff0c;下面是链接。 https://github.com/restrain11/auto_teachingEvaluate 可以点个星吗&#xff0c;感谢&#xff01;&#x1fae1; 以下是我在开发过程中学到的知识 以及 碰到的部分问题 目录 动态爬虫和静…...

蓝桥杯备考:二叉树详解

二叉树的概念和相关术语 二叉树的定义&#xff1a;每个结点度至多为2的树&#xff0c;叫二叉树 二叉树的子树有左右之分不可以随意颠倒顺序&#xff0c;也就是说二叉树是有序树 二叉树根结点左子树右子树 满二叉树&#xff1a;就是把每一层的结点都铺满 满二叉树的性质&#xf…...

大模型微调介绍-Prompt-Tuning

提示微调入门 NLP四范式 第一范式 基于「传统机器学习模型」的范式&#xff0c;如TF-IDF特征朴素贝叶斯等机器算法. 第二范式 基于「深度学习模型」的范式&#xff0c;如word2vec特征LSTM等深度学习算法&#xff0c;相比于第一范式&#xff0c;模型准确有所提高&#xff0c…...

《机器学习》——PCA降维

文章目录 PCA降维简介什么是主成分分析&#xff1f; 主成分的选择与维度确定降维的数学过程PCA降维求解步骤降维后的效果和应用场景中的优势PCA模型API参数Attributes属性PCA对象的方法 PCA降维实例导入所需库导入数据集对数据进行处理创建PCA模型并训练查看训练结果对降维数据…...

【Rust练习】28.use and pub

练习题来自&#xff1a;https://practice-zh.course.rs/crate-module/use-pub.html 1 使用 use 可以将两个同名类型引入到当前作用域中&#xff0c;但是别忘了 as 关键字. use std::fmt::Result; use std::io::Result;fn main() {}利用as可以将重名的内容取别名&#xff1a;…...

VUE学习笔记1__创建VUE实例

核心步骤 <div id"app"><!-- 这里存放渲染逻辑代码 --><h1>{{ msg }}</h1><a href"#">{{count}}</a> </div><!-- 引入在线的开发版本核心包 --> <!-- 引入核心包后全局可使用VUE构造函数 --> <…...

不用PLC和板卡,一台电脑就可以控制伺服

1、前言 大家好&#xff01;我是付工。 EtherCAT是运动控制领域使用最广泛的总线通信协议之一。 如果我们只有一台电脑&#xff0c;能不能直接控制EtherCAT总线伺服呢&#xff1f; 这个是完全可以的。 我们可以在电脑上安装实时运行环境&#xff0c;从而实现对伺服电机的总…...

vue2制作长方形容器,正方形网格散点图,并且等比缩放拖动

需求&#xff1a;有个长方形的容器&#xff0c;但是需要正方形的网格线&#xff0c;网格线是等比缩放的并且可以无线拖动的&#xff0c;并且添加自适应缩放和动态切换&#xff0c;工具是plotly.js,已完成功能如下 1.正方形网格 2.散点分组 3.自定义悬浮框的数据 4.根据窗口大小…...

鸿蒙-页面和自定义组件生命周期

页面生命周期&#xff0c;即被Entry装饰的组件生命周期&#xff0c;提供以下生命周期接口&#xff1a; onPageShow&#xff1a;页面每次显示时触发一次&#xff0c;包括路由过程、应用进入前台等场景。onPageHide&#xff1a;页面每次隐藏时触发一次&#xff0c;包括路由过程、…...

AD域学习

AD域学习 AD域一、什么是AD域二、概念三、疑问四、内容4.1、AD域的功能 五、应用实践 AD域 一、什么是AD域 AD域&#xff08;Active Directory Domain&#xff09;是微软Windows网络中的一个概念&#xff0c;它是一种计算机网络的形式&#xff0c;其中所有用户账户、计算机、…...

leetcode 3066. 超过阈值的最少操作数 II 中等

给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 一次操作中&#xff0c;你将执行&#xff1a; 选择 nums 中最小的两个整数 x 和 y 。将 x 和 y 从 nums 中删除。将 min(x, y) * 2 max(x, y) 添加到数组中的任意位置。 注意&#xff0c;只有当 nums 至少包含两个元…...

使用 WPF 和 C# 绘制覆盖网格的 3D 表面

此示例展示了如何使用 C# 代码和 XAML 绘制覆盖有网格的 3D 表面。示例使用 WPF 和 C# 将纹理应用于三角形展示了如何将纹理应用于三角形。此示例只是使用该技术将包含大网格的位图应用于表面。 在类级别&#xff0c;程序使用以下代码来定义将点的 X 和 Z 坐标映射到 0.0 - 1.…...

大数据学习(34)-mapreduce详解

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…...

源码编译安装httpd 2.4

方法一&#xff1a; 1、下载 Apache 源代码&#xff1a; wget https://archive.apache.org/dist/httpd/httpd-2.4.54.tar 2、解压源代码&#xff1a; tar -zxvf httpd-2.4.54.tar.gz 3、进入源代码目录&#xff1a; cd httpd-2.4.54 4、安装开发工具组&#xff1a; yum…...

1.15寒假作业

web&#xff1a;nss靶场ez_ez_php 打开环境&#xff0c;理解代码 使用个体传参的方法&#xff0c;首先代码会检查file参数的前三个字符是不是php&#xff0c;如果是就输出nice&#xff0c;然后用include函数包含file&#xff0c;绕过不是则输出hacker&#xff0c;如果没有file…...

Java中private和static同时使用会出现什么情况?

引言 这几天在学习单例设计模式&#xff08;后面会出一期包含23种设计模式介绍的博客&#xff09;的时候发现了一段代码 private static Single single; 当时我就在想&#xff0c;这个private和static一起用的话外界想要访问这个成员变量到底是能不能访问到呢&#xff1f;当…...

vue倒计时组件封装,根据每个循环项的倒计时是否结束添加新类名。

1.创建countdown.vue文件&#xff1a; <template><p style"font-size: 10px">{{time}}</p> </template> <script>export default{data () {return {time : ,flag : false}},mounted () {let time setInterval(() > {if (this.fla…...

nvim 打造成可用的IDE(2)

上一个 文章写的太长了&#xff0c; 后来再写东西 就一卡一卡的&#xff0c;所以新开一个。 主要是关于 bufferline的。 之前我的界面是这样的。 这个图标很不舒服有。 后来发现是在这里进行配置。 我也不知道&#xff0c;这个配置 我是从哪 抄过来的。 测试结果&#xff1…...

Spring Boot教程之五十五:Spring Boot Kafka 消费者示例

Spring Boot Kafka 消费者示例 Spring Boot 是 Java 编程语言中最流行和使用最多的框架之一。它是一个基于微服务的框架&#xff0c;使用 Spring Boot 制作生产就绪的应用程序只需很少的时间。Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序&#xff0c;您可…...

目标检测跟踪中的Siamese孪生网络与普通卷积网络(VGG、ResNet)有什么区别?

1、什么是Siamese网络&#xff1f; Siamese网络又叫孪生网络&#xff0c;是一种特殊的神经网络架构&#xff0c;由一对&#xff08;或多对&#xff09;共享参数的子网络组成&#xff0c;用于学习输入样本之间的相似性或关系。最早在 1994 年由 Bromley 等人提出&#xff0c;最…...

AIGC时代 | 探索AI Agent的奥秘:四种设计模式引领未来智能趋势

AIGC时代 | 探索AI Agent的奥秘&#xff1a;四种设计模式引领未来智能趋势 引言 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;AI Agent作为新一代的智能代理&#xff0c;正在引领工作流程的革新。AI Agent&#xff0c;即人工智能代理&#xff0c;是一种…...

PyTorch框架——基于深度学习YOLOv5神经网络水果蔬菜检测识别系统

基于深度学习YOLOv5神经网络水果蔬菜检测识别系统&#xff0c;其能识别的水果蔬菜有15种&#xff0c;# 水果的种类 names: [黑葡萄, 绿葡萄, 樱桃, 西瓜, 龙眼, 香蕉, 芒果, 菠萝, 柚子, 草莓, 苹果, 柑橘, 火龙果, 梨子, 花生, 黄瓜, 土豆, 大蒜, 茄子, 白萝卜, 辣椒, 胡萝卜,…...

【redis】redis-cli命令行工具的使用

redis-cli命令行工具是一个功能强大的Redis客户端&#xff0c;它允许用户与Redis数据库进行交互和管理。 以下是一些常用参数的使用说明&#xff1a; 基本连接参数 -h, --host <hostname>&#xff1a;指定要连接的Redis服务器的主机名或IP地址。如果未指定&#xff0c;…...

阿里云-Centos9-安装Docker-配置镜像拉取加速地址-开机自启

阿里云-Centos9-安装Docker-配置镜像拉取加速地址-开机自启 更新镜像源安装环境配置加速卸载安装pull拉取加速开机自启 更新镜像源 # dnf update&#xff1a;更新所有已安装的软件包。 sudo dnf update -y安装环境 # 安装环境 # yum-utils&#xff1a;提供了管理yum仓库的工具。…...

Grails应用http.server.requests指标数据采集问题排查及解决

问题 遇到的问题&#xff1a;同一个应用&#xff0c;Spring Boot(Java)和Grails(Groovy)混合编程&#xff0c;常规的Spring Controller&#xff0c;可通过Micromete Pushgateway&#xff0c; 采集到http.server.requests指标数据&#xff0c;注意下面的指标名称是点号&#…...

使用 WPF 和 C# 将纹理应用于三角形

此示例展示了如何将纹理应用于三角形,以使场景比覆盖纯色的场景更逼真。以下是为三角形添加纹理的基本步骤。 创建一个MeshGeometry3D对象。像往常一样定义三角形的点和法线。通过向网格的TextureCoordinates集合添加值来设置三角形的纹理坐标。创建一个使用想要显示的纹理的 …...

【vue3项目使用 animate动画效果】

vue3项目使用 animate动画效果 前言一、下载或安装npm 安装 二、引入组件三、复制使用四、完整使用演示总结 前言 提示&#xff1a;干货篇&#xff0c;不废话&#xff0c;点赞收藏&#xff0c;用到会后好找藕~ 点击这里&#xff0c;直接看官网哦 &#x1f449; 官网地址&#…...

C#中颜色的秘密

颜色的秘密: 颜色Color是一个调色板, 所有颜色都是由透明度Alpha,红Red,绿Green,蓝Blue按不同比例调色混合而成,如果不考虑透明度Alpha,颜色共有256*256*25616777216种 ColorARGB A,R,G,B都为byte型[8位],因此可以用整体的32个整数[Int32]来表示一种颜色 Color 所属命名空…...