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

CSS语法介绍

news 2025/11/14 3:10:38

文章目录

前言
一、CSS引入方式
- 1.行内操作
- 2.内部操作
- 3.外部操作
二、常用选择器
- 1.标签选择器
- 2.类选择器
- 3.id选择器
- 4.群组选择器
- 5.后代选择器
三、字体常用设置
- 1.字体类型
- 2.字体大小
- 3.字体样式
- 4.字体粗细
四、div盒子模型
- 1.盒子边框
- 2.外边距
- 3.内边距
- 4.浮动
综合实战案例

前言

以盖房子比喻我们的网页，HTML就是房屋主体，CSS就是给房屋装修，JS就是给房屋买家具，今天介绍CSS语法部分。

一、CSS引入方式

1.行内操作

CSS引入方式的第一种是行内操作，首先我们先写一组HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title>
</head>
<body><p>我是P标签 -- 1</p>
<p>我是P标签 -- 2</p>
</body>
</html>

运行结果如下：
在这里插入图片描述

我们会发现字体没有颜色，大小也很单调，接下来给字体加上颜色及修改大小，用到style属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title>
</head>
<body>
<!--1、行内CSS操作-->
<p style="color: red">我是P标签 -- 1</p>
<p style="color: green; font-size: 30px">我是P标签 -- 2</p>
</body>
</html>

代码运行结果如下：
在这里插入图片描述

这时候我们也会发现如果要定义的样式非常多，写在标签内部就很长很乱，代码阅读性很差，接下来会用到第二种CSS引入方式。

2.内部操作

内部操作也叫头部操作，在head里面使用style标签，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title><!--2、头部CSS操作--><style>span {color: purple;font-family: 宋体;}</style>
</head>
<body>
<span>学习：头部CSS操作</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述

假设现在样式标签很多，全部都写在该HTML文件中，也会显得代码很冗长，接下来介绍第三种CSS引入方式。

3.外部操作

外部CSS操作，在外部单独新建一个css文件，名字随便起，比如这里取名为demo.css，然后回到HTML文件中继续写代码，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS引入</title><!--3、外部CSS操作--><link rel="stylesheet" href="demo.css">
</head>
<body>
<!--i标签是斜体标签-->
<i>好好学习，天天向上</i>
</body>
</html>

CSS代码如下：
在这里插入图片描述

运行HTML代码后结果如下：
在这里插入图片描述
三种CSS引入方式根据自己喜好选择即可，如果项目非常大，一定是使用外部CSS引入的方式。

二、常用选择器

选择器就是选中标签的方式，分为5种。

1.标签选择器

标签选择器是通过标签名选中标签，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签选择器</title><!--标签选择器通过标签名选中标签--><style>b {color: red;}span {color: green;}</style>
</head>
<body>
<!--b标签是粗体标签-->
<b>我是b标签 -- 1</b> <hr>
<span>我是span标签</span> <hr>
<b>我是b标签 -- 2</b>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.类选择器

类选择器是通过class属性值选中标签，现在有代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器.: class</title><style>p {color: red;}</style>
</head>
<body>
<p>我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p>我是p标签 -- 3</p>
</body>
</html>

运行结果如下：
在这里插入图片描述

假如我现在只想让标签1和3改变颜色，2不变，这时候就要对1和3加上属性class，class类用.点指代，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器.: class</title><style>.p1 {color: red;}</style>
</head>
<body>
<p class="p1">我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p class="p1">我是p标签 -- 3</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
代码做进一步升级：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器.: class</title><style>.p1 {color: red;}</style>
</head>
<body>
<p class="p1">我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p class="p1">我是p标签 -- 3</p>
<span class="p1">我是span -- 3</span>
</body>
</html>

这时候span标签的内容也会变颜色，因为类选择器选中的是同一类，而不管是不是同一种标签，运行结果如下：
在这里插入图片描述

3.id选择器

id选择器用#号来指代，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器 -- #</title><style>#p1 {font-size: 20px;color: red;}</style>
</head>
<body>
<p id="p1">id选择器 -- 1</p>
<p>id选择器 -- 2</p>
<p>id选择器 -- 3</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
这时候我们继续修改代码，为下面的p标签也设置同样的id和属性值，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器 -- #</title><style>#p1 {font-size: 20px;color: red;}</style>
</head>
<body>
<p id="p1">id选择器 -- 1</p>
<p id="p1">id选择器 -- 2</p>
<p>id选择器 -- 3</p>
</body>
</html>

