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

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

news 来源：原创 2025/6/18 7:50:45

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

系列文章目录

前言

一、图文混排-理论部分

1. 浮动（Float）

2. 文本对齐（Text Alignment）

3. 背景图片（Background Image）

4. Flexbox布局

5. Grid布局

6. 相对定位和绝对定位

7. 文本环绕（Shape-Outside）

8.注意事项

二、图文混排-实战部分

三、表格-理论部分

四、表格-实战部分

五、表单-理论部分

六、表单-实战部分

七、学校官网一级导航栏

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

注：从这里开始，我们要开始使用外部引用的css样式的方式进行设计了，比如图文混排-实战部分的外部链接里的.css文件：../css/cs2-1.css 用来存放css样式，这里你需要自定义一个.css的文件，存放你的css样式，然后在html文件部分对CSS文件进行引用，其他也类似。

一、图文混排-理论部分

CSS的图文混排是指在网页中同时展示文本和图片，并通过CSS技术控制它们的位置、间距和对齐方式，以达到美观的布局效果。以下是CSS图文混排的主要技术和实现方法：

1. 浮动（Float）

浮动是最常用的图文混排技术之一，通过float属性可以让图片或文本块在页面上浮动，其他内容会环绕在其周围。

css

img {float: left; /* 或 right */margin-right: 20px; /* 图片右侧留白 */margin-bottom: 20px; /* 图片下方留白 */
}

html

<p><img src="image.jpg" alt="示例图片">这里是环绕图片的文本内容。文本会环绕在图片的周围，形成图文混排的效果。
</p>

2. 文本对齐（Text Alignment）

使用text-align属性可以控制文本相对于图片的对齐方式。

css

img {display: block;margin: 0 auto; /* 图片居中 */
}

html

<p><img src="image.jpg" alt="示例图片">这里是环绕图片的文本内容。文本会环绕在图片的周围，形成图文混排的效果。
</p>

3. 背景图片（Background Image）

通过CSS的background-image属性，可以将图片作为元素的背景，从而实现更复杂的图文混排效果。

css

div {background-image: url('image.jpg');background-repeat: no-repeat;background-position: right bottom; /* 图片位置 */background-size: cover; /* 图片尺寸 */padding: 20px; /* 内边距 */
}

4. Flexbox布局

Flexbox是一种现代的布局方式，可以轻松实现图文混排，尤其是在需要更复杂的对齐和分布时。

css

.container {display: flex;align-items: center; /* 垂直居中 */gap: 20px; /* 图片和文本之间的间距 */
}img {width: 200px; /* 固定图片宽度 */
}

示例HTML：

<div class="container"><img src="image.jpg" alt="示例图片"><p>这里是与图片并排显示的文本内容。</p>
</div>

5. Grid布局

CSS Grid布局是另一种强大的布局方式，适合更复杂的图文混排需求。

css

.container {display: grid;grid-template-columns: auto 1fr; /* 第一列自动宽度，第二列占据剩余空间 */gap: 20px; /* 图片和文本之间的间距 */align-items: center; /* 垂直居中 */
}

6. 相对定位和绝对定位

通过position属性可以实现更复杂的图文混排效果，尤其是在需要精确控制元素位置时。

css

.container {position: relative;
}img {position: absolute;top: 0;right: 0;
}

7. 文本环绕（Shape-Outside）

CSS的shape-outside属性可以定义文本环绕图片的形状，使得文本可以环绕在非矩形形状的图片周围。

css

img {float: left;shape-outside: circle(50%); /* 文本环绕圆形图片 */clip-path: circle(50%); /* 图片显示为圆形 */
}

8.注意事项

图片大小：确保图片大小合适，不会影响页面加载速度。
响应式设计：使用响应式图片和布局技术，使图文混排在不同设备上都能良好显示。
可访问性：为图片添加alt属性，以提高可访问性。

通过合理使用这些技术，可以实现各种复杂的图文混排效果，使网页内容更加丰富和美观。

注：我们本次只使用一小部分知识点，制作一个简单的图文混排实例，剩下的的部分我们会在后面的实战中遇到，这次先作为铺垫一下。

二、图文混排-实战部分

1.代码如下

