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

解锁 CSS：网页美化与布局的艺术

news 来源：原创 2025/7/20 19:11:40

目录

一、CSS 是什么

二、CSS 的作用

三、CSS 的应用方式（引用方式）

四、选择器：如何挑选要 “打扮” 的元素

五、CSS 属性：丰富多样的 “服装款式”

字体属性：

文本属性：只能控制文字的相关样式。

颜色属性：

盒子模型：

六、CSS 的工作原理

七、CSS 选择器的优先级

八、CSS 的历史与发展

九、案例分析与实践

在丰富多彩的网络世界中，网页就如同一个个精美的舞台，而 CSS 语言则是为这些舞台增添绚丽色彩和独特风格的魔法画笔。它是前端开发中不可或缺的一部分，让网页变得更加美观、吸引人。

一、CSS 是什么

CSS，全称 Cascading Style Sheets，即层叠样式表。简单来说，它是一种用于描述 HTML 文档样式的语言，就像给网页穿上漂亮的衣服一样。通过 CSS，我们可以轻松地控制网页的布局、颜色、字体等各种外观表现。

二、CSS 的作用

  1. 页面外观美化：这是 CSS 最直观的作用之一。它可以让网页变得更加绚丽多彩，吸引用户的注意力，提升用户体验。
  2. 布局和定位：帮助我们精确地安排网页元素的位置，使页面结构更加清晰、合理。

三、CSS 的应用方式（引用方式）

  1. 内部样式：在 HTML 文件的<head>标签内，使用<style>标签来书写 CSS 代码。这种方式将样式直接嵌入到 HTML 文件中，方便对单个页面的样式进行管理。 
    <head><!-- 网页采用utf-8的编码格式 --><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>Document</title><style>/* 直接写css代码 */</style></head>
  2. 行内样式：也被称为嵌入样式，通过在 HTML 标签的style属性中直接定义样式。它只对设置了该属性的特定标签起作用，但会使样式和结构紧密耦合，不利于代码的维护和复用。 
    <div style="在这里写css代码"></div>
  3. 外部样式：将 CSS 代码单独存放在一个扩展名为.css的文件中，然后在 HTML 文件中使用<link>标签引入该文件。这种方式实现了样式与结构的分离，多个 HTML 页面可以共享同一个 CSS 文件，提高了代码的可维护性和复用性。 
    <head><!-- 网页采用utf-8的编码格式 --><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>Document</title><!-- 引入css文件 --><link rel="stylesheet" href="./index.css"></head>

    行内样式的优先级高于内部样式，而内部样式又高于外部样式，离标签越近，优先级越高。

四、选择器：如何挑选要 “打扮” 的元素

  1. 标签选择器（元素选择器）：使用 HTML 标签作为选择器的名称，例如<div>选择器会选中所有的<div>标签，从而统一设置它们的样式。其优点是能快速为同类型标签统一样式，但缺点是不能设计差异化样式。 
    <!-- 以内部样式为例 --><style>div {}</style><body><div>我是div标签</div></body>
  2. 类选择器：以 “.” 开头，后面紧跟自定义的类名。通过在 HTML 标签的class属性中添加相应的类名，就可以应用该类选择器定义的样式。类选择器的最大优点是可以为元素对象定义单独或相同的样式，具有更高的灵活性和可复用性。 
    <!-- 以内部样式为例 --><style>.name{}</style><body><div class="name">我是div标签</div><div class="name">我是div标签</div><div class="name">我是div标签</div></body>
  3. ID 选择器：以 “#” 开头，后面是自定义的 ID 名称。通过在 HTML 标签的id属性中设置相同的 ID 值，就可以应用该 ID 选择器定义的样式。需要注意的是，ID 在整个文档中是唯一的，不能有多个相同的 ID。 
    <!-- 以内部样式为例 --><style>#name{}</style><body><div id="name">我是div标签</div></body>
  4. 通配符选择器：用 “*” 表示，可以匹配页面中所有的元素。常用于清除浏览器默认样式，但由于其作用范围广泛，可能会增加运行时间，延缓加载速度，所以在实际使用中需谨慎。

