30分钟学会css
CSS 基本语法
CSS(Cascading Style Sheets)是一种样式表语言,用于描述 HTML(或 XML)文档的呈现。它可以控制网页元素的颜色、字体、布局等外观样式,实现内容与表现的分离,让网页设计更加灵活和高效。
在线体验一下 CSS 在线编辑器。
千万不要被「样式表」、「语言」吓到,CSS 的语法也很直观,常用的规则结构并不复杂,用于日常网页美化绰绰有余,花一点时间就能建立基本概念。
就是这些基本的规则结构,却能让人优雅地控制网页的呈现,专注于样式设计而不是混淆内容结构,达到“心中有版,落笔生花”的境界。
CSS 选择器语法
要为 HTML 元素添加样式,首先需要选中这些元素。CSS 使用选择器来定位要应用样式的 HTML 元素。
CSS 语法 | 作用 | 示例 |
---|---|---|
element | 选择所有指定的 HTML 元素 | p { color: blue; } |
.class | 选择带有指定 class 属性的所有 HTML 元素 | .highlight { font-weight: bold; } |
#id | 选择带有指定 id 属性的 HTML 元素 | #header { background-color: #eee; } |
* | 选择文档中的所有 HTML 元素 | * { margin: 0; padding: 0; } |
element, element | 选择所有指定的 HTML 元素 (分组选择) | h1, h2 { color: green; } |
element element | 选择指定元素内的所有指定后代元素 | div p { font-size: 16px; } |
element > element | 选择指定父元素下的直接子元素 | ul > li { list-style-type: none; } |
element + element | 选择紧接在指定元素后的同级元素 | h2 + p { text-indent: 2em; } |
element ~ element | 选择指定元素后的所有同级元素 | h2 ~ p { color: gray; } |
[attribute] | 选择带有指定属性的 HTML 元素 | a[target] { text-decoration: none; } |
[attribute=value] | 选择带有指定属性和值的 HTML 元素 | input[type="text"] { border: 1px solid black; } |
[attribute~=value] | 选择属性值包含指定词的元素 | a[class~="button"] { padding: 5px; } |
`[attribute | =value]` | 选择属性值以指定值开头的元素 |
element:pseudo-class | 选择指定元素的特殊状态 | a:hover { color: red; } |
element::pseudo-element | 选择指定元素的某个部分 | p::first-line { font-weight: bold; } |
可选语法 (无直接对应,此处强调选择器多样性)
CSS 的选择器机制非常强大,除了上述基本类型,还有更复杂的选择器组合和伪类/伪元素可以使用,以更精确地定位元素。
最佳实践
为了代码的可读性和维护性,建议使用语义化的 class 名称,避免过度使用 ID 选择器,并合理利用选择器的优先级规则。
✅ Do this | ❌ Don’t do this |
---|---|
.product-title { ... } | #productTitle { ... } (除非必要) |
.btn-primary { ... } | .button1 { ... } (语义不明确) |
CSS 属性与值
选中元素后,就可以使用 CSS 属性来设置元素的样式。每个属性都有一个或多个值,用于指定属性的具体表现。
CSS 语法 | HTML (无直接对应,描述作用) | 预览效果 (描述性) |
---|---|---|
color: blue; | 设置文本颜色为蓝色 | 文本显示为蓝色 |
font-size: 16px; | 设置字体大小为 16 像素 | 文本显示为 16 像素大小 |
background-color: #f0f0f0; | 设置背景颜色为浅灰色 | 元素背景显示为浅灰色 |
width: 100px; | 设置元素宽度为 100 像素 | 元素宽度为 100 像素 |
height: auto; | 设置元素高度为自动 | 元素高度根据内容自动调整 |
margin: 10px; | 设置元素外边距为 10 像素 | 元素周围有 10 像素的空白 |
padding: 5px; | 设置元素内边距为 5 像素 | 元素内容与边框之间有 5 像素的空白 |
border: 1px solid black; | 设置边框为 1 像素实线黑色 | 元素有 1 像素的黑色实线边框 |
text-align: center; | 设置文本居中对齐 | 元素内的文本居中显示 |
display: block; | 设置元素为块级元素 | 元素独占一行,可以设置宽高 |
display: inline; | 设置元素为行内元素 | 元素与其他行内元素共享一行,无法设置宽高 |
display: inline-block; | 设置元素为行内块级元素 | 元素像行内元素一样排列,但可以设置宽高 |
属性(Property)用法的最佳实践
合理使用 CSS 属性,遵循语义化原则,避免过度使用行内样式,并使用简写属性来提高效率。
✅ Do this | ❌ Don’t do this |
---|---|
margin: 10px 20px; (上下 10px,左右 20px) | margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; |
使用外部 CSS 文件 | 大量使用行内样式 (<p style="..."> ) |
CSS 常用单位
在 CSS 中,许多属性值需要指定单位。常见的单位包括像素 (px)、百分比 (%)、em、rem 等。
CSS 单位 | 说明 | 示例 |
---|---|---|
px | 像素,绝对单位,在不同设备上大小固定 | font-size: 16px; |
% | 百分比,相对于父元素的尺寸 | width: 50%; |
em | 相对单位,相对于当前元素的字体大小 | padding: 2em; |
rem | 相对单位,相对于根元素 (html) 的字体大小 | font-size: 1.2rem; |
vw | 视口宽度 (viewport width) 的百分比 | width: 50vw; |
vh | 视口高度 (viewport height) 的百分比 | height: 100vh; |
vmin | 视口宽度和高度中较小者的百分比 | max-width: 80vmin; |
vmax | 视口宽度和高度中较大者的百分比 | max-height: 90vmax; |
pt | 磅,绝对单位,主要用于打印 | font-size: 12pt; |
pc | 派卡,绝对单位,1pc = 12pt | font-size: 1pc; |
in | 英寸,绝对单位 | width: 1in; |
cm | 厘米,绝对单位 | width: 2.54cm; |
mm | 毫米,绝对单位 | width: 10mm; |
单位(Unit)用法的最佳实践
在网页设计中,推荐使用相对单位(如 em、rem、%)来实现页面的响应式布局和更好的用户体验。rem
通常用于设置字体大小,而 %
则常用于设置宽度和高度。
✅ Do this | ❌ Don’t do this |
---|---|
font-size: 1rem; | font-size: 16px; (不利于用户调整字体) |
width: 100%; | width: 960px; (可能在小屏幕上溢出) |
CSS 颜色表示
CSS 提供了多种表示颜色的方式。
CSS 语法 | HTML (无直接对应) | 预览效果 (描述性) |
---|---|---|
color: blue; | 使用预定义的颜色名称 | 文本显示为蓝色 |
color: #0000FF; | 使用十六进制颜色值 | 文本显示为蓝色 |
color: #00F; | 使用三位十六进制简写 | 文本显示为蓝色 |
color: rgb(0, 0, 255); | 使用 RGB 函数 | 文本显示为蓝色 |
color: rgba(0, 0, 255, 0.5); | 使用 RGBA 函数 (带透明度) | 文本显示为半透明的蓝色 |
color: hsl(240, 100%, 50%); | 使用 HSL 函数 | 文本显示为蓝色 |
color: hsla(240, 100%, 50%, 0.5); | 使用 HSLA 函数 (带透明度) | 文本显示为半透明的蓝色 |
颜色(Color)用法的最佳实践
根据具体需求选择合适的颜色表示方法。十六进制颜色值常用于精确的颜色定义,而 RGBA 和 HSLA 则适用于需要透明度的场景。
✅ Do this | ❌ Don’t do this |
---|---|
background-color: rgba(0, 0, 0, 0.8); | background-color: black; opacity: 0.8; (可能影响子元素) |
使用有意义的颜色变量 | 在代码中硬编码大量的颜色值 |
CSS 注释
CSS 注释用于在样式表中添加说明,不会被浏览器解析。
/* 这是一行 CSS 注释 *//** 这是一个* 多行 CSS 注释*/
注释(Comment)用法的最佳实践
编写清晰的 CSS 注释,解释代码的作用和意图,提高代码的可读性和可维护性。
✅ Do this | ❌ Don’t do this |
---|---|
/* 设置导航栏的样式 */ | /* 样式 */ (过于简单,没有提供足够的信息) |
/* 修复了在 IE 浏览器下的显示问题 */ | 避免在注释中包含不友好的或攻击性的言论 |
CSS 盒模型
CSS 盒模型描述了 HTML 元素周围生成的矩形盒子。它由内容 (content)、内边距 (padding)、边框 (border) 和外边距 (margin) 组成。
+-----------------+
| Margin | 外边距
+-----------------+
| Border | 边框
+-----------------+
| Padding | 内边距
+-----------------+
| Content | 内容
+-----------------+
盒模型(Box Model)用法的最佳实践
理解盒模型对于进行网页布局至关重要。可以通过调整 box-sizing
属性来改变盒模型的计算方式,更方便地控制元素的尺寸。
✅ Do this | ❌ Don’t do this |
---|---|
使用 box-sizing: border-box; | 混淆 content-box 和 border-box 的计算方式 |
合理设置 margin 和 padding 来控制间距 | 过度依赖 margin 或 padding 来实现布局 |
CSS 优先级与继承
当多个 CSS 规则应用于同一个 HTML 元素时,浏览器会根据优先级规则来确定最终应用的样式。继承是指某些 CSS 属性会从父元素传递到子元素。
优先级由高到低:
- 内联样式 (HTML 元素中的
style
属性) - ID 选择器 (
#id
) - 类选择器 (
.class
)、属性选择器 ([attribute]
)、伪类选择器 (:hover
) - 元素选择器 (
element
)、伪元素选择器 (::before
) - 通配符选择器 (
*
) - 浏览器默认样式
优先级与继承用法的最佳实践
理解 CSS 的优先级和继承机制,可以避免样式冲突,并编写更简洁、可维护的 CSS 代码。
✅ Do this | ❌ Don’t do this |
---|---|
合理利用选择器的优先级来覆盖样式 | 过度使用 !important 来提升优先级 (除非必要) |
充分利用 CSS 的继承特性,减少重复代码 | 在每个元素上重复设置相同的样式 |
CSS 引入方式
CSS 可以通过三种方式引入到 HTML 文档中:
- 内联样式: 直接在 HTML 元素的
style
属性中定义样式。<p style="color: red;">这段文字是红色的。</p>
- 内部样式表: 在 HTML 文档的
<head>
标签中使用<style>
标签定义样式。<head><style>p { color: blue; }</style> </head>
- 外部样式表: 将 CSS 样式定义在一个单独的
.css
文件中,然后在 HTML 文档的<head>
标签中使用<link>
标签引入。<head><link rel="stylesheet" href="style.css"> </head>
引入方式(Include)用法的最佳实践
推荐使用外部样式表来组织 CSS 代码,实现内容与样式的完全分离,提高代码的可维护性和可复用性。
✅ Do this | ❌ Don’t do this |
---|---|
使用外部 CSS 文件 | 在多个 HTML 文件中重复编写相同的内部样式表 |
少量、局部的样式可以使用内联样式 | 大量使用内联样式,导致 HTML 代码臃肿且难以维护 |
掌握这些简单的规则结构,你就能优雅地控制网页的呈现,专注于样式设计而不是混淆内容结构,达到“心中有版,落笔生花”的境界。
相关文章:
30分钟学会css
CSS 基本语法 CSS(Cascading Style Sheets)是一种样式表语言,用于描述 HTML(或 XML)文档的呈现。它可以控制网页元素的颜色、字体、布局等外观样式,实现内容与表现的分离,让网页设计更加灵活和…...
若依修改超级管理员admin的密码
通过接口方式或者页面 /system/user/resetPwd 需改其他用户的密码 修改其他用户的加密的密码,然后通过数据库将admin更新为这个密码就修改好了...
《柴油遗产-无耻时代》V98375官方版
靠近你所在赛道上的另一名玩家进行攻击或防守,跳到另一条赛道上进行恢复,或闪到对手背后打他个措手不及。与队友合作,充分利用每个角色的独特玩法来控制战斗走向! 《柴油遗产-无耻时代》官方版 https://pan.xunlei.com/s/VODW7xDX…...
加固服务器有什么用?
为什么越来越多的企业和个人都在加固他们的服务器?加固服务器不仅可以保护数据安全,还能提升整体系统的稳定性和可靠性。下面是聚名网的一些介绍。 加固服务器的首要目的就是提高安全性。随着网络攻击手段的不断演变,黑客和恶意软件的威胁也…...
Json字符串解析失败
通过第三方服务,拿到响应体的data对象(拿到的时候对象是有值的) 通过JSON.parseObject方法,拿到的对象,值为null 通过查看对应的json字符串,发现命名不一样... JSONField SeriealizedName注解是用来解析j…...
比较 FreeSWITCH 的 asr 事件和回调函数
用 lua 来描述,是这样的 第一种做法: session:setVariable("fire_asr_events", "true") session:execute("detect_speech", "start-input-timers") 识别到结果之后可以收到 DETECTED_SPEECH 事件 另外一个做法…...
Pytorch 三小时极限入门教程
一、引言 在当今的人工智能领域,深度学习占据了举足轻重的地位。而 Pytorch 作为一款广受欢迎的深度学习框架,以其简洁、灵活的特性,吸引了大量开发者投身其中。无论是科研人员探索前沿的神经网络架构,还是工程师将深度学习技术落…...
125个Docker的常用命令
基本命令命令描述示例docker run创建并启动一个容器docker run -it ubuntu bashdocker ps列出当前运行的容器docker psdocker ps -a列出所有容器,包括未运行的docker ps -adocker stop停止一个运行中的容器docker stop [CONTAINER_ID]docker start启动一个已停止的容…...
C# 设计模式(结构型模式):组合模式
C# 设计模式(结构型模式):组合模式 在软件设计中,有时我们需要处理的是一组对象,而这些对象既可以是单独的元素,也可以是由多个子元素组成的复合体。这时,组合模式(Composite Patte…...
【HarmonyOS】:DevEco Studio安装与应用工程创建指南
前言 本文旨在为初涉 HarmonyOS 开发的开发者提供一份详尽的入门指南,涵盖从安装最新版 DevEco Studio 到使用该 IDE 创建首个应用工程的具体步骤。通过遵循本指南,您将能够顺利搭建起自己的开发环境,并迈出构建HarmonyOS应用的第一步。 一、…...
【C/C++】手搓项目中常用小工具:日志、sqlit数据库、Split切割、UUID唯一标识
每日激励:“不设限和自我肯定的心态:I can do all things。 — Stephen Curry” 绪论: 本章将写到一些手搓常用工具,方便在项目中的使用,并且在手搓的过程中一些函数如:日志 宏中的__VA_ARGS__接收可变参…...
【论文阅读】Anchor-based fast spectral ensemble clustering
论文地址:Anchor-based fast spectral ensemble clustering - ScienceDirect 代码地址: 摘要 集成聚类通过融合多个基础聚类方法,可以获得更好且更稳健的结果,因此受到广泛关注。尽管近年来已经出现了许多代表性的算法ÿ…...
asp.net core 发布到iis后,一直500.19,IIS设置没问题,安装了sdk,文件夹权限都有,还是报错
原因就是没有安装ASP.NET Core 9.0 Runtime (v9.0.0) - Windows Hosting Bundle,我是只安装了.net core的sdk,下面介绍下sdk和hosting bundle的关系 在 .NET Core 和 ASP.NET Core 的开发中,SDK(Software Development Kit&#x…...
牛客月赛108
目录 A. 小S按按钮 C. 小T数星星 E. 小M种树 A. 小S按按钮 (1) 二分答案的右边界一定要开大。若 x 等于 0,最多 2 * y 次 (2)根据是要最小还是最多,调整 if ( check ( mid ) ) 里的是 l 还是 r #include&l…...
QML自定义进度条和单选按钮的样式
1.自定义进度条的样式 1.1代码展示 import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.1Window {visible: truewidth: 640height: 480title: qsTr("Hello World")ProgressBar {id: myProgressvalue: 0.5padding: 2anchors.centerIn: parent…...
jetbrain 安装 copilot
问题一:Sign in failed. Reason: Request signInInitiate failed with message: Request to /github.com/login/device/code> timed out after 30000ms, request id: 11, error code: -32603 解决方案: 参考资料:https://github.com/orgs/…...
FPGA 4x4矩阵键盘 实现
1原理 FPGA(现场可编程门阵列)4x4矩阵键盘的实现原理主要基于行列扫描法,通过FPGA对键盘的扫描和识别,实现对键盘输入信号的采集和处理。以下是对FPGA 4x4矩阵键盘实现原理的详细解释: 一、矩阵键盘的基本原理 结构:4x4矩阵键盘由4行和4列组成,共16个按键。每个按键位…...
探索 JMeter While Controller:循环测试的奇妙世界
嘿,宝子们!今天咱们就来聊聊 JMeter 里超级厉害的 While 控制器,它就像是一把神奇的钥匙,能帮我们打开循环测试的大门,模拟出各种各样复杂又有趣的场景哦! 一、While 控制器初印象 想象一下,你…...
Facebook元宇宙项目中的智能合约应用:提升虚拟空间的自治能力
近年来,Facebook在元宇宙领域的探索引起了广泛关注。元宇宙是一个融合虚拟现实(VR)、增强现实(AR)和互联网的沉浸式数字空间。在这个过程中,智能合约技术被认为是提升虚拟空间自治能力的关键工具。通过自动…...
前后端规约
文章目录 引言I 【强制】前后端交互的 API请求内容响应体响应码II 【推荐】MVC响应体III【参考】IV 其他引言 服务器内部重定向必须使用 forward;外部重定向地址必须使用 URL 统一代理模块生成,否则会因线上采用 HTTPS 协议而导致浏览器提示“不安全”,并且还会带来 URL 维护…...
获取 Astro Bot AI 语音来增强您的游戏体验!
有很多用户尝试过Astro Bot,却被Astro Bot可爱的声音所吸引。您是否想知道如何使用 Astro Bot 语音来拨打恶作剧电话或用他的声音说话?如果您有,那么这篇文章适合您。我们将向您展示如何为 Astro Bot 提供逼真的 AI 声音并在在线对话中使用它…...
javaEE-多线程进阶-JUC的常见类
juc:指的是java.util.concurrent包,该包中加载了一些有关的多线程有关的类。 目录 一、Callable接口 FutureTask类 参考代码: 二、ReentrantLock 可重入锁 ReentrantLock和synchronized的区别: 1.ReentantLock还有一个方法:…...
nginx配置 - 资源参数配置(性能优化)
nginx - 资源参数配置 (性能优化) 一、worker_rilimit_nofile配置的含义使用场景如何调整参数系统级文件描述符限制(补充)二、worker_connections三、两者之间的数值关系四、sendfile五、keepalive_timeout本文重点讨论: 最大文件描述符数量 worker_rilimit_nofile和最大连…...
TiDB 升级至高版本提示'mysql.tidb_runaway_watch' doesn't exist 问题处理
作者: asd80703406 原文来源: https://tidb.net/blog/90394c97 背景 近期发现很多人从低版本升级至TiDB v7 或者v8版本,均遇到了tidb-server启动失败,提示报错如下: ["get runaway watch record failed"…...
利用Deeplearning4j进行 图像识别
目录 图像识别简介 神经网络 感知器 前馈神经网络 自动编码器 受限玻尔兹曼机 深度卷积网络 理解图像内容以及图像含义方面,计算机遇到了很大困难。本章先介绍计算机理解图像教育方面 遇到的难题,接着重点讲解一个基于深度学习的解决方法。我们会…...
使用Python构建智能医疗诊断系统
医疗诊断系统在现代医疗领域中扮演着重要角色,尤其在辅助医生进行初步诊断、缩短诊断时间方面更是发挥了显著作用。借助Python强大的数据处理能力和机器学习工具,我们可以构建一个智能医疗诊断系统。本文将详细介绍实现过程,并结合代码示例帮助您理解。 引言 现代医学产生…...
NLP 技术的突破与未来:从词嵌入到 Transformer
在过去的十年中,自然语言处理(NLP)经历了深刻的技术变革。从早期的统计方法到深度学习的应用,再到如今Transformer架构的普及,NLP 的发展不仅提高了模型的性能,还扩展了其在不同领域中的应用边界。 1. 词嵌…...
【2024年-11月-9日-开源社区openEuler实践记录】OpenAMDC:开启智能边缘计算与系统管控的新征程
一、开篇:邂逅 OpenAMDC 大家好,我是 fzr123,在开源项目的浩瀚天地里持续探索,今天要带大家深入了解一项极具前瞻性与创新性的开源成果——OpenAMDC。在边缘计算蓬勃兴起、系统复杂度与日俱增的时代背景下,OpenAMDC 宛…...
ELK日志平台搭建 (最新版)
一、安装 JDK 1. 下载 JDK 21 RPM 包 wget https://download.oracle.com/java/21/latest/jdk-21_linux-x64_bin.rpm2. 安装 JDK 21,使用 rpm 命令安装下载的 RPM 包: sudo rpm -ivh jdk-21_linux-x64_bin.rpm3. 配置环境变量 编辑 /etc/profile 文件以配置 JAVA_HO…...
蓝桥杯备赛:C++基础,顺序表和vector(STL)
目录 一.C基础 1.第一个C程序: 2.头文件: 3.cin和cout初识: 4.命名空间: 二.顺序表和vector(STL) 1.顺序表的基本操作: 2.封装静态顺序表: 3.动态顺序表--vector:…...
MySQL数据库——常见慢查询优化方式
本文详细介绍MySQL的慢查询相关概念,分析步骤及其优化方案等。 文章目录 什么是慢查询日志?慢查询日志的相关参数如何启用慢查询日志?方式一:修改配置文件方式二:通过命令动态启用 分析慢查询日志方式一:直…...
【NX入门篇】
NX入门篇 一、UG NX 由来二、软件如何启动(UG NX 12.0)三、使用步骤四、常用命令 一、UG NX 由来 UG NX由来: 1969 年:UG 的开发始于美国麦道航空公司,基于 C 语言开发实现;1976 年:UG问世&am…...
卡码网 ACM答题编程模板
背景: input() 在 ACM 编程中的底层调用原理 1. input() 的核心原理 在 Python 中,input() 的底层实现依赖于标准输入流 sys.stdin。每次调用 input() 时,Python 会从 sys.stdin 中读取一行字符串,直到遇到换行符 \n 或文件结束…...
vue代理问题
vue代理问题 场景:前后端分离项目问题,在前端中请求接口,返回数据这个过程,但是在这个过程中,前端会有两个环境,一个是开发环境,一个是生产环境. 在开发环境中请求接口可能会遇到跨域问题,比如请求的端口是3000,当前端口是8080,这时候就会遇到跨域问题,或者ip不同,也会存在跨…...
软考 高级 架构师 第十 章软件工程3
1.系统测试 系统测试是为了发现错误而执行程序的过程,成功的测试是发现了至今尚未被发现的错误的测试。 测试原则: 1)应尽早并不断的进行测试 2)测试工作应避免由原开发软件的人或小组承担 3)在 设计测试方案时&#…...
GoF23种设计模式 简介
文章目录 面向对象(OO)设计原则(7)单一职责原则开闭原则里氏代换原则依赖倒转原则接口隔离原则合成复用原则迪米特法则 创建型模式 (5)工厂方法模式 (类模式,其余都是对象模式)抽象工厂模式建造…...
【FlutterDart】页面切换 PageView PageController(9 /100)
上效果: 有些不能理解官方例子里的动画为什么没有效果,有可能是我写法不对 后续如果有动画效果修复了,再更新这篇,没有动画效果,总觉得感受的丝滑效果差了很多 上代码: import package:flutter/material.…...
旧服务改造及微服务架构演进
旧服务改造及微服务架构演进 微服务架构演进1.微服务架构2.微服务架构的特点3.单体架构与微服务架构之间的对比4.微服务架构演进历程 旧服务改造1. 微服务拆分的一些通用原则2.微服务拆分策略(1)功能维度拆分策略(2)非功能维度拆分…...
数据结构复习 (顺序查找,对半查找,斐波那契查找,插值查找,分块查找)
查找(检索): 定义:从给定的数据中找到对应的K 1,顺序查找: O(n)的从前向后的遍历 2,对半查找,要求有序 从中间开始查找,每次检查中间的是否正确,不正确就…...
根据docker file 编译镜像
比如给到一个Dockerfile 第一步编译镜像 cd /path/to/Dockerfiledocker build -t <DOCKER_IMAGE_NAME> . build 命令编译镜像 -t 镜像名字 . 指dockerfile 所在目录 如果遇到报错 [] Building 0.3s (3/3) FINISHED …...
C语言:调试的概念和调试器的选择
所谓调试(Dubug),就是跟踪程序的运行过程,从而发现程序的逻辑错误(思路错误),或者隐藏的缺陷(Bug)。 在调试的过程中,我们可以监控程序的每一个细节ÿ…...
Vulnhub靶场(Earth)
项目地址 https://download.vulnhub.com/theplanets/Earth.ova.torrent 搭建靶机 官网下载.ova文件双击vm打开导入 获取靶机IP kail终端输入 arp-scan -l 获取靶机 IP 192.168.131.184 信息收集 端口扫描 sudo nmap -sC -sV -p- 192.168.131.184 可以看到开启22端口&…...
rsync命令常用同步方案
rsync是一个高效的文件同步工具,广泛应用于本地和远程备份、镜像及同步任务。它通过增量同步、压缩传输以及远程协议(如SSH)等技术,显著提高了文件传输的效率。本文将介绍rsync命令的常用参数、工作原理、常见同步方案,…...
【Ubuntu】 Ubuntu22.04搭建NFS服务
安装NFS服务端 sudo apt install nfs-kernel-server 安装NFS客户端 sudo apt install nfs-common 配置/etc/exports sudo vim /etc/exports 第一个字段:/home/lm/code/nfswork共享的目录 第二个字段:指定哪些用户可以访问 * 表示所有用户都可以访…...
Python自学 - 递归函数
1 Python自学 - 递归函数 递归函数是一种在函数体内调用自己的函数,就像“左脚踩着右脚,再右脚踩着左脚… 嗯,你就可以上天了!”。递归函数虽然不能上天,但在处理某些场景时非常好用, 一种典型的场景就是遍…...
后端开发入门超完整速成路线(算法篇)
引言 后端开发是软件开发中不可或缺的一部分,它涉及到服务器、数据库、API等核心组件的构建和维护。对于初学者来说,掌握算法和数据结构是进入后端开发领域的基础。本文将为你提供一个超完整的算法学习路线,帮助你快速入门,并在文…...
51单片机——共阴数码管实验
数码管中有8位数字,从右往左分别为LED1、LED2、...、LED8,如下图所示 如何实现点亮单个数字,用下图中的ABC来实现 P2.2管脚控制A,P2.3管脚控制B,P2.4管脚控制C //定义数码管位选管脚 sbit LSAP2^2; sbit LSBP2^3; s…...
使用Clion在ubuntu上进行交叉编译,并在Linux上远程编译五子棋
目录 1.工具以及概念介绍 (1)Clion软件简介 (2)交叉编译 (3)远程编译 2.操作原理 3.详细操作步骤 (1)配置Clion与虚拟机ubuntu的ssh连接 CLion远程开发Ubuntu,并显…...
高并发写利器-组提交,我的Spring组件实战
高并发写优化理论 对于高并发的读QPS优化手段较多,最经济简单的方式是上缓存。但是对于高并发写TPS该如何提升?业界常用的有分库分表、异步写入等技术手段。但是分库分表对于业务的改造十分巨大,涉及迁移数据的麻烦工作,不会作为…...
Stable Diffusion的简单介绍
Stable Diffusion 是一款免费、开源的 AI 图像生成器,由 Stability AI 公司于 2022 年 8 月推出1。以下是关于它的详细介绍: 目录 工作原理 特点 应用场景 主要版本 工作原理 Stable Diffusion 属于潜在扩散模型,主要由三部分组成&…...