html部分

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Css文本文档</title><!-- <link rel="stylesheet" type="text/css" href="../css/cs2-1.css" /> --><link rel="stylesheet" type="text/css" href="../css/cs2-1.css"/><style type="text/css"></style></head><body><!-- 先html 后css --><h1>青春战“疫”，你我同行 </h1><h5>日期：2022-03-14 15:48:48  作者：图/文/团委   访问量：626  【字体：大 中 小】 --> 打印</h5><hr><p class="sj hg">疫情就是命令，防控就是责任。3月11日以来，在盐湖区全员核酸检测<img src="../img/img1.jpg" class="right" height="100px" >工作中，校团委、青协、国旗班组织300余名大学生志愿者，全力增援一线核酸检测工作，把青春担当体现在急难任务上，把青春风采展现在抗疫一线。强国有我，携手抗击新冠疫情的路上，青年人必不辱使命！</p><p class="sj hg"> <img src="../img/img1.jpg" class="left" height="180px" >开展全员核酸检测时间紧、任务重，为保障各项工作安全、有序、高效开展，青年志愿者们提前到达我校核酸检测点和盐湖区2个小区核酸检测点，接受相关培训后，志愿者们各司其职，投入扫码采样、知识宣讲解答、维护现场秩序、场地清理打扫等工作中。很多志愿者一站就是几个小时，顾不上喝一口水，争分夺秒地引导大家有序排队，协助医护人员顺利完成我校师生、盐湖区2个小区居民的全员核酸检测任务。医护人员与志愿者们一起用敬业、奉献守护着大家，带给大家踏实的安全感、幸福感。</p><p ><span class="left">党</span>有号召，团有行动。哪里有需要，哪里就有青年志愿者。面对疫情防控工作，校团委将组织动员广大团员青年以实际行动践行,“请党放心，强国有我”的青春誓言，积极落实我校疫情防控各项部署，筑牢阻断疫情的严密防线，为坚决打赢疫情防控阻击战贡献青春力量。疫情就是命令，防控就是责任。强国有我，携手抗击新冠疫情的路上，青年人必不辱使命！</p><!-- <img src="../img/img1.jpg" class="right"> --><!-- <a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a> --></body>
</html>

css部分

h1{/* 文本居中 */text-align: center;font-size: 40px;/* 字体可以取一种或一系列 利用逗号隔开 */font-family:"times new roman", "楷体",arial;/* 变大小写 */text-transform: capitalize;/* 加粗 100-900 400正常 700等同于bold*/font-weight: bold;/* 斜体 */font-style: italic;/* 字间距 letter-spacing 字母之间的距离 word-spacing 不能识别中文，单词之间的距离*/letter-spacing: 5px;/* word-spacing: 60px; */
}
h5{font-family: "宋体";font-weight: 400;text-align: center;margin-bottom: 0px;
}
hr{width: 85%;height: 8px;background-color: yellow;border: 0px;/* border: 0px; *//* border-style: dashed;border-width: 3px;border-color: red; *//* border: 3px dashed red; */background-image: linear-gradient(to right,red,blue);/* background-image: radial-gradient(to right,red,blue,green); */
}
p{font-family: "宋体";font-size: 20px;/* 首行缩进 *//* text-indent: 2em; *//* 行间距 *//* line-height: 40px; *//* 段间距margin */margin-bottom: 60px;margin-right: 100px;margin-left: 100px;text-align: justify;
}
img{width: 200px;
}
.left{float: left;
}
.right{float: right;
}
/* 首字下沉 第一不可以首行缩进 第二不可以有行间距*/
p span{font-size: 3em;font-weight: 700;
}
/* css写作规则 写的少用的多 */
.sj{text-indent: 2em;
}
.hg{line-height: 40px;
}

2.代码运行如下

三、表格-理论部分

1.HTML表格结构

使用<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>等标签创建表格。

使用colspan合并单元格。

2.CSS表格样式

使用border属性设置边框。

使用text-align和padding调整文本对齐和间距。

使用margin: auto实现水平居中。

使用伪类选择器nth-child实现隔行变色。

四、表格-实战部分