五、CSS 属性：丰富多样的 “服装款式”

  1. 字体属性：

    • font-size：用于设置字体的大小。需注意，浏览器通常不支持 12px 以下的文字大小。
    • font-family：规定文本的字体，可以支持多个字体名称，中间用逗号分隔。当多个单词代表一个文字字体时，要用引号引起来。
    • font-weight：代表字体的粗细，可以使用数值或单词（如 bold、lighter）来设置。
    • font-style：用于设置字体风格，如 italic（倾斜）、oblique（倾斜）或 normal（正常）。
    • font综合设置字体样式，语法为font: font-style font-weight font-size/line-height font-family;，各个属性之间用空格隔开，且顺序不能改变。 
          font-family:Arial, Helvetica, sans-serif;font-weight:800;font-size: 36px; font-style:italic;

  2. 文本属性：只能控制文字的相关样式。

    • line-height：设置行之间的高度，用于改变文字之间行与行的距离。
    • text-align：控制水平对齐方式，取值包括 left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。需注意元素的性质是否为独占一行，否则某些对齐方式可能会失效。
    • text-decoration：用于设置文本的装饰效果，如 underline（下划线）、line-through（删除线）、overline（上划线）等，还可以设置颜色。
    • text-transform：可将文本进行转换，如 lowercase（所有字母小写）、uppercase（所有字母大写）、capitalize（文本中每个单词以大写字母开头）。
    • text-shadow：用于设置文本阴影，语法为text-shadow: h-shadow v-shadow blur color;，其中h-shadow表示水平阴影的位置（X 轴往右为正值），v-shadow表示垂直阴影的位置（Y 轴向下为正值），blur表示模糊的距离，color表示阴影的颜色。
    • letter-spacing：增加字符之间的空白，使用数值表示，可以是负数，主要用于汉字。而word-spacing则是增加单词之间的空白，主要用于英文单词的字符距离。 
          line-height: 3.5; text-align:center;text-decoration:underline;text-transform:lowercase;text-shadow:12px 3px #222;letter-spacing:11px;

  3. 颜色属性：

    • color：设置文本颜色，可使用颜色名称（如 red 红色、yellow 黄色等）、十六进制颜色（如#f7f2f2）、RGB 颜色（如rgb(255, 0, 0)）或 RGBA 颜色（在 RGB 基础上增加了控制 alpha 透明度的参数，取值范围为 0 到 1）。
    • background-color：设置背景颜色，同样可使用上述颜色表示方法。 
          color: rgb(10, 241, 241); background-color: #09f58f;

  4. 盒子模型：

网页实际上是由一个个盒子构成的，而<div>标签常用于进行布局。盒子模型的属性包括：

  • width：盒子的宽度，单位通常为 px（像素）。
  • height：盒子的高度，单位也是 px。
  • border：设置边框，可指定边框的样式（如实线、虚线等）、宽度（px）和颜色。
  • padding：内边距，即元素内容与边框之间的距离。
  • margin：外边距，即元素与其他元素之间的距离。
  • border-radius：设置边框四个角的圆角半径，如果设置为 50%，当前盒子会变成圆形（或椭圆形，取决于盒子的宽高比例）。 
    div{height: 500px;width: 800px;border: 1px solid #f20b0b;padding: 10px;margin: 10px;border-radius: 11px;
}

六、CSS 的工作原理

当浏览器加载 HTML 页面时，会同时加载相关的 CSS 样式表。首先，浏览器会解析 HTML 代码，创建对应的 DOM 树（Document Object Model，文档对象模型）。然后，将解析后的 CSS 挂载在 DOM 树上，根据选择器找到相应的元素，并应用对应的样式规则。

七、CSS 选择器的优先级

优先级顺序为：!important > 内联样式 > ID > 类 > 标签。这意味着，如果存在多个样式规则应用于同一个元素，浏览器将按照这个优先级顺序来确定最终显示的样式。

八、CSS 的历史与发展

