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

CSS基础知识学习指南

news 文章来源：https://blog.csdn.net/abments/article/details/140122422 2024/7/7 15:31:26

CSS基础知识学习指南

1. 介绍

CSS（层叠样式表）是用于描述HTML文档的呈现样式的语言。通过CSS，可以控制网页的布局、颜色、字体等各种样式，使得网页更加美观和用户友好。

2. CSS基础语法

CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，声明块则包含样式的属性和值。

选择器 {属性: 值;
}

例如：

p {color: blue;font-size: 14px;
}

上述CSS规则将所有<p>元素的文本颜色设置为蓝色，字体大小设置为14像素。

3. 引入CSS

有三种方式可以将CSS引入到HTML文档中：内联样式、内部样式表和外部样式表。

3.1. 内联样式

内联样式使用style属性直接在HTML元素中定义样式。

<p style="color: blue; font-size: 14px;">这是一个段落。</p>

3.2. 内部样式表

内部样式表使用<style>标签在HTML文档的<head>部分定义样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>p {color: blue;font-size: 14px;}</style><title>CSS基础学习</title>
</head>
<body><p>这是一个段落。</p>
</body>
</html>

3.3. 外部样式表

外部样式表将CSS规则定义在单独的文件中，通过<link>标签将其引入HTML文档。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>CSS基础学习</title>
</head>
<body><p>这是一个段落。</p>
</body>
</html>

styles.css文件内容：

p {color: blue;font-size: 14px;
}

4. 选择器

CSS选择器用于选择要应用样式的HTML元素。

4.1. 元素选择器

元素选择器根据HTML标签名选择元素。

p {color: blue;
}

4.2. 类选择器

类选择器根据HTML元素的class属性选择元素，使用.符号。

.intro {color: green;
}

<p class="intro">这是一个带有类选择器的段落。</p>

4.3. ID选择器

ID选择器根据HTML元素的id属性选择元素，使用#符号。

#unique {color: red;
}

<p id="unique">这是一个带有ID选择器的段落。</p>

4.4. 属性选择器

属性选择器根据HTML元素的属性选择元素。

a[href] {color: orange;
}

<a href="https://www.example.com">这是一个带有属性选择器的链接。</a>

4.5. 组合选择器

组合选择器用于选择多种条件的元素。

/* 后代选择器 */
div p {color: blue;
}/* 子选择器 */
div > p {color: green;
}/* 相邻兄弟选择器 */
h1 + p {color: red;
}/* 普通兄弟选择器 */
h1 ~ p {color: purple;
}

<div><p>这是一个段落，属于div的后代。</p><p>这是一个段落，属于div的子元素。</p>
</div>
<h1>这是一个标题。</h1>
<p>这是一个段落，属于h1的相邻兄弟元素。</p>
<p>这是一个段落，属于h1的普通兄弟元素。</p>

5. 颜色

CSS允许使用颜色名称、十六进制值、RGB、RGBA、HSL和HSLA定义颜色。

/* 颜色名称 */
p {color: red;
}/* 十六进制 */
h1 {color: #00ff00;
}/* RGB */
h2 {color: rgb(0, 0, 255);
}/* RGBA */
div {background-color: rgba(255, 0, 0, 0.5);
}/* HSL */
span {color: hsl(120, 100%, 50%);
}/* HSLA */
section {background-color: hsla(240, 100%, 50%, 0.3);
}

6. 字体

CSS提供了多种字体相关的属性。

6.1. 字体系列

font-family属性指定元素的字体系列。

p {font-family: Arial, sans-serif;
}

6.2. 字体大小

font-size属性指定元素的字体大小。

h1 {font-size: 2em;
}p {font-size: 16px;
}

6.3. 字体样式

font-style属性指定元素的字体样式。

p {font-style: italic;
}

6.4. 字体粗细

font-weight属性指定元素的字体粗细。

h1 {font-weight: bold;
}p {font-weight: 700;
}

6.5. 文本对齐

text-align属性指定元素的文本对齐方式。

p {text-align: center;
}

6.6. 文本装饰

text-decoration属性用于添加文本装饰，如下划线、上划线和删除线。

a {text-decoration: none;
}p {text-decoration: underline;
}

6.7. 文本变换

text-transform属性用于控制文本的大小写。

p {text-transform: uppercase;
}

6.8. 字母间距和行高

letter-spacing属性用于控制字母间距，line-height属性用于控制行高。

p {letter-spacing: 2px;line-height: 1.5;
}

7. 背景

CSS提供了多种背景相关的属性。

7.1. 背景颜色

background-color属性指定元素的背景颜色。

div {background-color: lightblue;
}

7.2. 背景图像

background-image属性指定元素的背景图像。

body {background-image: url('background.jpg');
}

7.3. 背景重复

background-repeat属性指定背景图像的重复方式。

body {background-image: url('background.jpg');background-repeat: no-repeat;
}

7.4. 背景位置

background-position属性指定背景图像的位置。