1、代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格样式</title><style type="text/css">table{border:1px solid black;font:24px arial;text-align: center;/* 盒子在页面上的居中 */margin: 10px auto;}/* 1.立体表格 */tbody tr{background-color: #ccc;}th,td{border:3px soild #eee;border-right-color: #666;border-bottom-color: #666;padding: 5px;}/* 2.隔行变色 奇数行和偶数行 两种方法 命名类 伪类选择器 */tbody tr.odd{background-color: #aaa;	}/* 使用伪类选择器设置偶数行的背景颜色为深灰色。 *//* tbody tr:nth-child(even){background-color: #aaa;				} */</style></head><body><table><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>家庭住址</th></tr></thead><tbody><tr class="odd"><td>20200631</td><td>张三</td><td>男</td><td>22</td><td>山西太原</td></tr><tr><td>20200632</td><td>李四</td><td>男</td><td>21</td><td>山西晋城</td></tr><tr class="odd"><td>20200633</td><td>王五</td><td>男</td><td>20</td><td>山西长治</td></tr><tr ><td>20200634</td><td>赵六</td><td>男</td><td>22</td><td>山西吕梁</td></tr></tbody><tfoot><tr><td>total</td><td colspan="4">公司四条数据</td></tr></tfoot></table><a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a></body>
</html>

2、代码运行如下：

五、表单-理论部分

1.HTML表单元素

使用<form>、<input>、<select>、<option>等标签创建表单。

使用placeholder属性为输入框提供占位符文本。

2.CSS表单元素

使用border属性设置边框样式。

使用font-size调整字体大小。

使用id选择器为特定元素设置样式。

使用类选择器为多个元素设置相同的样式。

六、表单-实战部分

1.代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单样式</title><style type="text/css">#txt1{border:none;border-bottom:  1px dashed red;font-size: 30px;}#sp1{font:30px"arial black";}select{font-size: 30px;border: none;}.blue{background-color: blue;}.red{background-color: red;}.green{background-color: green;}.yellow{background-color: yellow;}</style></head><body><form action="" method="post"> <!-- 定义一个表单，提交到当前页面，使用POST方法 --><span id="sp1"> <!-- 用于显示文本标签 -->姓名：</span>	<input type="text" name="" id="txt1" value="" placeholder="请输入你的名字"/><br><br>  <!-- 定义一个文本输入框，带有占位符文本 --><span id="sp1"> <!-- 用于显示文本标签 -->请选择你喜欢的颜色:</span><select name=""><option value="" class="blue">蓝色</option><option value="" class="red">红色</option><option value="" class="green">绿色</option><option value="" class="yellow">黄色</option></select></form><a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a></body>
</html>

2.代码运行如下

七、学校官网一级导航栏

1.代码如下：

html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>学校官网一级导航栏</title><link rel="stylesheet" type="text/css" href="../css/cs3-4.css"/></head><body><ul><li><a href="https://www.baidu.com/">学校概况</a></li><li><a href="https://www.baidu.com/">组织结构</a></li><li><a href="https://www.baidu.com/">联系我们</a></li><li><a href="https://www.baidu.com/">教学资源</a></li><li><a href="https://www.baidu.com/">就业招生</a></li></ul></body></html>

css

ul{/* border: 1px solid black; */width: 1015px;list-style-type: none;padding: 0px;margin: 30px auto;
}
a:link,a:visited{text-decoration: none;font-size: 22px;color: white;display:block;
}
li{background-color: #1136c1;width:200px;height: 40px;/* 水平文字居中 */text-align: center;/* 垂直居中 */line-height: 40px;border-left: 1px solid #151571;border-right: 1px solid #151571;border-bottom: 1px solid #9f9fed;float:left;margin-right: 1px;
}
a:hover{background-color: #002099;
}

2.代码运行如下：

总结

以上就是今天要讲的内容，本文简单记录了CSS 实战之图文混排、表格、表单、学校官网一级导航栏，仅作为一份简单的笔记使用，大家根据注释理解

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。 HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！ 系…...

编程日记 2025/5/29 10:53:32

Android studio 实现弹出表单编辑界面

方法 1：使用 AlertDialog（简单表单） 适用于简单的表单场景。 1. 创建表单布局（XML） 在 res/layout 中新建 dialog_form.xml： <?xml version"1.0" encoding"utf-8"?> <L…...

编程日记 2025/6/1 9:29:08

涂色不踩雷：如何优雅解决 LeetCode 栅栏涂色问题

文章目录摘要描述例子： 题解答案（Swift）题解代码分析动态规划核心思路初始条件示例测试及结果示例 1：示例 2：示例 3： 时间复杂度空间复杂度总结实际场景联系摘要在用户体验和界面设计中，颜…...

编程日记 2025/5/29 12:06:27

WL-G4048 Multi-Port PCIe 4.0 Switch

系列文章目录文章目录系列文章目录《WL-G4048 Multi-Port PCIe 4.0 Switch数据手册》总结一、芯片介绍二、芯片规格介绍（一）功能指标（二）管理调试和监控（三）参考时钟（四）系统复位 …...

编程日记 2025/6/2 3:47:24

基于Huber函数和最大相关熵的抗差滤波算法

最大熵滤波（Maximum Entropy Filtering）常用于信号处理中的谱估计和噪声抑制，尤其适用于短数据序列的高分辨率谱分析。一、最大熵滤波算法原理核心思想：在满足已知自相关函数约束的条件下，使信号的熵最大化。数学形…...

编程日记 2025/5/28 7:53:22

力扣-39.组合总和

题目描述给你一个无重复元素的整数数组 candidates 和一个目标整数 target ，找出 candidates 中可以使数字和为目标数 target 的所有不同组合 ，并以列表形式返回。你可以按任意顺序返回这些组合。 candidates 中的同一个数字可以无限制重复被…...

编程日记 2025/5/27 7:45:21

医学图像分析中的大规模基准测试与增强迁移学习|文献速递-深度学习医疗AI最新文献

Title 题目 Large-scale benchmarking and boosting transfer learning for medical imageanalysis 医学图像分析中的大规模基准测试与增强迁移学习 01 文献速递介绍将在大规模摄影数据集（如ImageNet）上预训练的模型微调至医学图像领域&#xff08…...

编程日记 2025/5/29 20:00:55

深入浅出横向联邦学习、纵向联邦学习、联邦迁移学习

深入浅出解析横向联邦学习（Horizontal Federated Learning）、纵向联邦学习（Vertical Federated Learning）和联邦迁移学习（Federated Transfer Learning） 有多个机构（比如几家不同的银行&#x…...

编程日记 2025/5/29 12:46:14

vue复杂数据类型多层嵌套的监听

vue复杂数据类型多层嵌套的监听本来看前辈的做法是watch的嵌套，遇到这种复杂的数据结构还是不多，分享一下前辈的做法 let stopChildWatchList [] // 用于存放每个子监听器watch(() > data,(val) > {// 清除旧监听stopChildWatchList.forEach(…...

编程日记 2025/5/27 7:50:31

windows系统中下载好node无法使用npm

原因是 Windows PowerShell禁用导致的npm无法正常使用解决方法管理员打开Windows PowerShell 输入Set-ExecutionPolicy -Scope CurrentUser RemoteSigned 按Y 确认就解决了...

编程日记 2025/5/29 15:58:33

使用 Docker 部署 React + Nginx 应用教程

目录 1. 创建react项目结构2. 创建 .dockerignore3. 创建 Dockerfile4. 创建 nginx.conf5. 构建和运行6. 常用命令 1. 创建react项目结构 2. 创建 .dockerignore # 依赖目录 node_modules npm-debug.log# 构建输出 dist build# 开发环境文件 .git .gitignore .env .env.local …...

编程日记 2025/5/29 12:49:44

顶层设计-IM系统架构

一、系统总体架构概览即时通讯（IM）系统的核心目标，是让用户可以随时随地稳定地发送和接收消息。为了支撑成千上万用户同时在线交流，我们需要将整个系统划分成多个专职模块，每个模块只负责一件事情，彼此协同…...

编程日记 2025/5/29 17:52:46

Maven Deploy的依赖与引用方的依赖不同

提供的依赖：dependency:tree - com.alibaba.csp:sentinel-springboot-starter:jar:3.0.1-SNAPSHOT:compile [INFO] | - com.alibaba.csp:sentinel-datasource-nacos:jar:3.0.1:compile [INFO] | - com.alibaba.csp:sentinel-datasource-extension:jar:3.0.1:compil…...

编程日记 2025/5/27 17:37:22

如何让 Google 收录 Github Pages 个人博客

版权归作者所有，如有转发，请注明文章出处：https://cyrus-studio.github.io/blog/ 如何确认自己的网站有没有被 google 收录假设网址是：https://cyrus-studio.github.io/blog 搜索：site:https://cyrus-studio.github…...

编程日记 2025/5/28 14:44:00

物体雅克比、空间雅克比、解析雅克比、几何雅克比

在机器人学中，雅可比矩阵是连接广义坐标速度与末端执行器速度的关键工具。根据应用场景和参考系的不同，雅可比矩阵可分为物体雅可比（Body Jacobian）、空间雅可比（Space Jacobian）、解析雅可比（A…...

编程日记 2025/5/29 17:28:53

PCL PolygonMesh 与 TextureMesh 源码阅读与简单测试

Title: PCL PolygonMesh 与 TextureMesh 源码阅读与简单测试文章目录 I . PolygonMesh1. PolygonMesh 结构体2. Vertices 结构体与点云索引3. 测试 PolygonMesh II. TextureMesh1. TextureMesh 结构体2. TexMaterial 结构体3. 纹理坐标与纹理坐标索引4. 测试 TextureMesh 以下…...

编程日记 2025/5/27 5:24:23

CSS面试题汇总

在前端开发领域，CSS 是一项不可或缺的技术。无论是页面布局、样式设计还是动画效果，CSS 都扮演着重要的角色。因此，在前端面试中，CSS 相关的知识点往往是面试官重点考察的内容。为了帮助大家更好地准备面试，本文汇总了…...

编程日记 2025/5/29 16:49:00

光谱相机的空间分辨率和时间分辨率

一、空间分辨率 ‌定义与参数‌ ‌概念‌：指单个像素对应实际地物的最小尺寸，常用地面采样距离（GSD，单位：米）或像素大小（单位：微米）表示。 ‌分类‌： 高空…...

编程日记 2025/5/29 9:39:30

【研0学习计划表】

前言以下学习计划并不固定： 1.若当前阶段的学习任务学习结束，对下一阶段的学习计划进行适当调整，提前进入下一阶段学习任务。若当前阶段学习任务未完成，则根据每一阶段的学习情况，进行学习总结，然后对下…...

编程日记 2025/5/28 16:13:59

还没用过智能文档编辑器吗?带有AI插件的ONLYOFFICE介绍

在当今激烈的数字化竞争中，文档处理效率直接影响企业的决策与响应速度。然而，许多办公平台仅支持基础流程，查阅、批注和修改仍需借助外部工具，增加了操作复杂性和沟通成本。本文将探讨如何在自己的网站、平台、系统或者服务中集成…...

编程日记 2025/5/27 6:49:29

机器学习前言2

1.机器学习 2.机器学习模型 3.模型评价方法 4.如何选择合适的模型介绍机器学习（Machine Learning, ML）是人工智能（AI）的核心分支，致力于通过数据和算法让计算机系统自动“学习”并改进性能，而无需显式编…...

编程日记 2025/5/27 7:46:49

在多个SpringBoot程序中./相对路径下隐患、文件覆盖问题

概述两个 Spring Boot 应用生成的配置文件被覆盖，是因为相对路径的解析依赖于当前工作目录（Working Directory），而你可能在运行应用时未正确设置各自的工作目录。以下是具体原因和解决方案： 原因分析相对路径…...

编程日记 2025/5/29 15:01:24

弦理论的额外维度指的是什么，宇宙中有何依据

弦理论中的额外维度是解释微观世界与宏观宇宙矛盾的关键假设之一。它们并非科幻中的平行宇宙，而是通过严谨的数学框架提出，并可能留下可观测的宇宙学痕迹。以下是具体解析： 一、弦理论为何需要额外维度？ 数学自洽性要求弦理论中…...

编程日记 2025/6/1 9:12:24

FC7300 GPT MCAL 配置引导

一、配置约束 FCPIT：仅FC7240型号芯片支持。如果GPT模块与PWM/ICU/OCU模块使用相同的FTU实例，配置工具将报告一个错误。如果GPT通道使用FTU，时钟源来自PCC，则GptFtuChannelClkSrc必须选择GPT_FTU_BUS_CLK。二、MCU 组件 - 配置WDG采用的定时器时钟 Examle:WDG选用AONTIMER…...

编程日记 2025/5/28 8:02:32

LangFlow技术深度解析：可视化编排LangChain应用的新范式 -（2）流编辑器系统

Flow Editor System | langflow-ai/langflow | DeepWiki 流编辑器系统相关源文件流编辑器系统是 Langflow 的核心交互式组件，允许用户直观地创建、编辑和管理 LLM 驱动的应用程序。它提供了一个直观的画布，用户可以在其中添加节点、将其与边缘连接并…...

编程日记 2025/5/28 16:45:10

okcc呼叫中心系统搭建的方案方式

传统企业呼叫中心多采用 PC和手机软件，很难与客户保持良好的沟通。因此，需要建设一套呼叫中心系统来实现与客户实时有效沟通。那么，呼叫中心搭建的方案方式有哪些呢?下面详细介绍一下。呼叫中心系统的搭建方式需根据企业规模、预算和业务需…...

编程日记 2025/5/29 14:35:46

asp.net IHttpHandler 对分块传输编码的支持,IIs web服务器后端技术

IHttpHandler，不支持分块传输编码（Chunked Transfer）吧？ IHttpHandler 对分块传输编码的支持实际上，IHttpHandler 完全支持分块传输编码（Chunked Transfer Encoding），但具体行为取…...

编程日记 2025/5/27 8:29:51

芍药BAHD酰基转移酶-文献精读128

PoDPBT, a BAHD acyltransferase, catalyses the benzoylation in paeoniflorin biosynthesis in Paeonia ostii PoDPBT，一种BAHD酰基转移酶，在芍药（Paeonia ostii）中催化芍药苷生物合成中的苯甲酰化反应。摘要 PoDPBT是属于BA…...

编程日记 2025/5/31 3:06:16

GTS-400 系列运动控制器板卡介绍（三十三）---运动程序单线程累加求和

运动控制器函数库的使用运动控制器驱动程序、dll 文件、例程、Demo 等相关文件请通过固高科技官网下载，网址为：www.googoltech.com.cn/pro_view-3.html 1 Windows 系统下动态链接库的使用在 Windows 系统下使用运动控制器，首先要安装驱动程序。在安装前需要提前下载运动…...

编程日记 2025/5/29 8:49:30

C# 面向对象构造函数带参无参细节解析

继承类构造时会先调用基类构造函数，不显式调用基类构造函数时，默认调用基类无参构造函数，但如果基类没有写无参构造函数，会无法调用从而报错；此时，要么显式的调用基类构造函数，并按其格式带上参…...

编程日记 2025/5/27 7:49:56

数字化工厂升级引擎：Modbus TCP转Profinet网关助力打造柔性生产系统

在当今的工业自动化领域，通信协议扮演着至关重要的角色。Modbus TCP和Profinet是两种广泛使用的工业通信协议，它们分别在不同的应用场景中发挥着重要作用。然而，有时我们可能需要将这两种协议进行转换，以实现不同设备之间的无缝通…...

编程日记 2025/5/27 7:16:43

【编译原理】词法分析器

//简单实现，伪代码 int code,value; strToken :" "; //置strToken为空串 GetChar();GetBC(); if(IsLetter()) beginwhile(IsLetter() or IsDigit())beginConcat();GetChar();endRetract();code:Reserve();if(code0)beginvalue:InsertId(strToken);retu…...

编程日记 2025/5/31 1:44:27

记录一次vue项目页面内嵌iframe页面实现跨域上传和下载附件的功能

功能背景：项目部署在外网，然后其中有一个功能需要上传下载附件，附件是上传到华为云对象存储服务OBS中（私有云），所以采用iframe嵌套页面的方式解决跨域问题。实现思路： 1、父窗口封装一个组件专…...

编程日记 2025/5/27 8:09:54

【Win32 API】 lstrcpyA()

作用将字符串复制到指定的字符串缓冲区。函数 LPSTR lstrcpyA(LPSTR lpString1, LPCSTR lpString2); 参数 lpString1 类型：LPTSTR 一个缓冲区，用于接收由 lpString2 参数指向的字符串的内容。缓冲区必须足够大才能包含字符串，包括终止…...

编程日记 2025/6/1 9:18:09

报表控件stimulsoft教程：如何在报表和仪表板中创建热图

Stimulsoft Ultimate （原Stimulsoft Reports.Ultimate）是用于创建报表和仪表板的通用工具集。该产品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他环境的完整工具集。无需比较产品功能，Stimulsoft Ultimate包含了…...

编程日记 2025/5/28 0:38:16

Axure疑难杂症：剖析面包屑导航“用户不迷路”（玩转导航）

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！ Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 课程主题：剖析面包屑导航“用户不迷路” 主要内容：面包屑导航各种做法应用场景：页面导航、页面路径、用户选择路径、…...

编程日记 2025/5/29 15:38:16

中exec()函数因$imagePath参数导致的命令注入漏洞

exec(zbarimg -q . $imagePath, $barcodeList, $returnVar); 针对PHP中exec()函数因$imagePath参数导致的命令注入漏洞，以下是安全解决方案和最佳实践： 一、漏洞原理分析直接拼接用户输入$imagePath到系统命令中，攻击者可通过注入特殊字…...

编程日记 2025/5/29 17:07:08

HTML常用标签用法全解析：构建语义化网页的核心指南

HTML作为网页开发的基石，其标签的合理使用直接影响页面的可读性、SEO效果及维护性。本文系统梳理HTML核心标签的用法，结合语义化设计原则与实战示例，助你构建规范、高效的网页结构。一、基础结构与排版标签 1.1 文档结构 <!DOCTYPE htm…...

编程日记 2025/5/29 11:45:50

【Linux】动静态库链接原理

📝前言： 这篇文章我们来讲讲Linux——动静态库链接原理 🎬个人简介：努力学习ing 📋个人专栏：Linux 🎀CSDN主页愚润求学 🌄其他专栏：C学习笔记，C语言入门基础…...

编程日记 2025/5/29 12:57:27

Axure设计的“广东省网络信息化大数据平台”数据可视化大屏

在数据驱动决策的时代，数据可视化大屏成为了展示数据、洞察趋势的重要工具。今天，让我们一同深入了解由Axure设计的“广东省网络信息化大数据平台”数据可视化大屏，看看它如何通过精心的布局和丰富的图表类型，将复杂的数据以直观易…...

编程日记 2025/5/29 21:32:02

linux安装宝塔面板到数据盘

操作很简单，假如数据盘挂载在cipan1，在数据盘新建目录www，为了方便对应。执行一下命令，创建软连接 ln -s /cipan1/www www 此时，根目录就出现了www文件夹下面正常安装宝塔即可...

编程日记 2025/5/29 11:42:07

数学实验（Matlab编程基础）

一、函数文件 Matlab编程基础 Matlab作为一种广泛应用于科学计算的工具软件，不仅具有强大的数值计算、符号计算、矩阵运算能力和丰富的绘图功能，同时也具有和C、FORTRAN等高级语言一样进行程序设计利用Matlab的程序控制功能，可以将有关Ma…...

编程日记 2025/5/29 8:49:51

不同坐标系下MATLAB绘制阵列的方向图

不同坐标系下MATLAB绘制阵列的方向图球坐标系，极坐标系、直角坐标系文章目录前言一、极坐标系二、球坐标系三、直角坐标系总结前言 \;\;\;\;\; 在阵列信号处理和天线设计中，方向图（Pattern）是描述波束形成性能的关键工具&…...

编程日记 2025/5/31 4:37:54

python可视化：北方省市人口流动与春运数据综合分析5

python可视化：北方省市人口流动与春运数据综合分析5 一、北方省市常住人口数据及变化趋势（2023-2024第一季度） 1. 主要城市常住人口数据（按城市等级分类） 城市类型2023Q1常住人口(万)2024Q1常住人口(万)变化量(万)变…...

编程日记 2025/5/28 7:35:59

Java并发编程-线程池（四）

文章目录线程池实现原理WorkerWorker 核心设计总结 runWorker(Worker w)总结线程池实现原理上一篇我们看了 addWork 方法，那接下来就让我们详细看看内部类Worker。 Worker private final class Workerextends AbstractQueuedSynchronizerimplements Runnable …...

编程日记 2025/5/29 13:37:10