但是里面代码很明显是有错误的，因为id值是唯一的，类似于我们的身份证号码，不能有重复的，而类class是可以有多个重复的，这就是id选择器的特殊之处。

4.群组选择器

群组选择器用,逗号来指代，我们来写一组代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>群组选择器 -- ,</title><style>span {color: red;}p {color: red;}</style>
</head>
<body>
<span>我爱你</span>
<p>好天气</p>
</body>
</html>

这组代码实现的功能就是给span标签和p标签内容都改颜色，虽然可以实现，但是我们会发现代码变的冗长了，如果有多个不同标签，那么会更长，这时候可以使用群组选择器，将代码缩短，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>群组选择器 -- ,</title><style>span, p {color: green;}</style>
</head>
<body>
<span>我爱你</span>
<p>好天气</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

5.后代选择器

我们可以看这样一组代码：

<head><meta charset="UTF-8"><title>后代选择器</title><style>span {color: red;}</style>
</head>
<body>
<p><a href=""><span>学习后代选择器</span></a>
</p>
<span>我是span标签</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述
假如我们只想让a标签里面的span标签改变颜色，这里就要用到后代选择器，当然也可以单独设置id或者class，但是我们用后代选择器来看看怎么改，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器</title><style>p > a > span {color: blue;}</style>
</head>
<body>
<p><a href=""><span>学习后代选择器</span></a>
</p>
<span>我是span标签</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述

三、字体常用设置

1.字体类型

字体类型用font-family属性，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体类型*/font-family: 宋体;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
可以继续改为黑体，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体类型*/font-family: 黑体;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.字体大小

字体大小用属性font-size，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体大小*/font-size: 30px;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

3.字体样式

字体样式使用属性font-style，属性值常用的有italic(斜体)和normal(正常)，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体样式*/font-style: italic;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

4.字体粗细

字体粗细使用font-weight属性，常用属性值就是normal(正常)和bold(粗)，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体设置</title><style>#p1 {/*字体粗细*/font-weight: bold;}</style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

四、div盒子模型

盒子模型就是给网页划分不同区域，每个区域有特定的功能，盒子里面的标签如果要转移位置，只需挪动盒子即可，不用一个个标签去挪动，说白了，就是便于管理。

1.盒子边框

盒子模型的标签是div，具体用法代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框</title><style>div {/*盒子宽度width*/width: 200px;/*盒子高度height*/height: 200px;/*盒子边框border*//*border有三个参数：粗细 线的类型 颜色*//*线类型有：实线(solid) 虚线(dashed) 点线(dotted)*/border: 1px solid red;}</style>
</head>
<body>
<div></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

盒子建好之后，我们可以在里面写一些标签内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框</title><style>div {width: 200px;height: 200px;border: 1px solid red;}</style>
</head>
<body>
<div><p>天气真好</p><p>天气真好</p><p>天气真好</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

还可以给盒子添加背景颜色，使用background-color属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子边框</title><style>div {width: 200px;height: 200px;border: 1px solid red;background-color: orange;}</style>
</head>
<body>
<div></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.外边距

接下来看看外边距，外边距是盒子与盒子之间的边距，以及盒子与浏览器之间的边距，我们先创建两个盒子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;}</style>
</head>
<body>
<div id="d1"></div><div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

div标签是默认从上往下展示，可以看到两个盒子目前是挨在一起，接下来为他们设置边距，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;/*上边距*/margin-top: 50px;/*左边距*/margin-left: 50px;}</style>
</head>
<body>
<div id="d1"></div><div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

接下来很关键的是如何让盒子居中，这里用到margin属性，属性值是auto，意思就是自动根据浏览器大小居中显示，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距</title><style>#d2 {width: 300px;height: 300px;background-color: orange;/*盒子居中*/margin: auto;}</style>
</head>
<body>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

3.内边距

内边距是盒子里面内容与盒子之间的边距，可以先看下面这组代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内边距</title><style>.d1 {width: 300px;height: 300px;border: 2px solid red;}</style>
</head>
<body>
<div class="d1"><p>学习内边距</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