body {background-image: url('background.jpg');background-position: center;
}

7.5. 背景尺寸

background-size属性指定背景图像的尺寸。

body {background-image: url('background.jpg');background-size: cover;
}

8. 边框

CSS提供了多种边框相关的属性。

8.1. 边框样式

border-style属性指定边框的样式。

div {border-style: solid;
}

8.2. 边框宽度

border-width属性指定边框的宽度。

div {border-width: 2px;
}

8.3. 边框颜色

border-color属性指定边框的颜色。

div {border-color: blue;
}

8.4. 简写属性

border属性用于简写边框的样式、宽度和颜色。

div {border: 2px solid blue;
}

8.5. 圆角边框

border-radius属性指定圆角边框的半径。

div {border-radius: 10px;
}

9. 外边距和内边距

外边距（margin）和内边距（padding）用于控制元素的外部和内部空间。

9.1. 外边距

margin属性指定元素的外部空间。外边距可以单独设置，也可以使用简写属性。

/* 单独设置 */
div {margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 20px;
}/* 简写属性 */
div {margin: 10px 20px;
}

上述代码将元素的上下外边距设置为10像素，左右外边距设置为20像素。

9.2. 内边距

padding属性指定元素的内部空间。内边距也可以单独设置或使用简写属性。

/* 单独设置 */
div {padding-top: 10px;padding-right: 20px;padding-bottom: 10px;padding-left: 20px;
}/* 简写属性 */
div {padding: 10px 20px;
}

上述代码将元素的上下内边距设置为10像素，左右内边距设置为20像素。

10. 布局

CSS提供了多种布局方式，用于控制网页元素的排列和显示。

10.1. 浮动布局

float属性用于将元素从正常的文档流中移出，并将其浮动到容器的左侧或右侧。

img {float: left;margin-right: 10px;
}

<img src="example.jpg" alt="示例图像">
<p>这是一个带有浮动图像的段落。</p>

10.2. 定位布局

CSS提供了四种定位方式：静态定位、相对定位、绝对定位和固定定位。

/* 静态定位（默认） */
div {position: static;
}/* 相对定位 */
div {position: relative;top: 10px;left: 10px;
}/* 绝对定位 */
div {position: absolute;top: 50px;left: 50px;
}/* 固定定位 */
div {position: fixed;bottom: 0;right: 0;
}

10.3. Flexbox布局

Flexbox布局是一种一维布局模型，用于创建灵活和高效的布局。

.container {display: flex;justify-content: center;align-items: center;height: 100vh;
}.item {background-color: lightcoral;padding: 20px;margin: 10px;
}

<div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>

10.4. Grid布局

Grid布局是一种二维布局模型，用于创建复杂的布局。

.container {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px;
}.item {background-color: lightseagreen;padding: 20px;
}

<div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>

11. 过渡与动画

CSS提供了过渡和动画，用于实现元素的动态效果。

11.1. 过渡

transition属性用于定义元素的过渡效果。

button {background-color: blue;transition: background-color 0.5s ease;
}button:hover {background-color: green;
}

<button>鼠标悬停按钮</button>

11.2. 动画

animation属性用于定义元素的动画效果。

@keyframes example {0% {background-color: red;left: 0px;top: 0px;}100% {background-color: yellow;left: 200px;top: 200px;}
}div {position: absolute;animation: example 5s infinite;
}

<div style="width:100px;height:100px;background-color:red;"></div>

12. 媒体查询

媒体查询用于根据设备的特性（如宽度、高度）应用不同的样式，实现响应式设计。

body {background-color: lightblue;
}@media screen and (max-width: 600px) {body {background-color: lightgreen;}
}

<p>调整浏览器窗口的宽度查看背景颜色的变化。</p>

13. 伪类和伪元素

CSS伪类和伪元素用于选择元素的特定状态或部分。

13.1. 伪类

伪类用于选择元素的特定状态。

a:link {color: blue;
}a:visited {color: purple;
}a:hover {color: red;
}a:active {color: green;
}

13.2. 伪元素

伪元素用于选择元素的特定部分。

p::first-line {color: blue;font-weight: bold;
}p::first-letter {color: red;font-size: 2em;
}

14. 表格样式

CSS提供了多种属性用于美化表格。

table {width: 100%;border-collapse: collapse;
}th, td {border: 1px solid black;padding: 8px;text-align: left;
}th {background-color: lightgray;
}

<table><tr><th>姓名</th><th>年龄</th><th>城市</th></tr><tr><td>John Doe</td><td>30</td><td>New York</td></tr><tr><td>Jane Smith</td><td>25</td><td>Los Angeles</td></tr>
</table>

15. 表单样式

CSS提供了多种属性用于美化表单元素。

input[type="text"], input[type="password"], textarea {width: 100%;padding: 10px;margin: 5px 0 10px 0;border: 1px solid #ccc;box-sizing: border-box;
}button {background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;
}button:hover {background-color: #45a049;
}

