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

前端开发：（三）CSS入门

news 文章来源：https://blog.csdn.net/qq_35763697/article/details/136074120 2024/9/20 6:56:44

1. 介绍CSS

1.1 什么是CSS

CSS（Cascading Style Sheets）是一种用于描述文档样式和布局的样式表语言，用于美化和排版HTML和XML等标记语言的内容。

1.2 CSS的作用和优势

CSS的主要作用是控制网页的样式和布局，包括字体、颜色、间距、边框、背景等方面，从而增强用户体验并提高页面的可读性和美观度。其优势包括：

  • 分离内容与表现：将样式和结构分开，使得网页结构更清晰，易于维护和管理。
  • 提高网页性能：可以通过CSS控制页面加载速度和渲染效率，提升用户体验。
  • 增强可访问性：使用CSS可以轻松实现对网页内容的可访问性和无障碍体验。
  • 跨平台兼容性：CSS可以适用于各种不同的设备和平台，并且能够适应不同尺寸和分辨率的屏幕。

1.3 CSS的发展历史

CSS最初由Håkon Wium Lie和Bert Bos在1996年提出，并在1997年成为W3C的推荐标准。随着Web技术的发展，CSS经历了多个版本的更新，从CSS1到CSS2再到CSS3，逐步增加了新的特性和功能，如盒模型、浮动、定位、动画等，以满足不断增长的Web设计需求。

2. CSS基础

2.1 CSS语法规则

CSS语法规则由选择器和声明块组成，选择器用于选择要应用样式的元素，声明块包含一个或多个属性值对。

selector {property: value;
}

2.2 CSS样式规则的结构

CSS样式规则由选择器和一组样式声明组成，选择器指定了要应用样式的HTML元素，样式声明指定了要修改的样式属性和对应的值。

h1 {color: blue;font-size: 24px;
}

2.3 CSS选择器的分类和使用

CSS选择器根据选择元素的不同方式分为元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。不同的选择器适用于不同的场景，可以精确地选择需要修改样式的元素。

/* 元素选择器 */
p {color: red;
}/* 类选择器 */
.title {font-weight: bold;
}/* ID选择器 */
#header {background-color: #ccc;
}

2.4 CSS注释的语法

CSS注释以/* */的形式包裹注释内容，用于在样式表中添加注释说明，提高代码的可读性和可维护性。

/* 这是一个CSS注释 */
p {color: blue; /* 这是另一个CSS注释 */
}

3. CSS样式的应用

3.1 内联样式

内联样式通过在HTML标签的style属性中直接定义样式，适用于单个元素的特定样式设置。

<p style="color: red; font-size: 16px;">这是一个红色字体的段落。</p>

3.2 嵌入样式表

嵌入样式表将样式规则直接写在HTML文档的<style>标签内部，适用于单个页面的样式设置。

<head><style>p {color: blue;font-size: 18px;}</style>
</head>

3.3 外部样式表的链接

外部样式表将样式规则写在一个单独的CSS文件中，并通过<link>标签引入到HTML文档中，适用于整个网站的样式共享和统一管理。

<head><link rel="stylesheet" href="styles.css">
</head>

4. CSS文本样式

4.1 字体样式（font）

字体样式属性用于控制文本的字体、大小、粗细和样式。

body {font-family: Arial, sans-serif;font-size: 16px;font-weight: bold;font-style: italic;
}

4.2 文本颜色（color）

文本颜色属性用于设置文本的颜色。

p {color: #333;
}

4.3 文本对齐（text-align）

文本对齐属性用于设置文本在其容器中的水平对齐方式。

h1 {text-align: center;
}

4.4 文本装饰（text-decoration）

文本装饰属性用于添加文本的下划线、删除线等装饰效果。

a {text-decoration: none; /* 移除链接下划线 */
}

5. CSS盒模型

5.1 盒模型的概念

CSS盒模型描述了一个元素在页面上所占空间的模型，它由内容区域、内边距、边框和外边距组成。

5.2 盒模型的组成（content、padding、border、margin）

  • 内容区域（content）：元素的实际内容，由宽度（width）和高度（height）决定。
  • 内边距（padding）：内容区域与边框之间的空间，可以用来增加元素内容与边框之间的距离。
  • 边框（border）：围绕内容和内边距的线条，可以设置边框的样式、宽度和颜色。
  • 外边距（margin）：元素边框与相邻元素边框之间的空间，用于控制元素之间的间距。

5.3 盒模型的尺寸控制

通过设置盒模型的宽度（width）、高度（height）、内边距（padding）、边框（border）和外边距（margin）等属性，可以控制元素在页面上的尺寸和位置。