CSS 的诞生源于对 HTML 样式管理的需求。随着 HTML 的发展，为了满足页面设计者对页面效果的各种要求，HTML 中添加了越来越多的显示功能，导致 HTML 变得越来越杂乱和臃肿。于是，在 1994 年，哈坤・利提出了 CSS 的最初建议，随后 CSS 的创作成员全力以赴负责研发 CSS 标准，使其逐渐走上正轨。

W3C 标准是目前运用最广泛的 CSS 标准。在 CSS 的发展过程中，不断有新的特性和功能被添加进来，以满足日益复杂的网页设计需求。

九、案例分析与实践

为了更好地理解和掌握 CSS，我们来看一个简单的案例。假设我们要创建一个具有特定样式的网页布局，首先创建 HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="styles.css"> 
</head>
<body><div class="container"><h1>这是标题</h1><p>这是一段文字内容。</p></div>
</body>
</html>

然后创建外部 CSS 文件styles.css，并在其中定义样式：

.container {width: 800px; margin: 0 auto; background-color: #f8f9fa; padding: 20px; border: 1px solid #dee2e6; 
}h1 {font-size: 24px; color: #333; margin-bottom: 10px; 
}p {font-size: 16px; line-height: 1.5; color: #666; 
}

在上述案例中，使用了类选择器.container来定义一个包含标题和段落的容器样式，包括宽度、居中对齐、背景颜色、内边距和边框等。同时，分别为<h1>标签和<p>标签设置了字体大小、颜色和外边距等样式。

通过这样的方式，我们可以轻松地实现对网页元素的样式设置，打造出具有特定风格和布局的网页。

总之，CSS 语言是网页设计中非常重要的一部分。通过学习和掌握 CSS 的各种选择器、属性和应用方式，我们能够为网页赋予独特的外观和布局，使其更加吸引人、易于阅读和使用。不断地实践和探索 CSS 的各种特性，将有助于我们创造出更加精彩和专业的网页作品。在实际开发中，还可以结合其他前端技术，如 HTML 和 JavaScript，打造出功能强大、用户体验良好的网页应用。

相关文章：

解锁 CSS：网页美化与布局的艺术

目录 一、CSS 是什么 二、CSS 的作用 三、CSS 的应用方式&#xff08;引用方式&#xff09; 四、选择器&#xff1a;如何挑选要 “打扮” 的元素 五、CSS 属性&#xff1a;丰富多样的 “服装款式” 字体属性&#xff1a; 文本属性&#xff1a;只能控制文字的相关样式。 …...

编程日记 2025/7/20 19:11:40

AWS K8s 部署架构

Amazon Web Services&#xff08;AWS&#xff09;提供了一种简化的Kubernetes&#xff08;K8s&#xff09;部署架构&#xff0c;使得在云环境中管理和扩展容器化应用变得更加容易。这个架构的核心是AWS EKS&#xff08;Elastic Kubernetes Service&#xff09;&#xff0c;它是…...

编程日记 2025/7/20 19:01:02

【鸿蒙NEXT】鸿蒙里面类似iOS的Keychain——关键资产(@ohos.security.asset)实现设备唯一标识

前言 在iOS开发中Keychain 是一个非常安全的存储系统&#xff0c;用于保存敏感信息&#xff0c;如密码、证书、密钥等。与 NSUserDefaults 或文件系统不同&#xff0c;Keychain 提供了更高的安全性&#xff0c;因为它对数据进行了加密&#xff0c;并且只有经过授权的应用程序才…...

编程日记 2025/7/20 18:56:05

电子电器架构 --- HUD的工作原理

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 所谓鸡汤，要么蛊惑你认命，要么怂恿你拼命，但都是回避问题的根源，以现象替代逻辑，以情绪代替思考，把消极接受现实的懦弱，伪装成乐观面对不幸的…...

编程日记 2025/7/18 20:53:03

C# 窗体应用程序嵌套web网页，基于谷歌浏览器内核（含源码）