<form><label for="username">用户名:</label><input type="text" id="username" name="username" required><label for="password">密码:</label><input type="password" id="password" name="password" required><button type="submit">登录</button>
</form>

16. 图像和媒体

CSS提供了多种属性用于控制图像和其他媒体元素的显示。

16.1. 图像大小

width和height属性用于控制图像的大小。

img {width: 100px;height: auto;
}

16.2. 媒体查询

使用媒体查询可以根据屏幕大小调整图像的显示。

img {width: 100%;height: auto;
}@media screen and (max-width: 600px) {img {width: 50%;}
}

16.3. 背景图像

background-image属性用于为元素设置背景图像。

div {width: 300px;height: 200px;background-image: url('background.jpg');background-size: cover;
}

17. CSS预处理器

CSS预处理器如Sass和LESS提供了更高级的功能，使CSS开发更加高效。

17.1. Sass示例

$primary-color: #333;body {font: 100% Helvetica, sans-serif;color: $primary-color;
}.alert {padding: 10px;margin: 10px;border: 1px solid red;@extend .message;
}.message {border: 1px solid #ccc;
}

17.2. LESS示例

@primary-color: #333;body {font: 100% Helvetica, sans-serif;color: @primary-color;
}.alert {padding: 10px;margin: 10px;border: 1px solid red;.message;
}.message {border: 1px solid #ccc;
}

18. 实践示例