接下来把盒子里面内容上下左右距离调整，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内边距</title><style>.d1 {width: 300px;height: 300px;border: 2px solid red;/*内容距离盒子上边的边距*/padding-top: 50px;/*内容距离盒子左边的边距*/padding-left: 50px;}</style>
</head>
<body>
<div class="d1"><p>学习内边距</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述
这时候我们会注意到盒子整体变大了，这是因为内边距会撑大盒子，以保持除开刚才上边和左边撑开的内边距，盒子整体大小依然是我们设置的尺寸300px。

4.浮动

浮动就是把原有默认的位置进行移动，比如我们上面定义的两个盒子默认是上下挨着展示，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

现在我将下面的盒子位置移动到右边，称为浮动，用到float属性，值为right，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style>#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;float: right;}</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

综合实战案例

实战案例需求：编写注册页面，先看效果图如下：
在这里插入图片描述

附上全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册页面(案例)</title><style>div {width: 300px;height: 320px;border: 1px solid grey;border-radius: 5px;border: 1px solid grey;padding: 10px;margin: auto;}span {border-bottom: 5px solid purple;padding-bottom: 6px;}#a1 {float: right;color: deepskyblue;text-decoration: none;}.A {width: 290px;height: 30px;margin-bottom: 8px;border-radius: 5px;border: 1px solid grey;}.B {width: 190px;height: 30px;margin-bottom: 8px;border-radius: 5px;border: 1px solid grey;}.C {width: 90px;height: 30px;border-radius: 5px;border: 1px solid grey;color: purple;}.D {width: 90px;height: 30px;border-radius: 5px;border: 1px solid grey;background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzhuangjiba.com%2Fd%2Ffile%2Fhelp%2F2018%2F08%2Fcfdefaddb3f47d78f8c66a7de28720aa.png&refer=http%3A%2F%2Fzhuangjiba.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655473640&t=3942417cfe379e590c48a9340d06952b");background-size: 85px 30px;vertical-align: middle;}.E {width: 290px;height: 30px;border-radius: 5px;border: 1px solid grey;color: deepskyblue;}</style>
</head>
<body><div><form action=""><span>请注册</span><a id="a1" href="">立即登录></a><hr><input type="text" placeholder="请输入手机号" class="A"> <br><input type="text" placeholder="请输入短信验证码" class="B"><input type="button" value="发送验证码" class="C"> <br><input type="text" placeholder="请输入用户名"  class="A"> <br><input type="password" placeholder="请输入密码"  class="A"> <br><input type="password" placeholder="请再次输入密码"  class="A"> <br><input type="text" placeholder="请输入图形验证码" class="B"><input type="button" class="D"><br><input type="submit" value="立即注册" class="E"></form>
</div>
</body>
</html>

CSS语法介绍

文章目录前言一、CSS引入方式1.行内操作2.内部操作3.外部操作二、常用选择器1.标签选择器2.类选择器3.id选择器4.群组选择器5.后代选择器三、字体常用设置1.字体类型2.字体大小3.字体样式4.字体粗细四、div盒子模型1.盒子边框2.外边距3.内边距4.浮动综合实战案例前言以…...

编程日记 2024/5/27 2:59:02

Jeecg | 完成配置后，如何启动整个项目？

前端启动步骤： 1. 以管理员身份打开控制台，切换到前端项目目录。 2. 输入 pnpm install 3. 输入 pnpm dev 4. 等待前端成功运行。可以看到此时前端已经成功启动。后端启动步骤： 1. 启动 mysql 服务器。管理员身份打开控制台&#…...

编程日记 2024/5/27 2:58:01

Kubectl 的使用——k8s陈述式资源管理

一、kebuctl简介: kubectl 是官方的CLI命令行工具，用于与 apiserver 进行通信，将用户在命令行输入的命令，组织并转化为 apiserver 能识别的信息，进而实现管理 k8s 各种资源的一种有效途径。对资源的增、删、查操作比较方便&…...

编程日记 2024/5/27 2:57:00

多天线技术

多天线技术可以分为两类：分集技术和空间复用技术。分集技术利用多天线接收或者发射载有同一信息的信号，提高传输的可靠性。分集技术是将瑞利衰落无线信道换成更加稳定的信道。发射端未知CSI时的信道容量发射端已知CSI时的信道容量信道估计&#xff…...