有一个winform项目&#xff0c;需要借助一个web项目来显示&#xff0c;并且对web做一些操作,web页目是需要用谷歌内核&#xff0c;基于谷歌 Chromium项目的开源Web Browser控件来开发写了一个demo。 安装步骤 第一步&#xff1a;右键项目&#xff0c;点击 管理NuGet程序包 , 输…...

编程日记 2025/7/20 19:08:22

FFmpeg 中 examples 使用教程

FFmpeg 中 examples FFmpeg 的 examples 目录包含了一系列示例程序，旨在展示如何使用 FFmpeg 的不同库和 API。这些示例涵盖了多种功能，包括音视频编解码、格式转换、过滤、网络传输等。以下是一些常见的示例程序及其功能介绍： 音频和视频解码： 示例程序展示了如何打开音视…...

编程日记 2025/7/19 20:31:45

自动化办公-合并多个excel

在日常的办公自动化工作中&#xff0c;尤其是处理大量数据时&#xff0c;合并多个 Excel 表格是一个常见且繁琐的任务。幸运的是&#xff0c;借助 Python 语言中的强大库&#xff0c;我们可以轻松地自动化这个过程。本文将带你了解如何使用 Python 来合并多个 Excel 表格&#…...

编程日记 2025/7/19 16:20:16

Docker搭建MySQL

Docker搭建MySQL 准备工作 先准备配置目录和持久化目录&#xff0c;举个栗子&#xff1a;mkdir -p /opt/module/mysql/{conf,data,log}准备配置文件*.cnf,放到/opt/module/mysql/conf目录下。当然不准备也没事&#xff0c;容器中有个默认配置&#xff1a;/etc/mysql/conf.d/m…...

编程日记 2025/7/19 8:39:42

亚马逊国际站商品爬虫：Python实战指南

在数字化时代&#xff0c;数据的价值不言而喻。对于电商领域而言&#xff0c;获取竞争对手的商品信息、价格、评价等数据&#xff0c;对于市场分析和策略制定至关重要。本文将带你了解如何使用Python编写爬虫&#xff0c;以亚马逊国际站为例&#xff0c;按照关键字搜索并获取商…...

编程日记 2025/7/20 14:35:00

pwntools用法

pwntools 是一个Python库&#xff0c; 用于编写二进制漏洞利用&#xff08;exploitation&#xff09;脚本 功能&#xff1a; 远程连接和本地连接&#xff1a; 支持通过TCP/UDP连接远程服务或与本地进程进行交互。Shellcode和ROP链构造&#xff1a; 提供了便捷的工具来生成和利…...

编程日记 2025/7/15 22:53:33

企业云盘怎么选？2024年免费版9款整理

文章介绍了以下9大企业云盘&#xff1a;1.亿方云&#xff1b;2.Worktile&#xff1b;3.百度网盘&#xff1b;4.腾讯云盘&#xff1b;5.阿里云盘&#xff1b;6.金山云盘&#xff1b;7.Dropbox&#xff1b;8.Box。 在企业日常管理中&#xff0c;文件存储和共享一直是个不小的难题…...

编程日记 2025/7/19 9:46:31

Linux之ARM(MX6U)裸机篇----5.仿stm32的LED驱动实验

一&#xff0c;启动文件 .global _start .global _bss_start /* 类似宏定义把__bss_start定义为_bss_start */ _bss_start:.word __bss_start.global _bss_end _bss_end:.word __bss_end_start:#设置处理器进入SVC模式mrs r0, cpsr /* 读取cpsr到r0 */bic r0, r0, …...

编程日记 2025/7/17 5:46:08

Qt从入门到入土（七）-实现炫酷的登录注册界面（下）

前言 Qt从入门到入土&#xff08;六&#xff09;-实现炫酷的登录注册界面&#xff08;上&#xff09;主要讲了如何使用QSS样式表进行登录注册的界面设计&#xff0c;本篇文章将介绍如何对登录注册界面进行整体控件的布局&#xff0c;界面的切换以及实现登录、记住密码等功能。…...

编程日记 2025/7/15 13:18:32

如何进行年度工作回顾？