结合以上内容，通过实践示例来巩固学习。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS实践示例</title><style>body {font-family: Arial, sans-serif;line-height: 1.6;margin: 0;padding: 0;background-color: #f4f4f4;}.container {width: 80%;margin: auto;overflow: hidden;}header {background: #333;color: #fff;padding-top: 30px;min-height: 70px;border-bottom: #0779e4 3px solid;}header a {color: #fff;text-decoration: none;text-transform: uppercase;font-size: 16px;}nav {float: right;margin-top: 10px;}nav ul {margin: 0;padding: 0;list-style: none;}nav ul li {display: inline;margin-left: 5px;}#showcase {min-height: 400px;background: url('showcase.jpg') no-repeat 0 -400px;text-align: center;color: #fff;}#showcase h1 {margin-top: 100px;font-size: 55px;margin-bottom: 10px;}#showcase p {font-size: 20px;}section {padding: 20px;margin: 20px 0;background: #fff;}footer {background: #333;color: #fff;text-align: center;padding: 10px 0;margin-top: 20px;}@media(max-width: 600px) {nav ul {text-align: center;float: none;}nav ul li {display: block;margin: 0;}#showcase h1 {margin-top: 50px;font-size: 30px;}}</style>
</head>
<body><header><div class="container"><div id="branding"><h1>学习CSS</h1></div><nav><ul><li><a href="#showcase">展示区</a></li><li><a href="#section1">部分1</a></li><li><a href="#section2">部分2</a></li></ul></nav></div></header><div id="showcase"><div class="container"><h1>欢迎学习CSS</h1><p>掌握网页设计的基本技能</p></div></div><section id="section1" class="container"><h2>部分1</h2><p>这是CSS基础知识的第一部分内容。</p></section><section id="section2" class="container"><h2>部分2</h2><p>这是CSS基础知识的第二部分内容。</p></section><footer><p>学习CSS &copy; 2024</p></footer>
</body>
</html>

19. 结论

通过本指南，我们深入了解了CSS的基础知识、语法和应用。CSS是一门非常强大的语言，通过不断实践和探索，可以设计出美观且功能强大的网页。

20. 参考资料

W3Schools CSS Tutorial
MDN Web Docs - CSS
CSS-Tricks

这篇博客详细介绍了CSS基础知识及其实践应用，旨在帮助初学者掌握CSS的核心概念和技巧。如果有任何问题或建议，请在评论区留言。

CSS基础知识学习指南

CSS基础知识学习指南 1. 介绍 CSS（层叠样式表）是用于描述HTML文档的呈现样式的语言。通过CSS，可以控制网页的布局、颜色、字体等各种样式，使得网页更加美观和用户友好。 2. CSS基础语法 CSS由选择器和声明块组成。选择器用于选…...

编程日记 2024/7/2 12:38:40

力扣hot100 -- 贪心算法

👂 ▶ 逍遥叹 - 胡歌&沈以城【Mashup】 (163.com) 👂 庐州月 - 许嵩 - 单曲 - 网易云音乐 2.7 小时，加上写博客，4 道题，😂 -- 希望二刷时，可以 3 小时，8 道题.... 目录 &…...

编程日记 2024/7/2 12:36:38

P2P文件传输协议介绍

P2P文件传输协议是一种基于对等网络（Peer-to-Peer，简称P2P）的文件共享和传输技术。以下是关于P2P文件传输协议的详细介绍： 一、定义与原理 P2P文件传输协议允许网络中的各个节点（即计算机或其他设备）之间…...

编程日记 2024/7/2 12:35:37

Spring Boot集成Spring Mobile快速入门Demo

1.什么是Spring Mobile？ Spring Mobile是一个基于Spring Web MVC框架扩展的一个针对不同移动终端的应用开发框架。通过它我们在适配不同终端方面，就不用费劲心思了。 Spring Mobile的主要功能自动设备检测: Spring Mobile在 server端内置了一个设备解…...

编程日记 2024/7/2 12:33:35

走进开源企业 | 湖南大学OpenHarmony技术实训活动在开鸿智谷顺利举办！

6月24日-6月26日，2024开放原子校源行之湖南大学信息科学与工程学院师生走进开源企业实训交流活动顺利落下帷幕。湖南大学信息科学与工程学院的师生代表团一行90人参与了湖南开鸿智谷数字产业有限公司（以下简称“开鸿智谷”）与母公司拓维信息系…...

编程日记 2024/7/2 12:32:34

TCP单进程循环服务器程序与单进程客户端程序

实验目的理解并掌握以下内容：网络进程标识(即套接字地址)在Linux中的数据结构与地址转换函数。网络字节序与主机字节序的定义、转换以及相关函数在网络编程中的应用。数据结构内存对齐的基本规则，以及基于数据结构构建PDU的基本方法。TCP单进程循环服务器与单进程客户端的…...

编程日记 2024/7/2 12:28:31

QT+winodow 代码适配调试总结（二）

已经好多年了， linux环境下不同版本的QT程序开发和部署，突然需要适配window环境程序调试，一堆大坑，还真是一个艰巨的任务，可是kpi下的任务计划，开始吧！！ 1、首先我们自定义的动态库…...

编程日记 2024/7/2 12:26:29

百家讲坛 | 裴伟伟：企业中安全团队应当如何反馈漏洞

作者简介：裴伟伟，洞源实验室创始人，国家网安基地网络安全行业专家，网安加社区特聘专家，持有CISSP、PMP证书，曾在HITCON、可信云大会、开源产业大会等安全论坛发表演讲。曾任国内某安全实验室负责人、某互金…...

编程日记 2024/7/2 12:25:28

巧用Fiddler中的Comments提升接口测试效率

有没有同学在使用Fiddler时跟我遇到了同样的问题，就是想给某个抓包的请求进行注释！！！但是奇怪的是，根本没有Comments相关信息呀？ 设置Comments 设置Comments非常容易，选中一个请求&#xff0c…...

编程日记 2024/7/2 12:23:26

停车场车牌识别计费系统，用Python如何实现？

关注星标，每天学习Python新技能前段时间练习过的一个小项目，今天再看看，记录一下~ 项目结构说明： datefile文件夹：保存车辆信息表的xlsx文件 file文件夹：保存图片文件夹。ic_launcher.jpg是窗体的右上角…...

编程日记 2024/7/2 12:22:25

Linux内核——Linux内核体系模式（二）

1 Linux系统的中断机制 Linux内核将中断分为两类：硬件中断和软件中断（异常）。每个中断是由0-255之间的一个数字进行标识。中断int0-int31（0x00-0x1f）作为异常int32-int255由用户自己设定 int32-int47对应与8259A中断…...

编程日记 2024/7/2 12:17:20

Spring MVC的高级功能——异常处理（一）简单异常处理器

一、HandlerExceptionResolver接口如果希望对Spring MVC中所有异常进行统一处理，可以使用Spring MVC提供的异常处理器HandlerExceptionResolver接口。Spring MVC内部提供了HandlerExceptionResolver的实现类SimpleMappingExceptionResolver。它实现了简单的异常处理…...

编程日记 2024/7/2 12:15:18

【面试干货】Static关键字的用法详解

【面试干货】Static关键字的用法详解 1、Static修饰内部类2、Static修饰方法3、Static修饰变量4、Static修饰代码块5、总结 💖The Begin💖点点关注，收藏不迷路💖 在Java编程语言中，static是一个关键字，它可…...

编程日记 2024/7/2 12:13:16

软件工程实验

实验环境和需求用户可以对相片进行按类别管理，用户可以设定不同的类别，然后上传照片到相应的类别中，并能进行照片的删除，注释运行运行并访问 localhost 8090,图片在数据库中的信息是D：/upgrade 后面的内容 se…...

编程日记 2024/7/2 12:11:14

对于复杂的网页布局，如多列布局和网格布局，CSS 有哪些最佳实践和技巧？

对于复杂的网页布局，如多列布局和网格布局，以下是一些CSS的最佳实践和技巧： 使用Flexbox或CSS Grid布局：Flexbox和CSS Grid是两个强大的CSS布局模型，可用于实现复杂的网页布局。Flexbox适用于单行或单列布局&#xff0…...

编程日记 2024/7/2 12:10:12

Spring Boot中集成Redis实现缓存功能

Spring Boot中集成Redis实现缓存功能大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！今天我们将深入探讨如何在Spring Boot应用程序中集成Redis，实现…...

编程日记 2024/7/2 12:08:11

arco disign vue 日期组件的样式穿透

问题描述: 对日期组件进行样式穿透. 原因分析: 如图,日期组件被展开时它默认将dom元素挂载到body下, 我们的页面在idroot的div 里层, 里层想要穿透外层是万万行不通的. 解决问题: 其实官网提供了参数,但是并没有提供例子, 只能自己摸索着过河. 对于日期组件穿透样式,我们能…...

编程日记 2024/7/2 12:07:09

【深度学习】pytorch训练中的一个大坑

使用的命令：iostat -x 5 可以看到 ssd的利用率已经满了。之前在的数据集放在了 hdd上，训练结果特别慢。所以我把它移动到了ssd上，然后训练参数用的 resume， 但是！！！！它把历史记住…...

编程日记 2024/7/2 12:06:08

python全局解释器锁（GIL）

文章目录 1.cpu工作方式2.python全局解释器锁与多线程3.其他语言的多线程4.如何解决假的多线程 1.cpu工作方式先来先服务（First Come, First Served，FCFS）： 最简单的调度算法，按照作业或进程到达的顺序依次执行。没有…...

编程日记 2024/7/2 12:04:06

无人机的起源

无人机起源于20世纪初的早期实验阶段，并随着技术进步逐步发展。无人机，作为现代科技领域中的一项重要创新，已经在全球范围内展现出其巨大的潜力和应用价值。无人机的历史可以追溯到1917年，美国人艾德温.奥斯特林发明了“飞行训练…...

编程日记 2024/7/2 12:03:05

专题六：Spring源码之初始化容器BeanFactory

上一篇咱们通过一个例子介绍初始化容器上下文相关内容，并通过两个示例代码看到了Spring在设计阶段为我预留的扩展点，和我们应该如何利用这两个扩展点在Spring初始化容器上下文阶段为我们提供服务。这一篇咱们接着往下看。老这样子下回到refresh方法上来…...

编程日记 2024/7/2 12:02:04

缓存双写一致性（笔记）

缓存更新方案旁路缓存模式这是比较多的旁路缓存模式：缓存有就返回，没有数据库查询，放入缓存返回。还有些常用缓存策略读穿透模式读穿透和旁路很相似，程序不需要关注从哪里读取数据，它只需要从缓存查询数据。…...

编程日记 2024/7/2 12:01:03

运动馆预约管理系统设计

设计一个运动馆预约管理系统，需要考虑到用户需求、系统功能、技术实现和用户体验等多个方面。以下是一个基本的设计框架： 1. 系统目标提供便捷的运动场地预约服务。实现运动馆资源的有效管理和利用。支持在线支付，提高交易效率。提供数…...

编程日记 2024/7/2 11:59:00

第五届计算机、大数据与人工智能国际会议（ICCBD+AI 2024）

随着科技的飞速发展，计算机、大数据和人工智能等前沿技术已成为推动社会进步的重要力量。为了加强这一领域的学术交流与合作，促进技术创新与发展，第五届计算机、大数据与人工智能国际会议（ICCBDAI 2024）将于2024年11月…...

编程日记 2024/7/2 11:56:58

高效的向量搜索算法——分层可导航小世界图（HNSW）

最近在接触大模型相关内容，发现一种高效的向量搜索算法HNSW，这里做一下记录。在之前自己也接触过一段时间的复杂网络（网络科学），没想到，将网络科学的思想引入到向量搜索算法中，可以产生令人眼前…...

编程日记 2024/7/2 11:55:56

【MySQL备份】Percona XtraBackup全量备份实战篇

目录 1. 前言 2.准备工作 2.1.环境信息 2.2.创建备份目录 2.3.配置/etc/my.cnf文件 2.4.授予root用户BACKUP_ADMIN权限 3.全量备份 4.准备备份 5.数据恢复 6.总结 "实战演练：利用Percona XtraBackup执行MySQL全量备份操作详解" 1. 前言本文…...

编程日记 2024/7/2 11:54:54

港口危险货物安全管理人员考试题库(含答案)

一、单选题 1.化学品安全标签内容中警示词有( )种分别进行危害程度的警示。 A、3 B、4 C、5 参考答案:A 2.运输放射性物品，应当使用( )的放射性物品运输包装容器(以下简称运输容器)。 A、专业 B、专用 C、统一 D、定制参考答案:B 3.库区仪表及计算机监控管理系…...

编程日记 2024/7/2 11:49:47

什么是 JVM（ Java 虚拟机），它在 Java 程序执行中扮演什么角色？

JVM，全称Java Virtual Machine，中文译作“Java虚拟机”，它是运行Java程序的软件环境，也是Java语言的核心部分之一。想象一下，如果你是一位环球旅行家，每到一个新的国家，都需要学习当地的语言才…...

编程日记 2024/7/2 11:47:44

Python容器之列表--下标和切片

列表的切片得到是新的列表字符串的切片得到是新的字符串如果下标不存在会报错 list1 [1, 3.14, "hello", False] print(list1)# 获取列表中第一个数据 print(list1[0]) # 1# 获取列表中的最后一个数据 print(list1[-1]) # [False]# 获取中间两个数即 3.1…...

编程日记 2024/7/2 11:46:42

Docker 运行Nacos无法访问地址解决方法

参考我的上一篇文章去配置好镜像加速器，镜像加速器不是配置越多越好，重试次数多了会失败 Dockerhub无法拉取镜像配置阿里镜像加速器-CSDN博客错误的尝试最开始按照网上的方式去配了一大堆，发现下不下来。镜像源地址：https:…...

编程日记 2024/7/2 11:45:41

Stable Diffusion 商业变现与绘画大模型多场景实战

前言 ai绘画软件Stable Diffusion是一种通过模拟扩散过程，将噪声图像转化为目标图像的文生图模型，具有较强的稳定性和可控性，可以将文本信息自动转换成高质量、高分辨率且视觉效果良好、多样化的图像。在日常工作中，ai绘画软件St…...

编程日记 2024/7/2 11:43:38

[CocosCreator]CocosCreator网络通信：https + websocket + protobuf

环境 cocos creator版本：3.8.0 开发语言：ts 操作系统：windows http部分直接使用 XMLHttpRequest 创建http请求 // _getHttpUrl 方法自己写字符串拼接public httpPostJsonRequest(uri: string, headData: any, data: any, cb: Function…...

编程日记 2024/7/2 11:40:35

并发控制-事务的调度、数据不一致问题（更新丢失、脏读、不可重复读）、非串行调度的的可串行化

一、引言 1、数据库管理系统DBMS的事务处理技术实现的另一个主要功能部分是并发控制机制。并发控制机制完成的功能就是对并发执行的事务进行控制，保证事务的隔离性，从而进一步保持数据库的一致性。 2、事务的并发控制就是对并发执行的不同事务中的数据…...

编程日记 2024/7/2 11:39:33

Golang | Leetcode Golang题解之第202题快乐数

题目： 题解： func isHappy(n int) bool {cycle : map[int]bool{4: true, 6: true, 37: true, 58: true, 89: true, 145: true, 42: true, 20: true}for n ! 1 && !cycle[n] {n step(n)}return n 1 }func step(n int) int {sum : 0for n > …...

编程日记 2024/7/2 11:37:30

算法：哈希表

目录题目一：两数之和题目二：判定是否互为字符重排题目三：存在重复元素I 题目四：存在重复元素II 题目五：字母异位词分组关于哈希表哈希表就是存储数据的容器哈希表的优势是：快速查找某个元素O(…...

编程日记 2024/7/2 11:36:29

自然语言处理基本知识(1)

一分词基础 NLP:搭建了计算机语言和人类语言之间的转换 1 精确分词，试图将句子最精确的分开，适合文本分析 >>> import jieba >>> content "工信处女干事每月经过下属科室" >>> jieba.cut(content,cut_all …...

编程日记 2024/7/2 11:34:27

Java中的数据加密与安全传输

Java中的数据加密与安全传输大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！今天我们来探讨一下在Java中如何实现数据加密与安全传输。随着互联网的普及和网络…...

编程日记 2024/7/2 11:33:26

UG NX二次开发(C++)-根据草图创建拉伸特征（UFun+NXOpen）

1、前言 UG NX是基于特征的三维建模软件，其中拉伸特征是一个很重要的特征，有读者问如何根据草图创建拉伸特征，我在这篇博客中讲述一下草图创建拉伸特征的UG NX二次开发方法，感兴趣的可以加入QQ群：749492565，或者在评论区留言。 2、在UG NX中创建草图，然后创建拉伸特征 …...

编程日记 2024/7/2 11:32:25

TS_开发一个项目

目录一、编译一个TS文件 1.安装TypeScript 2.创建TS文件 3.编译文件 4.用Webpack打包TS ①下载依赖 ②创建文件 ③启动项目 TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或…...

编程日记 2024/7/2 11:31:24

2024年华为OD机试真题-传递悄悄话 -C++-OD统一考试（C卷D卷）

2024年OD统一考试（D卷）完整题库：华为OD机试2024年最新题库（Python、JAVA、C++合集）题目描述：给定一个二叉树，每个节点上站着一个人，节点数字表示父节点到该节点传递悄悄话需要花费的时间。初始时，根节点所在位置的人有一个悄悄话想要传递给其他人，求二叉树所有节…...

编程日记 2024/7/2 11:29:20

eclipse基础工程配置（ tomcat配置JRE环境）

文章目录 I eclipse1.1 工程配置1.2 编译工程1.3 添加 JRE for the project build pathII tomcat配置JRE环境2.1 Eclipse编辑tomcat运行环境（Mac版本）2.2 Eclipse编辑tomcat运行环境（windows版本）2.3 通过tomcat7W.exe配置运行环境（windows系统）I eclipse 1.1 工程配置 …...

编程日记 2024/7/2 11:28:19

Spring Boot 学习第八天：AOP代理机制对性能的影响

1 概述在讨论动态代理机制时，一个不可避免的话题是性能。无论采用JDK动态代理还是CGLIB动态代理，本质上都是在原有目标对象上进行了封装和转换，这个过程需要消耗资源和性能。而JDK和CGLIB动态代理的内部实现过程本身也存在很大差异。下面将讨…...

编程日记 2024/7/2 11:27:17

Linux[高级管理]——Squid代理服务器的部署和应用(传统模式详解)

🏡作者主页：点击！ 👨‍💻Linux高级管理专栏：点击！ ⏰️创作时间：2024年6月24日11点11分 🀄️文章质量：95分目录 ————前言———— Squid功能 Squ…...

编程日记 2024/7/2 11:26:16

使用Vue 2 + Element UI搭建后台管理系统框架实战教程

后台管理系统作为企业内部的核心业务平台，其界面的易用性和功能性至关重要。Vue 2作为一个成熟的前端框架，以其轻量级和高效著称，而Element UI则是一套专为桌面端设计的Vue 2组件库，它提供了丰富的UI元素和组件，大大简…...

编程日记 2024/7/2 11:24:13

Carla安装教程

1.前言对于从事自动驾驶的小伙伴而言，或多或少应该都接触过一些的仿真软件，今天要给大家介绍的这款仿真软件应该算的上是业界非常有名的一款仿真软件——carla。目前carla的学习教程也还是蛮多的，但是写的都不是很全，在配置的…...

编程日记 2024/7/2 11:22:11

【PYG】处理Cora数据集分类任务使用的几个函数log_softmax，nll_loss和argmax

文章目录 log_softmax解释作用示例解释输出 nll_loss解释具体操作示例代码解释 nll_losslog_softmaxcross_entropy解释代码示例解释 argmax()解释作用示例代码解释示例输出 log_softmax F.log_softmax(x, dim1) 是 PyTorch 中的一个函数，用于对输入张量 x 应用 log…...

编程日记 2024/7/2 11:20:09

Labview绘制柱状图

废话不多说，直接上图我喜欢用NXG风格，这里我个人选的是xy图。点击箭头指的地方选择直方图插值选择第一个直方图类型我选的是第二个效果如图。程序部分如图。最后吐槽一句，现在看CSDN好多文章都要收费了，哪怕一些简单的入…...

编程日记 2024/7/2 11:18:07

使用Python实现一个简单的密码管理器

文章目录一、项目概述二、实现步骤2.1 安装必要的库2.2 设计密码数据结构2.3 实现密码加密和解密2.4 实现主要功能2.4.1 添加新密码2.4.2 显示所有密码2.4.3 查找特定密码2.4.4 更新密码2.4.5 删除密码 2.5 实现用户界面三、代码示例3.1 加密和解密示例3.2 用户界面示例在现…...

编程日记 2024/7/2 11:17:05

【云原生】服务网格（Istio）如何简化微服务通信

🐇明明跟你说过：个人主页 🏅个人专栏：《未来已来：云原生之旅》🏅 🔖行路有良友，便是天堂🔖 目录一、引言 1、微服务架构的兴起 2、Istio：服务网格的佼…...

编程日记 2024/7/2 11:16:04

spring boot 整合 sentinel

注意版本问题我这是jdk11 、spring boot 2.7.15 、 alibaba-sentinel 2.1.2.RELEASE <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.15</version><…...

编程日记 2024/7/2 11:15:02

浅谈贝叶斯定理

引言贝叶斯定理用于确定事件的条件概率。它以一位英国统计学家的名字命名，托马斯贝叶斯他在1763年发现了这个公式。贝叶斯定理是数学中一个非常重要的定理，它为一种独特的统计推断方法奠定了基础。贝氏推论它用于根据可能与事件相关的条件的先验知识&a…...

编程日记 2024/7/7 10:40:27

每天一个数据分析题（四百零一）- 逻辑回归

对于一组数据，搭建了一个逻辑回归模型，则下列描述正确的是( ) A. 被解释变量为连续型数据 B. 解释变量一定均为离散型数据 C. 模型的最优阈值为0.5 D. 模型的最优阈值需要根据数据结果计算数据分析认证考试介绍：点击进入题目来源于CD…...

编程日记 2024/7/7 10:06:03

百度智能云创新业务部总经理李想：发挥AI企业科技创新优势助力职业教育人才扬帆远航

前言：百度智能云教育行业解决方案作为百度智能云旗下的创新力量，专注于培养“AI教育”领域的新质生产力人才，一直以来备受职业教育领域的关注。在第六届人工智能“职教百强”院校长论坛开幕之际，中教全媒体对话论坛嘉宾百度智能云…...

编程日记 2024/7/7 5:14:08

virtualbox安装unbuntu22.04

准备 virtualbox https://www.virtualbox.org/ ubuntu ios https://ubuntu.com/ 安装等待安装结束即可，输入账号密码登录系统远程连接发现失败，不过ping 外网可以访问关闭虚拟机，选择工具，网络查看ip 选择虚拟机&#…...

编程日记 2024/7/6 19:14:05

C语言调试技巧

叠甲：以下文章主要是依靠我的实际编码学习中总结出来的经验之谈，求逻辑自洽，不能百分百保证正确，有错误、未定义、不合适的内容请尽情指出！ 文章目录 1.bug 是什么2.debug 是什么3.两种模式的区别4.IDE 调试介绍4.1.模…...

编程日记 2024/7/6 17:57:15

PHP基础教程——总结W3school

1、<?php ?> 2、$ 声明变量 3、变量大小写敏感关键字（if、else、echo）和用户定义的类、函数大小写不敏感 4、三种注释 // # /* */ 5、echo "<br>"; 换行 6、global(关键字) 函数内访问全局变量 $GLOBALS[index] …...

编程日记 2024/7/6 17:10:42

依米康300249.SZ：长期为百度提供数据中心温控设备和部分微模块的施

:长期为百度提供数据中心温控设备和部分微模块的施工、安装等服务)格隆汇6月14日丨有投资者于投资者互动平台向依米康提问，“百度是公司的重要客户吗？公司与百度的合作主要是在哪方面呢？”，公司回复称，百度一直都是公司重要客户，公司长期为百度提供数据中心温控设备和部分…...

编程日记 2024/7/6 14:34:31

携手“黔”行百花开厦门大学对口支援贵州师范大学十八载

厦门大学对口支援贵州师范大学十八载携手“黔”行百花开“我为能够参与助力贵州师范大学学科建设实现从0到1，亲眼见证两校合作开花结果而感到骄傲自豪。”2007年，卢琳璋作为厦门大学首批派遣干部之一，挂职贵州师范大学数学与计算机科学学院院长，负责引领数学学科博士点的申…...

编程日记 2024/7/7 1:21:50

python生成词云图

生成词云图的话需要先对数据进行分词处理 , 分词方法点击查看 import pandas as pd from collections import Counter from wordcloud import WordCloud import matplotlib.pyplot as plt# 假设您已经按照之前的步骤处理了数据，并且处理后的数据保存在comments_proc…...

编程日记 2024/7/7 8:58:04

XV7011BB可为智能割草机的导航系统提供新的解决方案

智能割草机作为现代家庭和商业草坪维护保养的重要工具，其精确的定位和导航系统对于提高机器工作效率和确保安全运行至关重要。在智能割草机的发展历程中，定位和导航技术一直是关键的创新点。传统的基于RTK(实时动态差分定位技术)技术的割草机虽然在…...

编程日记 2024/7/6 20:06:01

转行一年了

关注、星标公众号，直达精彩内容 ID：技术让梦想更伟大整理：李肖遥来公司一年了。说是转行其实还是在半导体行业，熟悉我的朋友知道 ，我在18年开始进入半导体行业，那个时候想着行业很重要，站对了…...

编程日记 2024/7/6 15:44:28

周末总结(2024/05/25)

工作人际关系核心实践： 要学会随时回应别人的善意。执行时间控制在5分钟以内坚持每天早会打招呼工作上的要点现状（接受破烂现状，改变状态） - 这周使用和执行了生产环境发布流程(2天），2天时间在写Java…...

编程日记 2024/7/7 2:05:33

CSS基础知识学习指南

1. 介绍

2. CSS基础语法

3. 引入CSS

3.1. 内联样式

3.2. 内部样式表

3.3. 外部样式表

4. 选择器

4.1. 元素选择器

4.2. 类选择器

4.3. ID选择器

4.4. 属性选择器

4.5. 组合选择器

5. 颜色

6. 字体

6.1. 字体系列

6.2. 字体大小

6.3. 字体样式

6.4. 字体粗细

6.5. 文本对齐

6.6. 文本装饰

6.7. 文本变换

6.8. 字母间距和行高

7. 背景

7.1. 背景颜色

7.2. 背景图像

7.3. 背景重复

7.4. 背景位置

7.5. 背景尺寸

8. 边框

8.1. 边框样式

8.2. 边框宽度

8.3. 边框颜色

8.4. 简写属性

8.5. 圆角边框

9. 外边距和内边距

9.1. 外边距

9.2. 内边距

10. 布局

10.1. 浮动布局

10.2. 定位布局

10.3. Flexbox布局

10.4. Grid布局

11. 过渡与动画

11.1. 过渡

11.2. 动画

12. 媒体查询

13. 伪类和伪元素

13.1. 伪类

13.2. 伪元素

14. 表格样式

15. 表单样式

16. 图像和媒体

16.1. 图像大小

16.2. 媒体查询

16.3. 背景图像

17. CSS预处理器

17.1. Sass示例

17.2. LESS示例

18. 实践示例

19. 结论

20. 参考资料

相关文章：