编程日记 2024/5/27 2:55:59

Meta发布Chameleon模型预览，挑战多模态AI前沿

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2024/5/27 2:54:58

声压级越大，STIPA 越好，公共广播就越清晰吗？

在公共广播中，有些朋友经常问到是不是声压越大，广播清晰度就越高，下面我从搜集了一些专业技术资料，供大家参考。一、声压级越大，STIPA 越好吗？ 不完全是。最初，人们认为当声压级达到 60 dBA 以…...

编程日记 2024/5/27 2:52:55

基于springboot+vue的4S店车辆管理系统

开发语言：Java框架：springbootJDK版本：JDK1.8服务器：tomcat7数据库：mysql 5.7（一定要5.7版本）数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包：…...

编程日记 2024/5/27 2:51:54

深入理解 HTTP 缓存

浏览器缓存不是本地存储，要分清。浏览器缓存分为强缓存和协商缓存。本篇文章参考：使用 HTTP 缓存防止不必要的网络请求讲解之前，我画了个简图来解释浏览器从缓存中获取资源的过程。 1. 强缓存强缓存是浏览器缓存机制中的一种，…...

编程日记 2024/5/27 2:50:53

upload-labs 通关方法

目录 Less-1（JS前端验证） Less-2（MIME验证） Less-3（黑名单，特殊过滤） Less-4（黑名单验证，.htaccess） Less-5（黑名单，点空格点绕过…...

编程日记 2024/5/27 2:49:50

5-26 Cpp学习笔记

1、如果子类实现了基类的函数，返回值、参数都相同，就覆盖了基类的函数。 2、使用作用域解析运算符来调用基类的函数。myDinner.Swim(); —— 调用子类的。myDinner.Fish::Swim(); —— 调用基类的(基类是Fish) 3、在子类中使用关键字using解除对Fish::…...

编程日记 2024/5/27 2:48:49

YOLOv8_pose的训练、验证、预测及导出[关键点检测实践篇]

1.关键点数据集划分和配置从上面得到的数据还不能够直接训练，需要按照一定的比例划分训练集和验证集，并按照下面的结构来存放数据，划分代码如下所示，该部分内容和YOLOv8的训练、验证、预测及导出[目标检测实践篇]_yolov8训练测试验证-CSDN博客是重复的，代码如下： …...

编程日记 2024/5/27 2:44:44

架构师必考题--软件系统质量属性

软件系统质量属性 1.质量属性2.质量属性场景描述3.系统架构评估这个知识点是系统架构师必考的题目，也是案例分析题第一题， 有时候会出现在选择题里面，考的分数也是非常高的。 1.质量属性属性说明可用性错误检测/恢复/避免性能资源需求/管理…...

编程日记 2024/5/27 2:43:43

使用AWR对电路进行交流仿真---以整流器仿真为例

使用AWR对电路进行交流仿真—以整流器仿真为例生活不易，喵喵叹气。马上就要上班了，公司的ADS的版权紧缺，主要用的软件都是NI 的AWR，只能趁着现在没事做先学习一下子了，希望不要裁我。本AWR专栏只是学习的小小记录而…...

编程日记 2024/5/27 2:42:42

在UbuntuLinux系统上安装MySQL和使用

前言最近开始计划在Ubuntu上写一个webserver的项目，看到一些比较好的类似的项目使用了MySQL，我就打算先把环境搞好跑一下试试，方便后面更进一步的学习。其实在本机windows上我已经有一个mysql，不过在Unbuntu上安装MySQL 首先…...

编程日记 2024/5/27 2:40:40

React 如何自定义 Hooks

自定义 Hooks React 内部自带了很多 Hooks 例如 useState、useEffect 等等，那么我们为什么还要自定义 Hooks？使用 Hooks 的好处之一就是重用，可以将代码从组件中抽离出来定义为 Hooks，而不用每个组件中重复去写相同的代码。首先是…...

编程日记 2024/5/27 2:39:39

智能家居完结 -- 整体设计