.box {width: 200px; /* 设置元素宽度 */height: 150px; /* 设置元素高度 */padding: 20px; /* 设置内边距 */border: 1px solid #000; /* 设置边框 */margin: 10px; /* 设置外边距 */
}

6. CSS布局

6.1 常见的布局方式（水平布局、垂直布局）

常见的布局方式包括水平布局和垂直布局，可以通过设置元素的display属性和float属性来实现。

/* 水平布局 */
.horizontal-layout {display: flex;
}/* 垂直布局 */
.vertical-layout {display: flex;flex-direction: column;
}

6.2 流式布局和固定布局

流式布局（Fluid Layout）根据浏览器窗口大小自动调整元素尺寸和位置，而固定布局（Fixed Layout）则保持元素的固定尺寸和位置。

/* 流式布局 */
.fluid-layout {width: 100%;
}/* 固定布局 */
.fixed-layout {width: 960px;margin: 0 auto; /* 居中显示 */
}

6.3 弹性布局（Flexbox）和网格布局（Grid）

弹性布局和网格布局是CSS3新增的布局模式，可以更灵活地控制元素的排列和对齐方式。

/* 弹性布局 */
.flex-container {display: flex;justify-content: space-between;
}/* 网格布局 */
.grid-container {display: grid;grid-template-columns: 50% 50%;
}

7. CSS背景样式

7.1 背景颜色（background-color）

背景颜色属性用于设置元素的背景颜色。

.element {background-color: #f0f0f0;
}

7.2 背景图片（background-image）

背景图片属性用于设置元素的背景图片，可以使用图片的URL或者渐变色。

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

7.3 背景重复和定位

背景重复属性用于设置背景图片的重复方式，背景定位属性用于设置背景图片的位置。

.element {background-repeat: no-repeat; /* 不重复 */background-position: center; /* 居中显示 */
}

8. CSS边框样式

8.1 边框样式（border-style）

边框样式属性用于设置元素的边框线条的样式，包括实线、虚线、双线等。

.element {border-style: solid; /* 实线 */
}

8.2 边框宽度（border-width）

边框宽度属性用于设置元素的边框线条的宽度。

.element {border-width: 1px; /* 1像素宽度 */
}

8.3 边框颜色（border-color）

边框颜色属性用于设置元素的边框线条的颜色。

.element {border-color: #ccc; /* 灰色 */
}

9. CSS浮动和定位

9.1 浮动（float）的概念和使用

浮动属性用于控制元素在父元素内的浮动方式，常用于实现多列布局和图文混排效果。

.float-left {float: left; /* 左浮动 */
}.float-right {float: right; /* 右浮动 */
}

9.2 定位（position）的概念和属性

定位属性用于控制元素在文档中的定位方式，常用的定位属性包括相对定位、绝对定位和固定定位。

.relative-position {position: relative; /* 相对定位 */
}.absolute-position {position: absolute; /* 绝对定位 */
}.fixed-position {position: fixed; /* 固定定位 */
}

9.3 相对定位、绝对定位和固定定位

  • 相对定位（relative）：相对于元素本身原来的位置进行定位。
  • 绝对定位（absolute）：相对于最近的已定位的父元素进行定位。
  • 固定定位（fixed）：相对于浏览器窗口进行定位，元素固定在页面上不随滚动而移动。
.element {position: relative; /* 相对定位 */top: 10px; /* 相对原位置向下偏移10像素 */
}

10. CSS尺寸和单位

10.1 像素（px）和百分比（%）

  • 像素（px）：绝对单位，相对于显示设备的屏幕分辨率而言，常用于固定尺寸的元素。
  • 百分比（%）：相对单位，相对于父元素的尺寸进行计算，常用于响应式布局和元素相对尺寸设置。
.element {width: 200px; /* 使用像素设置宽度 */height: 50%; /* 使用百分比设置高度 */
}

10.2 em、rem和vw/vh单位

  • em：相对于父元素字体大小的单位，可以实现相对于文本大小的尺寸设置。
  • rem：相对于根元素（html）字体大小的单位，可以实现全局的相对尺寸设置。
  • vw/vh：视口宽度和高度的百分比单位，可以根据视口大小进行尺寸设置，常用于响应式布局。
.element {font-size: 1.2em; /* 相对于父元素字体大小的1.2倍 */margin-bottom: 2rem; /* 相对于根元素字体大小的2倍 */width: 50vw; /* 相对于视口宽度的50% */height: 80vh; /* 相对于视口高度的80% */
}