发生了什么事&#xff1f; 什么事情进展顺利 &#xff1f; 什么事情进展不顺利&#xff1f; 如何适应未来&#xff1f; 年度回顾的定义&#xff1a;这是一种战略工具&#xff0c;能帮助人们清晰看到过去一年对业务、职业或个人生活的影响&#xff0c;可用于明确关键事件、找出问…...

编程日记 2025/7/19 4:24:26

spring默认线程池SimpleAsyncTaskExecutor特点为什么要尽量避免使用

在 Spring Boot 中&#xff0c;默认的线程池配置由 TaskExecutionAutoConfiguration 类提供&#xff0c;使用的是 SimpleAsyncTaskExecutor。 SimpleAsyncTaskExecutor特点 每次调用创建新线程&#xff1a; SimpleAsyncTaskExecutor 每次执行任务时都会创建一个新线程&#xf…...

编程日记 2025/7/15 14:09:31

每天40分玩转Django：Django表单集

Django表单集 一、知识要点概览表 类别知识点掌握程度要求基础概念FormSet、ModelFormSet深入理解内联表单集InlineFormSet、BaseInlineFormSet熟练应用表单集验证clean方法、验证规则熟练应用自定义配置extra、max_num、can_delete理解应用动态管理JavaScript动态添加/删除表…...

编程日记 2025/7/18 14:25:24

构建混合技术栈的统一监控与日志平台

文章目录 摘要引言构建统一监控与日志平台的核心思路痛点分析解决方案 平台架构设计架构概览 环境准备Java 服务的 Prometheus 指标导出Prometheus 指标采集模块Node.js 日志收集模块3. Logstash 配置4. Grafana 与 Kibana 配置 QA 环节总结未来展望参考资料 摘要 在多技术栈开…...

编程日记 2025/7/18 4:51:06

KOI技术-事件驱动编程（Sping后端）

1 “你日渐平庸&#xff0c;甘于平庸&#xff0c;将继续平庸。”——《以自己喜欢的方式过一生》 2. “总是有人要赢的&#xff0c;那为什么不能是我呢?”——科比布莱恩特 3. “你那么憎恨那些人&#xff0c;和他们斗了那么久&#xff0c;最终却要变得和他们一样&#xff0c;…...

编程日记 2025/7/17 22:43:11

ubuntu 20.04 国内源安装docker

先更新软件包&#xff0c;安装备要apt软件 # 更新软件包索引 sudo apt-get update# 安装需要的软件包以使apt能够通过HTTPS使用仓库 sudo apt-get install ca-certificates curl gnupg lsb-release使用阿里云源 # 添加阿里云官方GPG密钥 curl -fsSL http://mirrors.aliyun.co…...

编程日记 2025/7/19 18:30:52

微信小程序 app.json 配置文件解析与应用

目录 一、什么是 app.json&#xff1f; 二、app.json 文件的基本结构 三、详细解析 app.json 配置项 1. pages&#xff1a;小程序页面路径配置 2. window&#xff1a;窗口样式配置 3. tabBar&#xff1a;底部标签栏配置 4. networkTimeout&#xff1a;网络请求超时配置 …...

编程日记 2025/7/16 4:30:31

C高级：思维导图Day2

目录 总览1 总览2 总览1 压缩与解压缩 打包与解包 软连接与硬链接 ubuntu下关机与重启指令 总览2 结束...

编程日记 2025/7/19 4:35:39

蓝桥杯（Java）（ing）

Java前置知识 输入流&#xff1a; &#xff08;在Java面向对象编程-CSDN博客里面有提过相关知识------IO流&#xff09; // 快读快写 static BufferedReader in new BufferedReader(new InputStreamReader(System.in)); static BufferedWriter out new BufferedWriter(new…...

编程日记 2025/7/19 15:39:24