系统框图前情提要: 智能家居1 -- 实现语音模块-CSDN博客智能家居2 -- 实现网络控制模块-CSDN博客智能家居3 - 实现烟雾报警模块-CSDN博客智能家居4 -- 添加接收消息的初步处理-CSDN博客智能家居5 - 实现处理线程-CSDN博客智能家居6 -- 配置 ini文件优化设备添加-CS…...

编程日记 2024/5/27 2:37:37

双指针用法练习题（2024/5/26）

1三数之和给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。注意：答案中不可以包含重复的三元…...

编程日记 2024/5/27 2:33:33

目录写在前面4. Ansible Modules 模块4.1 Ansible常用模块4.1.1 Command模块4.1.2 shell模块4.1.3 scrpit模块4.1.4 file模块4.1.5 copy模块4.1.6 lineinfile模块4.1.7 systemd模块4.1.8 yum模块4.1.9 get_url模块4.1.10 yum_repository模块4.1.11 user模块4.1.12 group模块4.…...

编程日记 2024/5/27 2:31:31

【Python特征工程系列】一文教你使用PCA进行特征分析与降维（案例+源码）

这是我的第287篇原创文章。一、引言主成分分析（Principal Component Analysis, PCA）是一种常用的降维技术，它通过线性变换将原始特征转换为一组线性不相关的新特征，称为主成分，以便更好地表达数据的方差。在特征重要…...

编程日记 2024/5/27 2:30:30

【Linux】Ubuntu系统挂载NAS文件夹

测试系统：Ubuntu24.02 1. 安装必要的软件包 sudo apt update sudo apt install cifs-utils 2. 创建挂载点 sudo mkdir -p /mnt/nas 3. 获取当前用户的 UID 和 GID id -u id -g 4. 挂载：设置用户名/密码/nas地址 sudo mount -t cifs -o username,…...

编程日记 2024/5/27 2:29:29

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2025/11/12 18:08:16

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...

编程新知 2025/9/21 0:49:02

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中，工业自动化网关起着至关重要的作用，尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关，为水泥厂实现高效生产与精准控制提供了有力支持。水泥厂设备众多，其中不少设备采用Devicenet协议。Devicen…...

编程新知 2025/11/11 2:17:40

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2025/11/13 18:54:21

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ，其中 inorder 是二叉树的中序遍历， postorder 是同一棵树的后序遍历，请你构造并返回这颗二叉树。示例 1: 输入：inorder [9,3,15,20,7…...

编程新知 2025/11/9 9:08:19

小智AI+MCP

什么是小智AI和MCP 如果还不清楚的先看往期文章手搓小智AI聊天机器人 MCP 深度解析：AI 的USB接口如何使用小智MCP 1.刷支持mcp的小智固件 2.下载官方MCP的示例代码 Github：https://github.com/78/mcp-calculator 安这个步骤执行其中MCP_ENDPOI…...

编程新知 2025/11/10 4:48:27

深入解析光敏传感技术：嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战光敏电阻作为经典的光电传感器件，其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时，价带电子受激发跃迁至导带，形成电子-空穴对，导致材料电导率显著提升。…...

编程新知 2025/11/11 2:11:32

C++ 类基础：封装、继承、多态与多线程模板实现

前言 C 是一门强大的面向对象编程语言，而类（Class）作为其核心特性之一，是理解和使用 C 的关键。本文将深入探讨 C 类的基本特性，包括封装、继承和多态，同时讨论类中的权限控制，并展示如何使用类…...

编程新知 2025/10/17 13:17:02

C# WPF 左右布局实现学习笔记(1)

开发流程视频： https://www.youtube.com/watch?vCkHyDYeImjY&ab_channelC%23DesignPro Git源码： GitHub - CSharpDesignPro/Page-Navigation-using-MVVM: WPF - Page Navigation using MVVM 1. 新建工程新建WPF应用（.NET Framework) 2.…...

编程新知 2025/11/13 19:53:10

文章目录

前言

一、CSS引入方式

1.行内操作

2.内部操作

3.外部操作

二、常用选择器

1.标签选择器

2.类选择器

3.id选择器

4.群组选择器

5.后代选择器

三、字体常用设置

1.字体类型

2.字体大小

3.字体样式

4.字体粗细

四、div盒子模型

1.盒子边框

2.外边距

3.内边距

4.浮动

综合实战案例

相关文章：