10.3 CSS计算（calc()）

CSS计算函数calc()可以对长度值进行数学计算，用于实现动态计算尺寸的效果。

.element {width: calc(50% - 20px); /* 宽度为父元素宽度的50%，减去20像素 */
}

11. CSS动画与过渡

11.1 CSS过渡（transition）的基本使用

CSS过渡属性可以在元素属性变化时平滑地过渡到新状态，提升用户体验。

.element {transition: width 0.3s ease-in-out; /* 宽度变化时，过渡时间0.3秒，缓动效果 */
}

11.2 CSS动画（animation）的基本使用

CSS动画属性可以创建复杂的动画效果，可以定义动画的关键帧、持续时间和循环次数等。

@keyframes slide-in {from {transform: translateX(-100%);}to {transform: translateX(0);}
}.element {animation: slide-in 1s ease-in-out; /* 使用slide-in动画，持续1秒，缓动效果 */
}

11.3 关键帧动画（@keyframes）

关键帧动画允许开发人员定义动画的各个阶段，从而实现更灵活的动画效果。

@keyframes bounce {0%, 100% {transform: translateY(0);}50% {transform: translateY(-20px);}
}.element {animation: bounce 1s ease-in-out infinite; /* 使用bounce动画，无限循环 */
}

12. 响应式Web设计

12.1 媒体查询（media queries）的概念和使用

媒体查询允许我们针对不同的媒体类型和设备特性应用不同的样式，以实现响应式布局和设计。

/* 当视口宽度小于600px时应用以下样式 */
@media only screen and (max-width: 600px) {.element {font-size: 14px;}
}

12.2 响应式图片和视频

通过设置图片和视频的最大宽度为100%，可以实现在不同设备上自适应大小的响应式媒体展示。

img, video {max-width: 100%;height: auto;
}

12.3 移动优先设计理念

移动优先设计理念是指在进行网页设计时，首先从移动设备的视角出发，确保网站在小屏幕上具有良好的用户体验，然后逐步增强布局和样式以适应更大屏幕的设备。

/* 移动优先设计 */
.element {font-size: 16px; /* 默认字体大小 */
}@media only screen and (min-width: 768px) {.element {font-size: 18px; /* 在大屏幕上增加字体大小 */}
}

13. CSS预处理器

13.1 LESS、Sass和SCSS的介绍

LESS、Sass和SCSS是三种常用的CSS预处理器，它们提供了类似编程语言的特性，如变量、嵌套、混合和函数等，以提高CSS代码的可维护性和可复用性。

13.2 使用变量、混合（Mixin）和嵌套

预处理器可以定义变量来存储颜色、字体和尺寸等常用值，也可以定义混合和嵌套来减少重复代码和增加代码的可读性。

/* 定义变量 */
$primary-color: #3498db;/* 定义混合 */
@mixin button-style {background-color: $primary-color;color: white;padding: 10px 20px;
}/* 使用混合 */
.button {@include button-style;
}/* 嵌套 */
.container {width: 100%;.header {font-size: 24px;}.content {padding: 20px;}
}

13.3 CSS的模块化和组织

通过使用预处理器和模块化的设计思路，可以将CSS代码分割为多个模块，每个模块负责管理特定部分的样式，从而提高代码的可维护性和可扩展性。

/* _variables.scss */
$primary-color: #3498db;/* _button.scss */
@mixin button-style {background-color: $primary-color;color: white;padding: 10px 20px;
}/* main.scss */
@import 'variables';
@import 'button';.button {@include button-style;
}

以上是CSS的一些进阶主题，通过使用媒体查询、预处理器等技术，可以更好地管理和组织CSS代码，实现更复杂和更灵活的样式效果。

14. CSS优化与性能

14.1 CSS选择器

选择器的复杂度会直接影响到页面的渲染性能。过于复杂的选择器会增加匹配元素的时间，因此应尽量避免使用过于复杂的选择器，尤其是嵌套层级过深的选择器。

/* 不推荐的复杂选择器 */
.container .header .nav ul li a {}/* 推荐简单选择器 */
.nav-link {}

14.2 CSS压缩和合并

在生产环境中，可以对CSS文件进行压缩和合并，以减少文件大小和网络请求次数，提高页面加载速度。

# 使用压缩工具（如uglifycss、clean-css等）压缩CSS文件
uglifycss style.css > style.min.css# 使用构建工具（如Webpack、Gulp等）合并多个CSS文件

14.3 渲染性能优化

通过优化CSS代码，可以提高页面的渲染性能，例如避免使用不必要的样式属性、减少使用昂贵的属性（如box-shadow、border-radius等）、尽量减少重绘和回流等。

