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

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

article 2025/9/23 3:28:23

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

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

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

CSS- 1.1 css选择器

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

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

CSS- 4.1 浮动（Float）

CSS- 4.2 相对定位（position: relative）

系列文章目录

前言

一、图文混排-理论部分

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/9/19 7:17:31

Armijo rule

非精线搜索步长规则Armijo规则&Goldstein规则&Wolfe规则_armijo rule-CSDN博客 [原创]用“人话”解释不精确线搜索中的Armijo-Goldstein准则及Wolfe-Powell准则 – 编码无悔 / Intent & Focused...

编程日记 2025/7/9 2:01:03

从零搭建AI工作站：Gemma3大模型本地部署+WebUI配置全套方案

文章目录前言1. 安装Ollama2.Gemma3模型安装与运行3. 安装Open WebUI图形化界面3.1 Open WebUI安装运行3.2 添加模型3.3 多模态测试 4. 安装内网穿透工具5. 配置固定公网地址总结前言如今各家的AI大模型厮杀得如火如荼，每天都有新的突破。今天我要给大家安利一款…...

编程日记 2025/9/17 16:36:24

贝叶斯优化Transformer融合支持向量机多变量时间序列预测，Matlab实现

贝叶斯优化Transformer融合支持向量机多变量时间序列预测，Matlab实现目录贝叶斯优化Transformer融合支持向量机多变量时间序列预测，Matlab实现效果一览基本介绍程序设计参考资料效果一览基本介绍 1.BO-TransformerSVM多变量时间序列预测&#xff0c…...

编程日记 2025/9/6 2:00:22

执行apt-get update 报错ModuleNotFoundError: No module named ‘apt_pkg‘的解决方案汇总

Ubuntu版本ubuntu18.04 报错内容： //执行apt-get upgrade报错： Traceback :File “/usr/lib/cnf-update-db”, line 8, in <module>from CommandNotFound.db.creator import DbcreatorFile “/usr/lib/python3/dist-packages/CommandNotFound/db…...

编程日记 2025/7/17 7:36:22

maven中relativepath标签的含义及使用方法

在Maven中，<relativePath>标签用于指定子模块的父POM文件的相对路径，以便在构建时优先从本地项目结构中查找父项目，而非直接从仓库获取。以下是其含义和使用方法的详细说明：含义作用：在子模块的<parent>元素中，<relativePath>定义了父POM文件相对于当…...

编程日记 2025/8/10 3:19:33

C++_STL_map与set

1. 关联式容器在初阶阶段，我们已经接触过STL中的部分容器，比如：vector、list、deque、 forward_list(C11)等，这些容器统称为序列式容器，因为其底层为线性序列的数据结构，里面存储的是元素本身。那什么是…...

编程日记 2025/9/17 18:13:10

项目依赖版本修改