[Pro Git#2] 分支管理 | branch fix_bug , feature | 处理合并冲突

目录 一、Issue模板文件 二、Pull Requests模板文件 分支管理 1. 理解分支 2. 创建与管理分支 1. 切换分支与提交历史 2. 合并分支 3. 删除分支 4. 解决合并冲突 6. 查看分支合并情况 快速创建并切换分支 分支管理策略 分支合并模式 分支管理原则 日常开发环境 …...

编程日记 2025/7/16 15:57:03

Java——集合框架

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1 集合框架概述1.1 内存层面需要针对多个数据进行存储。此时&#xff0c;可以考虑的容器有&#xff1a;1.2 数组存储多个数据方面的特点和弊端1.3 Java集合框架体系…...

编程日记 2025/7/18 15:21:14

Mac 环境 VVenC 编译与编码命令行工具使用教程

VVenC VVenC 是一个开源的高效视频编码器&#xff0c;专门用于支持 H.266/VVC (Versatile Video Coding) 标准的编码。H.266/VVC 是继 HEVC (H.265) 之后的新一代视频编码标准&#xff0c;主要目的是提供比 HEVC 更高的压缩效率&#xff0c;同时保持或提高视频质量。H.266/VVC…...

编程日记 2025/7/15 22:13:09

WebRTC：实现浏览器与移动应用的实时通信

1.技术简介 &#xff08;Web Real-Time&#xff09;是一种开放式实时通信技术&#xff0c;旨在使浏览器和移动应用程序通过简单的API即可实现实时音频、视频和数据传输&#xff0c;而无需安装插件或额外软件。它支持网络应用中的点对点通信&#xff0c;例如视频聊天、语音通话…...

编程日记 2025/7/19 23:49:38

curl+openssl 踩坑笔记

curl编译&#xff1a;点击跳转 踩坑一 * SSL certificate problem: unable to get local issuer certificate * closing connection #0 curl: (60) SSL certificate problem: unable to get local issuer certificate More details here: https://curl.se/docs/sslcerts.html …...

编程日记 2025/7/14 23:29:51

【NebulaGraph】变化的多跳查询

【NebulaGraph】变化的多跳查询 1. 需求2. 解决方案2.1 确定查询结构2.2 构建查询语句 3. 追加需求&#xff1a;如果增加每一跳都要指定查询某SPACE下的Tag&#xff0c;或者不查询某个Tag怎么办 1. 需求 存在多跳请求&#xff0c;其中每一跳是从上一跳查询结果为基础的。但是 …...

编程日记 2025/7/18 1:07:27

【C++】九九乘法表编程题详解与多角度对比分析

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;题目概述题目描述 &#x1f4af;老师的实现方法代码解析优点不足 &#x1f4af;我的实现方法代码解析优点不足 &#x1f4af;实现方法对比&#x1f4af;优化与扩展代码优化…...

编程日记 2025/7/14 10:48:50

node.js卸载并重新安装（超详细图文步骤）

卸载node.js 重新安装nodejs 一、卸载 1、首先进入控制面板卸载程序 2、卸载后 到文件夹中进行进一步的删除 删除上述的几个文件夹 每个人可能不一样&#xff0c;总之是找到自己的nodejs安装路径&#xff0c;下面是我的 ①删除C:UsersAdminAppDataRoaming路径下的npm相关文件…...

编程日记 2025/7/16 9:36:10

redis的集群模式与ELK基础

一、redis的集群模式 1.主从复制 &#xff08;1&#xff09;概述 主从模式&#xff1a;这是redis高可用的基础&#xff0c;哨兵和集群都是建立在此基础之上。 主从模式和数据库的主从模式是一样的&#xff0c;主负责写入&#xff0c;然后把写入的数据同步到从服务器&#xff…...

编程日记 2025/7/19 14:06:43

一份关于 Ubuntu 系统下代理配置的故障排查笔记

Ubuntu 网络代理配置与故障排查指南 在使用 Ubuntu 系统时&#xff0c;配置网络代理可以帮助提升网络访问速度或突破网络限制。然而&#xff0c;代理配置过程中可能会遇到各种问题。本文将详细介绍如何在 Ubuntu 下配置网络代理&#xff0c;并提供故障排查的步骤和解决方案。 …...

编程日记 2025/7/15 5:58:49

如何用jmeter工具进行性能测试

前言 今天我们来说说jmeter如何进行性能测试&#xff0c;我们都知道jmeter工具除了可以进行接口功能测试外&#xff0c;还可以进行性能测试。当项目趋于稳定&#xff0c;根据性能需求就可以着手准备性能测试了&#xff0c;今天就说一说jmeter如何进行性能测试&#xff0c;jmet…...

编程日记 2025/7/16 8:30:11

五、Vue 循环语句

文章目录 简介一、基础数组迭代二、对象属性迭代三、整数循环 简介 在 Vue.js 的世界里&#xff0c;当我们需要处理重复性的结构并依据数据动态渲染时&#xff0c;v-for 指令就成了不可或缺的工具&#xff0c;它赋予开发者简洁且强大的能力&#xff0c;轻松应对各种列表渲染场景…...

编程日记 2025/7/19 23:25:08

HMSC联合物种分布模型

联合物种分布模型&#xff08;Joint Species Distribution Modelling&#xff0c;JSDM&#xff09;在生态学领域&#xff0c;特别是群落生态学中发展最为迅速&#xff0c;Hmsc是物种群落分层模型的缩写(Hierarchical Modelling of Species Communities)&#xff0c;它是一种基于…...

编程日记 2025/7/20 5:27:29

【CPU】risc-v指令集和其他指令集的差别(个人草稿)

第三&#xff0c;在 RISC-V 中对于所有指令&#xff0c;要读写的寄存器的标识符总是在同一位置&#xff0c;意味着在解码指令之前&#xff0c;就可以先开始访问寄存器。在许多其他的 ISA 中&#xff0c;某些指令字段在部分指令中被重用作为源目的地&#xff0c;在其他指令中又被…...

编程日记 2025/7/15 11:27:11

处理元素卡在视野边界，滚动到视野内

效果图如下&#xff1a; 本示例处理场景&#xff1a;点击底部的折叠面板&#xff0c;展开后移动端滚动条位置不变&#xff0c;导致展开内容在视图外。造成面板展开无内容的错觉。 处理核心API: IntersectionObserver 此API可绑定元素并监听元素是否在视野内。若在视野外​​​…...

编程日记 2025/7/15 1:29:10

环,域,体,整区,理想,极大理想,

环&#xff1a; 定义&#xff1a; 加法交换群 乘法半群 分配律 域的定义&#xff1a; 加法交换群 乘法群&#xff08;去掉0元是交换群&#xff09; 分配律 Eg:比如整数集合不是域&#xff0c;因为对于乘法来说&#xff0c;去掉0后没有单位元了&#xff0c;但是是环 Eg…...

编程日记 2025/7/17 12:22:17

音视频入门基础：MPEG2-TS专题（22）——FFmpeg源码中，获取TS流的音频信息的实现

音视频入门基础&#xff1a;MPEG2-TS专题系列文章&#xff1a; 音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;1&#xff09;——MPEG2-TS官方文档下载 音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;2&#xff09;——使用FFmpeg命令生成ts文件 音视频入门基础…...

编程日记 2025/7/18 14:52:23

大模型—Ollama 结构化输出

Ollama 结构化输出 Ollama现在支持结构化输出，使得可以按照由JSON模式定义的特定格式来约束模型的输出。Ollama的Python和JavaScript库已经更新，以支持结构化输出。 结构化输出的用例包括： 从文档中解析数据从图像中提取数据结构化所有语言模型响应比JSON模式更可靠和一致开…...

编程日记 2025/7/13 23:33:53

基于Pytorch和yolov8n手搓安全帽目标检测的全过程

一.背景 还是之前的主题&#xff0c;使用开源软件为公司搭建安全管理平台&#xff0c;从视觉模型识别安全帽开始。主要参考学习了开源项目 https://github.com/jomarkow/Safety-Helmet-Detection&#xff0c;我是从运行、训练、标注倒过来学习的。由于工作原因&#xff0c;抽空…...

编程日记 2025/7/14 19:53:02

数据结构与算法基础（C语言版）

参考资料&#xff1a;https://www.bilibili.com/video/BV1GW421A7qY/ 所有代码均已在Ubuntu 20.04.6 LTS中测试通过 逻辑结构与存储结构 逻辑结构 逻辑结构指的是数据对象中数据元素间的相互关系&#xff0c;分为以下四种&#xff1a; 集合结构 集合结构中的数据元素除了同属于…...

编程日记 2025/7/19 1:10:53

Qt监控系统放大招/历经十几年迭代完善/多屏幕辅屏预览/多层级设备树/网络登录和回放

一、前言说明 近期对视频监控系统做了比较大的更新升级&#xff0c;主要就是三点&#xff0c;第一点就是增加了辅屏预览&#xff0c;这个也是好多个客户需要的功能&#xff0c;海康的iVMS-4200客户端就有这个功能&#xff0c;方便在多个屏幕打开不同的视频进行查看&#xff0c…...

编程日记 2025/7/19 10:36:59

使用Locust对MySQL进行负载测试

1.安装环境 pip install locust mysql-connector-python 2.设置测试环境 打开MySQL服务 打开Navicat新建查询&#xff0c;输入SQL语句 3.编写locust脚本 load_mysql.py # codingutf-8 from locust import User, TaskSet, task, between import mysql.connector import ran…...

编程日记 2025/7/20 11:28:38

layui多图上传,tp8后端接收处理

环境&#xff1a;layui2.9.21\thinkphp8.1 前端代码&#xff1a; layui.use([upload, layer], function() {const upload layui.upload;const layer layui.layer;const $ layui.$;// 上传图片const uploadInstImage upload.render({elem: #uploadImage,url: /admin/demo/…...

编程日记 2025/7/18 15:51:06

【Rust自学】8.3. String类型 Pt.1：字符串的创建、更新与拼接

8.3.0. 本章内容 第八章主要讲的是Rust中常见的集合。Rust中提供了很多集合类型的数据结构&#xff0c;这些集合可以包含很多值。但是第八章所讲的集合与数组和元组有所不同。 第八章中的集合是存储在堆内存上而非栈内存上的&#xff0c;这也意味着这些集合的数据大小无需在编…...

编程日记 2025/7/20 10:29:32

Linux（Ubuntu）下ESP-IDF下载与安装完整流程（1）

本文主要看参考官网说明，如下： 快速入门 - ESP32-S3 - — ESP-IDF 编程指南 latest 文档 Linux 和 macOS 平台工具链的标准设置 - ESP32-S3 - — ESP-IDF 编程指南 latest 文档 一、安装准备 为了在ESP32-S3中使用ESP-IDF，需要根据操作系统安装一些软件包。可以参考以下安…...

编程日记 2025/7/15 6:47:03

Android性能优化—— 内存优化

Android 系统中&#xff0c;垃圾回收是自动的&#xff0c;比较隐蔽&#xff0c;这就导致一些内存问题表现的并不明显&#xff0c;出现问题后难以定位。常见的内存问题有内存泄漏、内存溢出&#xff08;Out of Memory&#xff09;、内存抖动等。 我们做内存优化的主要原因有以下…...

编程日记 2025/7/15 7:16:35

【MATLAB第111期】基于MATLAB的sobol全局敏感性分析方法二阶指数计算

【MATLAB第111期】基于MATLAB的sobol全局敏感性分析方法二阶指数计算 一、简介 在MATLAB中计算Sobol二阶效应指数通常涉及到全局敏感性分析&#xff08;Global Sensitivity Analysis, GSA&#xff09;&#xff0c;其中Sobol方法是一种流行的技术&#xff0c;用于评估模型输入…...

编程日记 2025/7/14 12:36:58

【Scala】图书项目系统代码演练3.1/BookService

package org.app package serviceimport models.{BookModel, BorrowRecordModel}import org.app.dao.{BookDAO, BorrowRecordDAO}import java.time.LocalDateTime import scala.collection.mutable.ListBuffer// 图书业务逻辑层 class BookService {private val bookDAO new B…...

编程日记 2025/7/15 17:10:10