/* 不推荐的样式 */
.element {box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);border-radius: 10px;
}/* 推荐优化后的样式 */
.element {/* 尽量避免昂贵的属性 *//* 减少不必要的样式属性 */
}

15. CSS最佳实践

15.1 代码规范

制定良好的CSS代码规范对于团队协作和代码维护非常重要，可以提高代码的可读性和可维护性。例如使用一致的命名规范、缩进和空格规范、注释规范等。

/* 代码注释 */
/* Header Styles *//* 命名规范 */
.nav-menu {}/* 缩进和空格规范 */
.container {padding: 20px;margin: 0;
}

15.2 浏览器兼容性

在开发过程中应注意跨浏览器兼容性，确保样式在不同浏览器和设备上都能正确显示。可以使用浏览器的开发者工具进行调试和测试，同时考虑使用CSS前缀和特性检测等技术来解决兼容性问题。

/* 使用浏览器前缀 */
.element {-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

15.3 性能优化

除了上述提到的性能优化方法外，还可以考虑使用CSS Sprites技术来减少图片请求、使用字体图标代替图片图标、避免使用过多的嵌套和不必要的选择器等。

/* 使用CSS Sprites技术 */
.icon {background-image: url('sprites.png');background-position: -20px -40px;width: 20px;height: 20px;
}

综上所述，通过合理的CSS优化和最佳实践，可以提高页面的性能和用户体验，同时提高代码的可维护性和可读性。

相关文章：

前端开发：（三）CSS入门

1. 介绍CSS 1.1 什么是CSS CSS&#xff08;Cascading Style Sheets&#xff09;是一种用于描述文档样式和布局的样式表语言&#xff0c;用于美化和排版HTML和XML等标记语言的内容。 1.2 CSS的作用和优势 CSS的主要作用是控制网页的样式和布局&#xff0c;包括字体、颜色、间…...

编程日记 2024/2/15 0:52:37

一周学会Django5 Python Web开发-Django5创建项目(用PyCharm工具)

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计11条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…...

编程日记 2024/2/15 0:50:35

寒假学习记录13：JS对象

目录 对象转数组 对象双值转数组 Object.entries() &#xff08;转为二维数组&#xff09;&#xff08;属性的值和键&#xff09; 对象右值转数组 Object.values() &#xff08;属性的值&#xff09; 对象左值转数组 Object.keys() (属性的键) 对象左值转…...

编程日记 2024/2/15 0:47:32

学生成绩管理系统|基于Springboot的学生成绩管理系统设计与实现(源码+数据库+文档)

学生成绩管理系统目录 目录 基于Springboot的学生成绩管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能模块 2、学生功能模块 3、教师功能模块 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源…...

编程日记 2024/2/15 0:41:27

C#向数组指定索引位置插入新的元素值：自定义插入方法 vs List＜T＞.Add(T) 方法

目录 一、使用的方法 1.自定义插入方法 2.使用List.Add(T) 方法 二、实例 1.示例1&#xff1a;List.Add(T) 方法 2.示例&#xff1a;自定义插入方法 一、使用的方法 1.自定义插入方法 首先需要定义一个一维数组&#xff0c;然后修改数组的长度(这里使用Length属性获取…...

编程日记 2024/2/15 0:40:25

【大数据Hive】hive 表设计常用优化策略

目录 一、前言 二、hive 普通表查询原理 2.1 操作演示说明 2.1.1 创建一张表&#xff0c;并加载数据 2.1.2 统计3月24号的登录人数 2.1.3 查询原理过程总结 2.2 普通表结构带来的问题 三、hive分区表设计 3.1 区表结构 - 分区设计思想 3.2 操作演示 3.2.1 创建分区表…...

编程日记 2024/2/15 0:38:22

jvm垃圾收集器之七种武器

目录 1.回收算法 1.1 标记-清除算法(Mark-Sweep) 1.2 复制算法(Copying) 1.3 标记-整理算法(Mark-Compact) 2.HotSpot虚拟机的垃圾收集器 2.1 新生代的收集器 Serial 收集器&#xff08;复制算法&#xff09; ParNew 收集器 (复制算法) Parallel Scavenge 收集器 (复制…...

编程日记 2024/2/15 0:36:20

STM32面试相关问题

STM32面试相关问题&#xff1a; STM32的内核型号&#xff0c;主频&#xff0c;传感器和单片机总线类型&#xff0c;IIC,SPI,RS485UART数据帧项目中一些参数的设置 STM32 系统移植 ARM编译 常用的驱动编写方式 自己写过哪些方面驱动 其实如果问32的问题&#xff0c…...

编程日记 2024/2/15 0:35:19

风行智能电视N39S、N40 强制刷机升级方法，附刷机升级数据MstarUpgrade.bin

升级步骤&#xff1a; 1、下载刷机数据&#xff0c;如是压缩包&#xff0c;需要先解压&#xff0c;然后将刷机bin格式的文件重命名为MstarUpgrade.bin 2、将此文件放到U盘根目录 &#xff08;U盘格式FAT32&#xff0c;单分区&#xff0c;建议4G的优盘刷机成功率高&#xff09;…...

编程日记 2024/2/15 0:31:16

【C语言】简易英语词典

文章目录 一、定义英语单词信息的结构体二、主函数功能逻辑三、查单词函数四、背单词函数五、补充 一、定义英语单词信息的结构体 添加必要的头文件、宏定义和声明&#xff0c;之后定义英语单词信息结构体。 /* 头文件和宏定义 */ #include <stdio.h> #include <std…...

编程日记 2024/2/15 0:30:15

【算法题】104. 二叉树的最大深度

题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3 示例 2&#xff1a; 输入&#xff1a;root [1,nul…...

编程日记 2024/2/15 0:21:03

Docker配置Portainer容器管理界面

目录 一、Portainer 简介 优点&#xff1a; 缺点&#xff1a; 二、环境配置 1. 拉取镜像 2. 创建启动容器 三、操作测试 1. 进入容器 2. 拉取镜像并部署 3. 访问测试 一、Portainer 简介 Portainer 是一个开源的轻量级容器管理界面&#xff0c;用于管理 Docker 容器…...

编程日记 2024/2/15 0:18:59

Linux network namespace 访问外网以及多命名空间通信(经典容器组网 veth pair + bridge 模式认知)

写在前面 整理K8s网络相关笔记博文内容涉及 Linux network namespace 访问外网方案 Demo实际上也就是 经典容器组网 veth pair bridge 模式理解不足小伙伴帮忙指正 不必太纠结于当下&#xff0c;也不必太忧虑未来&#xff0c;当你经历过一些事情的时候&#xff0c;眼前的风景已…...

编程日记 2024/2/15 0:11:53

网络渗透测试：Wireshark抓取qq图片

Wireshark Wireshark Downloadhttps://www.wireshark.org/download.html 简介 WireShark是非常流行的网络封包分析工具&#xff0c;可以截取各种网络数据包&#xff0c;并显示数据包详细信息。常用于开发测试过程中各种问题定位。本文主要内容包括&#xff1a; 1、Wireshar…...

编程日记 2024/2/15 0:08:49

网络协议与攻击模拟_16HTTP协议

1、HTTP协议结构 2、在Windows server去搭建web扫描器 3、分析HTTP协议流量 一、HTTP协议 1、概念 HTTP&#xff08;超文本传输协议&#xff09;用于在万维网服务器上传输超文本&#xff08;HTML&#xff09;到本地浏览器的传输协议 基于TCP/IP(HTML文件、图片、查询结构等&…...

编程日记 2024/2/15 0:07:48

叙事弧基础

原文&#xff1a;MasterClass. 2020. Learn About Narrative Arcs: Definition, Examples, and How to Create a Narrative Arc in Your Writing - 2021. https://www.masterclass.com/articles/what-are-the-elements-of-a-narrative-arc-and-how-do-you-create-one-in-writin…...

编程日记 2024/2/15 0:01:41

python从入门到精通（二十）：python的exe程序打包制作

python的exe程序打包制作 python打包的概念python打包的模块导入模块安装验证基本语法命令参数文件夹模式单文件模式资源嵌入exe更改图标启动画面&#xff08;闪屏&#xff09;禁用异常提示 python打包的概念 将普通的*.py程序文件打包成exe文件。exe文件即可执行文件&#xf…...

编程日记 2024/2/14 23:54:34

three.js 细一万倍教程 从入门到精通（一）

目录 一、three.js开发环境搭建 1.1、使用parcel搭建开发环境 1.2、使用three.js渲染第一个场景和物体 1.3、轨道控制器查看物体 二、three.js辅助设置 2.1、添加坐标轴辅助器 2.2、设置物体移动 2.3、物体的缩放与旋转 缩放 旋转 2.4、应用requestAnimationFrame …...

编程日记 2024/2/14 23:52:32

电路设计（16）——纪念馆游客进出自动计数显示器proteus仿真

1.设计要求 设计、制作一个纪念馆游客进出自动计数显示器。 某县&#xff0c;有一个免费参观的“陶渊明故里纪念馆”&#xff0c;游客进出分道而行&#xff0c;如同地铁有确保单向通行的措施。在入口与出口处分别设有红外检测、声响、累加计数器装置&#xff0c;当游人进&#…...

编程日记 2024/2/14 23:49:29

Python数学建模之回归分析

1.基本概念及应用场景 回归分析是一种预测性的建模技术&#xff0c;数学建模中常用回归分析技术寻找存在相关关系的变量间的数学表达式&#xff0c;并进行统计推断。例如&#xff0c;司机的鲁莽驾驶与交通事故的数量之间的关系就可以用回归分析研究。回归分析根据变量的…...

编程日记 2024/2/14 23:47:27

单片机学习笔记---DS18B20温度传感器

目录 DS18B20介绍 模拟温度传感器的基本结构 数字温度传感器的应用 引脚及应用电路 DS18B20的原理图 DS18B20内部结构框图 暂存器内部 单总线介绍 单总线电路规范 单总线时序结构 初始化 发送一位 发送一个字节 接收一位 接收一个字节 DS18B20操作流程 指令介…...

编程日记 2024/2/14 23:46:26

【网络】WireShark过滤 | WireShark实现TCP三次握手和四次挥手

目录 一、开启WireShark的大门 1.1 WireShark简介 1.2 常用的Wireshark过滤方式 二、如何抓包搜索关键字 2.1 协议过滤 2.2 IP过滤 ​编辑 2.3 过滤端口 2.4 过滤MAC地址 2.5 过滤包长度 2.6 HTTP模式过滤 三、ARP协议分析 四、WireShark之ICMP协议 五、TCP三次握…...

编程日记 2024/2/14 23:36:10

开源免费的Linux服务器管理面板分享

开源免费的Linux服务器管理面板分享 一、1Panel1.1 1Panel 简介1.2 1Panel特点1.3 1Panel面板首页1.4 1Panel使用体验 二、webmin2.1 webmin简介2.2 webmin特点2.3 webmin首页2.4 webmin使用体验 三、Cockpit3.1 Cockpit简介3.2 Cockpit特点3.3 Cockpit首页3.4 Cockpit使用体验…...

编程日记 2024/2/14 23:35:08

leetcode算法-位运算

位运算&#xff0c;直接在二进制上进行的按位操作&#xff0c;位运算的种类如下&#xff1a; 1.按位异或^:异或的含义是操作的两位不同&#xff0c;则结果为1&#xff0c;相同则结果为0&#xff0c;所以两个相同的数异或&#xff0c;结果应该是0&#xff0c;3^3的结果是0,3^4的…...

编程日记 2024/2/14 23:34:07

「MySQL」约束

概述 分类 约束描述关键字非空约束限制该字段的数据不能为 nullNOT NULL唯一约束保证该字段的所有数据都是唯一、不重复的UNIQUE主键约束主键是一行数据的唯一标识&#xff0c;要求非空且唯一PRIMARY KEY默认约束保存数据时&#xff0c;如果未指定该字段的值&#xff0c;则采…...

编程日记 2024/2/14 23:32:04

C语言：详解操作符（下）

上一篇链接&#xff1a;C语言&#xff1a;详解操作符&#xff08;上&#xff09;摘要&#xff1a; 在上篇文章中&#xff0c;我们已经讲过位操作符等涉及二进制的操作符&#xff0c;这些有助于帮助我们后期理解数据如何在计算机中运算并存储&#xff0c;接下来本篇将更多的讲述…...

编程日记 2024/2/14 23:26:59

Vue3.0（六）：VueX 4.x详解

Vuex4状态管理 什么是状态管理 在开发中&#xff0c;我们的应用程序需要处理各种各样的数据&#xff0c;这些数据需要保存在应用程序的某一个位置&#xff0c;对于这些数据的管理&#xff0c;就是 状态管理目前前端项目越来越复杂&#xff0c;多组件共享同一数据的状态很常见…...

编程日记 2024/2/14 23:22:54

突破编程_C++_面试（基础知识（13））

面试题45&#xff1a;C中的字符串如何存储 在C中&#xff0c;字符串可以通过多种方式存储&#xff0c;但最常见和推荐使用的方式是通过 std::string 类&#xff0c;该类位于 <string> 头文件中。std::string 是一个类模板的实例&#xff0c;通常用于存储字符数组&#x…...

编程日记 2024/2/14 23:17:50

掌握C语言文件操作：从入门到精通的完整指南！

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C语言学习 贝蒂的主页&#xff1a;Betty‘s blog 1. 什么是文件 文件其实是指一组相关数据的有序集合。这个数据集有一个名称&a…...

编程日记 2024/2/14 23:16:49

JavaEE作业-实验二

目录 1 实验内容 2 实验要求 3 思路 4 核心代码 5 实验结果 1 实验内容 实现两个整数求和的WEB程序 2 实验要求 ①采用SpringMVC框架实现 ②数据传送到WEB界面采用JSON方式 3 思路 ①创建一个SpringMVC项目&#xff0c;配置好相关的依赖和配置文件。 ②创建一个Con…...

编程日记 2024/2/14 23:15:49

2月8号作业

Sqlite3系统命令 .quit 退出数据库 .exit 退出数据库 .help 显示帮助信息&#xff0c;获取所有系统命令 .table 查看当前数据库下的所有表格 .schema 查看表的结构 Sqlite3语句 创建表格&#xff1a; create table 表名 (字段名 数据类型, 字段名 数据类型); create table if…...

编程日记 2024/2/14 23:04:39

08:K8S资源对象管理｜服务与负载均衡｜Ingress

K8S资源对象管理&#xff5c;服务与负载均衡&#xff5c;Ingress DaemonSet控制器污点策略容忍容忍污点 其他资源对象Job资源对象 有限生命周期CronJob资源对象 集群服务服务自动发现headless服务 实现服务定位与查找 服务类型 Ingress插件 发布服务的方式 DaemonSet控制器 Da…...

编程日记 2024/2/14 22:57:29

HarmonyOS 横屏调试与真机横屏运行

我们有些程序 需要横屏才能执行出效果 我们在预览器上 点击如下图指向出 就进入一个横屏调试了 但 我们真机运行 依旧是竖着的 我们如下图 找到 module.json5 在 abilities 下面 第一个对象 最下面 加上 "orientation": "landscape"然后 我们再真机运…...

编程日记 2024/2/14 22:55:26

Javaweb基础-tomcat，servlet

一.配置文件基础&#xff1a; properties配置文件&#xff1a; 由键值对组成 键和值之间的符号是等号 每一行都必须顶格写&#xff0c;前面不能有空格之类的其他符号 xml配置文件&#xff1a;&#xff08;xml语法HTML语法HTML约束&#xff09;xml约束-DTD / Schema DOM4…...

编程日记 2024/2/14 22:54:24

HCIA-HarmonyOS设备开发认证V2.0-3.2.轻量系统内核基础-中断管理

目录 一、中断基础概念二、中断管理使用说明三、中断管理模块接口四、代码分析&#xff08;待续...&#xff09;坚持就有收获 一、中断基础概念 在程序运行过程中&#xff0c;出现需要由 CPU 立即处理的事务时&#xff0c;CPU 暂时中止当前程序的执行转而处理这个事务&#xf…...

编程日记 2024/2/14 22:53:23

【开源】JAVA+Vue+SpringBoot实现就医保险管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 科室档案模块2.2 医生档案模块2.3 预约挂号模块2.4 我的挂号模块 三、系统展示四、核心代码4.1 用户查询全部医生4.2 新增医生4.3 查询科室4.4 新增号源4.5 预约号源 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVue…...

编程日记 2024/2/14 22:52:22

Stable Diffusion 模型下载：DreamShaper XL（梦想塑造者 XL）

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 DreamShaper 是一个分格多样的大模型&#xff0c;可以生成写实、原画、2.5D 等…...

编程日记 2024/2/14 22:46:15

【机器学习】数据清洗之处理异常点

&#x1f388;个人主页&#xff1a;甜美的江 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步…...

编程日记 2024/2/14 22:44:12

JavaScript学习之旅10------掌握jQuery：实用应用案例深度解析

目录 写在开头1. jQuery基础知识回顾1.1. 选择器1.2. 事件1.3. 效果1.4. DOM操作1.5. AJAX 2. 实用应用案例分析2.1. 动态内容加载2.2. 表单验证2.3. 图像滑动门效果2.4. 创建动态导航菜单 3. 高级技巧与最佳实践3.1. 优化jQuery代码的性能3.2. jQuery插件的使用和自定义3.3. j…...

编程日记 2024/2/14 22:43:11

017_逆向工程搭建和使用

文章目录 启动代码生成器然后访问第一步处理：前端代码删除逆向生成的代码中有好多东西要引入创建gulimall-common插曲：修改模块名dao层entity层service层controllerRQuery文件当中的报错☆ 调整renren-generator的逆向工程逆向生成代码当中有什么总结...

编程日记 2024/2/14 22:42:10

位运算+leetcode（1）

基础 1.基础知识 以下都是针对数字的二进制进行操作 >> 右移操作符<< 左移操作符~ 取反操作符 & 有0就是0&#xff0c;全一才一 | 有一才一 &#xff0c;全0才0^ 相同为0&#xff0c;相异为1 异或( ^ )运算的规律 a ^ 0 a a ^ a 0a ^ b ^ c a ^ (b …...

编程日记 2024/2/14 22:38:06

如何在 JavaScript 中比较两个日期 – 技术、方法和最佳实践

在 JavaScript 中&#xff0c;您可以使用 date 对象有效地处理应用程序中的日期、时间和时区。 Date 对象可帮助您有效地操作数据、处理各种与日期相关的任务&#xff0c;并在创建实际应用程序时执行一些计算。 &#xff08;本文内容参考&#xff1a;java567.com&#xff09;…...

编程日记 2024/2/14 22:35:03

【More Effective C++】条款17：考虑使用lazy evaluation

含义&#xff1a;将计算拖延到必须计算的时候&#xff0c;以下为4个场景 优点&#xff1a;避免不必要的计算&#xff0c;节省成本 缺点&#xff1a; 管理复杂性&#xff1a;可能会增加代码复杂性&#xff0c;特别是在多线程环境中需要正确处理同步和并发问题。性能开销&…...

编程日记 2024/2/14 22:34:02

深入探索Pandas读写XML文件的完整指南与实战read_xml、to_xml【第79篇—读写XML文件】

深入探索Pandas读写XML文件的完整指南与实战read_xml、to_xml XML&#xff08;eXtensible Markup Language&#xff09;是一种常见的数据交换格式&#xff0c;广泛应用于各种应用程序和领域。在数据处理中&#xff0c;Pandas是一个强大的工具&#xff0c;它提供了read_xml和to…...

编程日记 2024/2/14 22:31:59

如何在我们的模型中使用Beam search

在上一篇文章中我们具体探讨了Beam search的思想以及Beam search的大致工作流程。根据对Beam search的大致流程我们已经清楚了&#xff0c;在这我们来具体实现一下Beam search并应用在我们的seq2seq任务中。 1. python中的堆&#xff08;heapq&#xff09; 堆是一种特殊的树形…...

编程日记 2024/2/14 22:30:58

PKI - 借助Nginx 实现Https 服务端单向认证、服务端客户端双向认证

文章目录 Openssl操系统默认的CA证书的公钥位置Nginx Https 自签证书1. 生成自签名证书和私钥2. 配置 Nginx 使用 HTTPS3. 重启 Nginx 服务4. 直接访问5. 不验证证书直接访问6. 使用server.crt作为ca证书验证服务端解决方法1&#xff1a;使用 --resolve 参数进行请求域名解析解…...

编程日记 2024/2/14 22:29:57

WebSocket原理详解

目录 1.引言 1.1.使用HTTP不断轮询 1.2.长轮询 2.websocket 2.1.概述 2.2.websocket建立过程 2.3.抓包分析 2.4.websocket的消息格式 3.使用场景 4.总结 1.引言 平时我们打开网页&#xff0c;比如购物网站某宝。都是点一下列表商品&#xff0c;跳转一下网页就到了商品…...

编程日记 2024/2/14 22:28:56

在面试中如何回复擅长vue还是react

当面试官问及这个问题的时候&#xff0c;我们需要思考面试官是否是在乎你是掌握vue还是react吗&#xff1f;&#xff1f;&#xff1f; 在大前端的一个环境下&#xff0c;当前又有AI人工智能的加持辅助&#xff0c;我们是不是要去思考企业在进行前端岗位人员需求的时候&#xf…...

编程日记 2024/2/14 22:27:55

使用Vue.js输出一个hello world

导入vue.js <script src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.js"></script> 创建一个标签 <div id"app">{{message}}</div> 接管标签内容&#xff0c;创建vue实例 <script type"text/javascript">va…...

编程日记 2024/2/14 22:25:52

15 ABC基于状态机的按键消抖原理与状态转移图

1. 基于状态机的按键消抖 1.1 什么是按键&#xff1f; 从按键结构图10-1可知&#xff0c;按键按下时&#xff0c;接点&#xff08;端子&#xff09;与导线接通&#xff0c;松开时&#xff0c;由于弹簧的反作用力&#xff0c;接点&#xff08;端子&#xff09;与导线断开。 从…...

编程日记 2024/2/14 22:24:50