React项目因UI库无法兼容React19版本,故此降低React版本至18.x (为什么不升级UI库版本,因为没有最新版,而且找不到好的替代品) package.json 先修改package.json文件中你想修改的依赖版本号 "dependencies": { - "react": "^19.1.0", - "…...

编程日记 2025/9/21 0:52:57

蚁群算法赋能生鲜配送：MATLAB 实现多约束路径优化

在生鲜农产品配送中，如何平衡运输效率与成本控制始终是行业难题。本文聚焦多目标路径优化，通过 MATLAB 实现蚁群算法，解决包含载重限制、时间窗约束、冷藏货损成本的复杂配送问题。代码完整复现了从数据生成到路径优化的全流程，助…...

编程日记 2025/9/23 3:16:19

机器学习与人工智能：NLP分词与文本相似度分析

自然语言处理你有没有想过，生成式 AI 工具或大型语言模型背后究竟发生了什么？自然语言处理（NLP）是这些工具的核心，它使计算机能够理解人类语言。换句话说，NLP 是连接人类交流和机器（如计算机&…...

编程日记 2025/9/19 14:23:24

记录一下seata后端数据库由mariadb10切换到mysql8遇到的SQLException问题

文章目录前言一、问题记录二、参考帖子三、记录store.db.driverClassName 前言记录一下seata后端数据库由mariadb10切换到mysql8遇到的SQLException问题。一、问题记录 17:39:23.709 ERROR --- [ionPool-Create-1134013833] com.alibaba.druid.pool.DruidDataSource : …...

编程日记 2025/9/20 0:57:17

CUDA学习笔记

CUDA入门笔记总览 CUDA是NVIDIA公司对其GPU产品提供的一个编程模型，在2006年提出，近年随着深度学习的广泛应用，CUDA已成为针对加速深度学习算法的并行计算工具。以下是维基百科的定义：一种专有的并行计算平台和应用程序编程接…...

编程日记 2025/9/20 7:14:51

Python爬虫实战：研究JavaScript压缩方法实现逆向解密

一、引言在数字化信息爆炸的时代，网络数据已成为驱动各行业发展的核心资产。Python 凭借其丰富的库生态和简洁的语法，成为网络爬虫开发的首选语言。然而，随着互联网安全防护机制的不断升级，网站普遍采用 JavaScript 压缩与混淆技术保护其核心逻辑和数据传输，这使得传统爬…...

编程日记 2025/6/7 0:59:50

【Linux】Shell脚本中向文件中写日志，以及日志文件大小、数量管理

1、写日志 shell脚本中使用echo命令，将字符串输入到文件中覆盖写入：echo “Hello, World!” > laoer.log ，如果文件不存在，则会创建文件追加写入：echo “Hello, World!” >> laoer.log转移字符：echo -e “Name:\tlaoer\nAge:\t18” > laoer.log，\t制表符 …...

编程日记 2025/9/21 13:12:32

c++ 类的语法3

测试下默认构造函数。demo1： void testClass3() {class Demo { // 没显示提供默认构造函数，会有默认构造函数。public:int x; // 普通成员变量，可默认构造};Demo demo1;//cout << "demo1.x: " << demo1.x << en…...

编程日记 2025/9/20 11:14:46

Rust 学习笔记：关于 String 的练习题

Rust 学习笔记：关于 String 的练习题 Rust 学习笔记：关于 String 的练习题选出描述正确的那一个。该程序最多可能发生多少次堆的内存分配？哪种说法最能解释为什么 Rust 不允许字符串索引？哪种说法最能描述字符串切片 &str 和字…...

编程日记 2025/9/17 13:21:42

Spring bean 的生命周期、注入方式和作用域

一、Spring Bean的生命周期 Spring Bean的生命周期是指从Bean的定义加载到最终销毁的整个过程，Spring框架在每个阶段都提供了钩子方法，允许开发者在特定时机执行自定义逻辑。 1. Bean定义加载阶段容器启动时加载配置(XML/注解/JavaConfig)&#xff0…...

编程日记 2025/9/12 19:57:04

Python爬虫（26）Python爬虫高阶：Scrapy+Selenium分布式动态爬虫架构实践

目录一、背景：动态爬虫的工程化挑战二、技术架构设计1. 系统架构图2. 核心组件交互三、环境准备与项目搭建1. 安装依赖库2. 项目结构四、核心模块实现1. Selenium集成到Scrapy（中间件开发）2. 分布式配置（settings.py&#xff0…...

编程日记 2025/9/19 14:13:56

Python 之类型注解

类型注解允许开发者显式地声明变量、函数参数和返回值的类型。但是加不加注解对于程序的运行没任何影响（是非强制的，且类型注解不影响运行时行为），属于有了挺好，没有也行。但是大型项目按照规范添加注解的话&#xff…...

编程日记 2025/9/6 2:00:25

【linux】Web服务—搭建nginx+ssl的加密认证web服务器

准备工作步骤： 一、新建存储网站数据文件的目录二、创建一个该目录下的默认页面，index.html 三、使用算法进行加密四、制作证书五、编辑配置文件，可以选择修改主配置文件，但是不建议原因如下： 自定义一个配置文…...

编程日记 2025/9/21 16:15:15

基于HTTP头部字段的SQL注入：SQLi-labs第17-20关

前置知识：HTTP头部介绍 HTTP（超文本传输协议）头部（Headers）是客户端和服务器在通信时传递的元数据，用于控制请求和响应的行为、传递附加信息或定义内容类型等。它们分为请求头（Request Headers&…...

编程日记 2025/9/20 18:00:02

实战解析MCP-使用本地的Qwen-2.5模型-AI协议的未来？

文章目录目录文章目录前言一、MCP是什么？ 1.1MCP定义 1.2工作原理二、为什么要MCP？ 2.1 打破碎片化的困局 2.2 实时双向通信，提升交互效率 2.3 提高安全性与数据隐私保护三、MCP 与 LangChain 的区别 3.1 目标定位不同 3.…...

编程日记 2025/9/6 2:00:44

SRS流媒体服务器(5)源码分析之RTMP握手

1.概述学习 RTMP 握手逻辑前，需明确两个核心问题： rtmp协议连接流程阶段rtmp简单握手和复杂握手区别具体可以学习往期博客： RTMP协议分析_rtmp与264的关系-CSDN博客 2.rtmp握手源码分析 2.1 握手入口根据SRS流媒体服务器(4)可知&am…...

编程日记 2025/9/19 16:29:39

内核性能测试（60s不丢包性能）

以xGAP-200-SE7K-L（双口10G）在飞腾D2000上为例（单通道最高性能约2.8Gbps) 单口测试 0口： tcp： taskset -c 4 iperf -c 1.1.1.1 -i 1 -t 60 -p 60001 taskset -c 4 iperf -s -i 1 -p 60001 udp： taskse…...

编程日记 2025/9/21 23:52:20

RabbitMQ高级篇-MQ的可靠性

目录 MQ的可靠性 1.如何设置数据持久化 1.1.交换机持久化 1.2.队列持久化 1.3.消息持久化 2.消息持久化队列持久化： 消息持久化： 3.非消息持久化非持久化队列： 非持久化消息： 4.消息的存储机制 4.1持久化消息&…...

编程日记 2025/9/6 1:58:02

MySQL 数据库集群部署、性能优化及高可用架构设计

MySQL 数据库集群部署、性能优化及高可用架构设计集群部署方案 1. 主从复制架构传统主从复制：配置一个主库(Master)和多个从库(Slave)GTID复制：基于全局事务标识符的复制，简化故障转移半同步复制：确保至少一个从库接收到数据…...

编程日记 2025/6/15 6:45:09

fpga系列 HDL : Microchip FPGA开发软件 Libero Soc 项目仿真示例

新建项目项目初始界面中创建或导入设计文件： 新建HDL文件 module test (input [3:0] a,input [3:0] b,output reg [3:0] sum,output reg carry_out );always (*) begin{carry_out, sum} a b; endendmodule点击此按钮可进行项目信息的重新…...

编程日记 2025/9/20 8:29:30

将单链表反转【数据结构练习题】

- 第 98 篇 - Date: 2025 - 05 - 16 Author: 郑龙浩/仟墨反转单链表(出现频率非常的高) 文章目录反转单链表(出现频率非常的高)题目：反转一个链表思路：代码实现(第3种思路): 题目：反转一个链表将 1->2->3->4->5->NULL反转…...

编程日记 2025/9/7 10:25:32

DeepSearch：WebThinker开启AI搜索研究新纪元！

1，项目简介 WebThinker 是一个深度研究智能体，使 LRMs 能够在推理过程中自主搜索网络、导航网页，并撰写研究报告。这种技术的目标是革命性的：让用户通过简单的查询就能在互联网的海量信息中进行深度搜索、挖掘和整合，从…...

编程日记 2025/9/6 2:00:22

springCloud/Alibaba常用中间件之Setinel实现熔断降级

文章目录 SpringCloud Alibaba:依赖版本补充Sentinel:1、下载-运行：Sentinel(1.8.6)下载sentinel：运行：Sentinel <br> 2、流控规则① 公共的测试代码以及需要使用的测试Jmeter①、流控模式1. 直接:2. 并联:3. 链路: ②、流控效果1. 快速…...

编程日记 2025/9/17 22:00:28

系列文章目录

前言

一、图文混排-理论部分

1. 浮动（Float）

2. 文本对齐（Text Alignment）

3. 背景图片（Background Image）

4. Flexbox布局

5. Grid布局

6. 相对定位和绝对定位

7. 文本环绕（Shape-Outside）

8.注意事项

二、图文混排-实战部分

三、 表格-理论部分

四、表格-实战部分

五、表单-理论部分

六、表单-实战部分

七、学校官网一级导航栏

总结

相关文章：

三、表格-理论部分