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

CSS【常用CSS样式、盒子模型、定位、浮动、扩展样式】--学习JavaEE的day46

news 2025/7/15 18:07:49

day46

CSS

练习

页面实现：
表单练习
分析：

未优化：

优化：

参考代码：（包含样式优化–选择器+CSS属性）

先写上table方便实现，之后再去除即可
name没有服务器，可暂时不写

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.right{text-align: right;}span{font-size: 11px;color: gray;}#sub{background-color: green;color: white;border: green;border-radius: 3px;}/* 设置垂直居中，也叠加效果*/.xxx{display: flex; /* 设置弹性盒*/justify-content: center flex-start;}</style></head><body><form action="#" method="post"><table width="600px"><tr><td class="right"><span>邮件地址</span></td><td><input type="text" placeholder="建议使用手机号注册" />@<select><option>163</option><option>QQ</option><option>sina</option></select></td></tr><tr><td></td><td><span>6~18字符，可使用字母、数字、下划线，需以字母开头</span></td></tr><tr><td class="right"><span>密码</span></td><td><input type="password" /></td></tr><tr><td></td><td><span>6~16个字符，区分大小写</span></td></tr><tr><td class="right"><span>确认密码</span></td><td><input type="password" /></td></tr><tr><td></td><td><span>再次确认密码</span></td></tr><tr><td class="right"><span>手机号</span></td><td><input type="text" /></td></tr><tr><td></td><td><span>忘记密码时，可以通过该手机号码快速找回密码</span></td></tr><tr><td class="right"><span>验证码</span></td><td class="xxx"><input type="text" /><img src="https://www.xiaoyuxitong.com/uploads/allimg/180816/214SMU3-0.png" width="100px" height="20px" /><a href="#">看不清楚？换张图片</a></td></tr><tr><td></td><td><span>请填写图片中的字符，不区分大小写</span></td></tr><tr><td></td><td><button>免费获取验证码</button></td></tr><tr><td class="right"><span>短信验证码</span></td><td><input type="text" /></td></tr><tr><td></td><td><span>请查收手机短信，并填写短信中的验证码</span></td></tr><tr><td></td><td><input type="checkbox" checked="checked" /><span>同意<a href="#">"服务条款"</a>和<a href="#">"隐私权相关政策"</a></span></td></tr><tr><td></td><td><input id="sub" type="submit" value="立即注册" /></td></tr></table></form></body>
</html>

常用CSS样式

常用CSS属性

1.字体属性

属性名称

font-family(字体)

font-size（大小）

font-style（风格）

---- normal标准样式

---- italic斜体

---- oblique倾斜

---- inherit从父类继承的字体样式

font-weight(字体加粗)

----normal标准样式

----bold粗体

----bolder更粗

----lighter更细

2.文本属性

属性名称

letter-spacing(字母间隔)

text-decoration（划线修饰）

text-align（文本对齐方式）

text-indent(文本缩进)

line-height（行高）

3.背景

属性名称

background-color

background-image

background-repeat(平铺方式)

4.边框

属性名称

border-bottom

solid(实线)

dashed(虚线)

double(双实线）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{/*设置字体样式-------------------------------------------*/font-family: "微软雅黑";/*设置字体*/font-size: 50px;/*设置字体大小*/font-style: italic;/*设置字体样式 - 倾斜*/font-weight: bold;/*设置字体粗细*//*设置文本样式-------------------------------------------*/letter-spacing: 20px;/*设置文本间隔*/text-decoration: underline;/*设置文本划线 - 下划线*/text-align: center;/*设置文本对齐方式 -- 居中*/color: white;/*设置文本颜色*//*设置背景样式 --------------------------------------------*/background-color: red;/*设置背景颜色*/}a{text-decoration: none;/*设置字体划线 - 去除划线*/}div{width: 500px;height: 500px;background-image: url(../img/波多野结衣.jpg);/*设置背景图片*/background-repeat: repeat-y;/*设置平铺方式：沿y轴平铺*/border: orange 1px solid;/*设置边框 - 颜色,粗细,实线*/}</style></head><body><p>学无止境</p><a href="#">百度一下</a><br /><div></div></body>
</html>

运行：
在这里插入图片描述

盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
盒子模型：用于页面分区

浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
为了兼容IE老版本，一句话，能用外边距就用外边距

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;/** 	margin-top: 50px;设置外边距 - 上边距margin-left: 50px;设置外边距 - 左边距margin-right: 50px;;设置外边距 - 右边距margin-bottom: 50px;;设置外边距 - 下边距*/margin: 50px;}			</style></head><body><div>学无止境</div></body>
</html>
样式2：内边距<style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;/** 注意：能不使用内边距就不使用，因为老版本的IE浏览器不支持，而且会把盒子撑变形* * 	padding-top: 50px;padding-left: 50px;padding-right: 50px;padding-bottom: 50px; */padding: 50px;/*设置内边框：上下左右都是*/}			</style>
样式3：水平居中，垂直居中需要用到定位<style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;margin: 0 auto;/*水平居中*/}			</style>

运行：
盒子模型运行

定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

相对定位

相对定位：相对于原有的位置发生改变，并且保留原有的空间位置。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 200px;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: relative;/*相对定位：保留原有位置，相对于原有位置进行位移*/top: 50px;/*距离定位位置上边缘50px*/left: 50px;/*距离定位位置左边缘50px*/}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

运行：
相对定位

绝对定位

注意：不能简单认为是根据body标签位移

绝对定位相对于他有position属性的父级元素进行定位，如果父级元素没有postion定位，那么就找父级的父级，直到向上找到position定位为止，如果他向上找不到position定位，那么就以最外层的body进行定位。

并且绝对定位不会保留原有的位置空间。

z-index属性，确定层级大小，用来设定哪一个盒子在上面，越大越在上面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 200px;position: relative;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: absolute;/*绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移*/top: 50px;/*距离定位位置上边缘50px*/left: 50px;/*距离定位位置左边缘50px*/}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

运行：
绝对定位

固定定位

根据前面的锚链接改进，加一个置顶功能

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{position: fixed;/*固定定位：将元素固定到页面的某个位置*/top: 80%;left: 90%;}</style></head><body><div><a href="#top">置顶</a></div><a name="top"></a><!--下锚点--><a href="#new01">法治</a><!--定位到锚点处--><a href="#new02">国际</a><!--定位到锚点处--><a href="#new03">娱乐</a><!--定位到锚点处--><a name="new01"></a><!--下锚点--><h1>法治新闻 - 为何半夜母猪频频惨叫</h1><h1>法治新闻 - 为何八旬老太以外怀孕</h1><h1>法治新闻 - 是人性的溟灭</h1><h1>法治新闻 - 是道德的沦丧</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><a name="new02"></a><!--下锚点--><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><a name="new03"></a><!--下锚点--><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1></body>
</html>

运行：
固定定位

浮动

浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。

副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。

解决办法：添加空盒子

在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div.clear{clear:both;}

普通流【包含的普通流变成浮动流就管不住，利用清除浮动效果就能解决】

浮动1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: left;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>

运行：形象概述：最初【一个大div包含两个小div】–>再是【将里面的两个小div设置浮动，大div管不住小div】–>最后【在里面加一个小div用于去除同级别的浮动效果，大div又能管住小div】

浮动2

浮动成左右两边

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: right;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>

运行：
浮动2

浮动3

浮动成左右两半

如何查看：两种方式

设置背景颜色：background-color:
查看元素在浏览器检查代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 50%;height: 100px;float: left;}#box02{width: 50%;height: 100px;float: right;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>

运行：注意这里是去除了box01、box02的边框，不然会出现换行
浮动3有边框
浮动3

扩展样式

渐变色找到图片最下方的一个色点【末尾加上】会自动填充

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;}input{width: 100px;height: 50px;color: white;font-weight: bolder;background-color: orange;border-radius: 5px;/*圆角属性*/box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/}img{border-radius: 50%;}</style></head><body><input type="button" value="普通按钮" /><br /><img src="../img/波多野结衣.jpg" width="100px" height="100px" /></body>
</html>

运行：
扩展样式

小结

css表单练习

常用CSS样式

盒子模型

定位

浮动

扩展样式

CSS【常用CSS样式、盒子模型、定位、浮动、扩展样式】--学习JavaEE的day46

day46 CSS 练习页面实现： 分析： 未优化： 优化： 参考代码：（包含样式优化–选择器CSS属性） 先写上table方便实现，之后再去除即可 name没有服务器，可暂时不写 <!…...

编程日记 2024/5/24 23:39:02

os.path 提供用于处理文件路径和文件的系统函数

在Python中，os.path模块提供了一系列用于处理文件路径和文件的系统函数。获取文件路径信息 os.path.abspath(): 获取文件的绝对路径。os.path.dirname(): 获取文件路径的目录名。os.path.basename(): 获取文件路径的文件名。os.path.split(): 分割路径为目录和文件…...

编程日记 2024/5/24 23:38:01

golang通过go-aci适配神通数据库

1. go-aci简介 go-aci是神通数据库基于ACI(兼容Oracle的OCI)开发的go语言开发接口，因此运行时需要依赖ACI驱动和ACI库的头文件。支持各种数据类型的读写、支持参数绑定、支持游标范围等操作。 2. Linux部署步骤 2.1. Go安装： 版本：1.9以上…...

编程日记 2024/5/24 23:36:59

【Vue】Vue2中的Vuex

目录 Vuex介绍Vuex 中的核心概念在vue2中使用Vuex安装 Vuex创建一个 Vuex Store在 Vue 实例中使用 Vuex编写 Vuex 的 state、mutations 和 actions在组件中使用 Vuex Vuex的核心State组件中获取 Vuex 的状态mapState 辅助函数对象展开运算符 Getter基本使用示例通过属性访问通…...

编程日记 2024/5/24 23:35:58

直接img标签显示 npm i use_qrcode npm包地址 <img :src"qrcode" alt"QR Code" /> const txt: any ref(https://baidu.com) const qrcode useQRCode(txt) const qrcodeLogo useQRCode(txt, { logoSrc: https://www.antdv.com/assets/logo.1ef800…...

编程日记 2024/5/24 23:34:57

wordpress woocommer 添加代码实现，点击按钮，将产品添加到购物车并且跳转到结账页面

wordpress woocommer 添加代码实现，点击按钮，将产品添加到购物车并且跳转到结账页面案列代码1，解决的是普通产品的 //短代码生成按钮，传入短代码，点击直接到达结账页面 function add_product_to_cart_button($atts)…...

编程日记 2024/5/24 23:33:56

Scala学习笔记6: 类

目录第六章类1- 简单类和无参方法2- 带有getter和setter的属性3- 只带getter的属性4- 对象私有化5- 辅助构造器6- 主构造器7- 嵌套类end 第六章类在Scala中, 类用于创建对象的蓝图; 类可以包含方法、值、变量、类型、对象和特质等成员; 类名应该以大写字母开头, 可以包含…...

编程日记 2024/5/24 23:31:54

JS数组根据对象的某一个字段排序

const person [{ name: aa, age: 9 },{ name: bb, age: 17 },{ name: cc, age: 6 },{ name: dd, age: 18 }];// 升序const arr1 person.sort((a, b) > {return a.age - b.age;b})console.log(arr1)// 降序const arr2 person.sort((a, b) > {return b.age - a.age;})co…...

编程日记 2024/5/24 23:30:53

JavaScript操作

做UI自动化的时候，有些操作无法直接通过selenium自带方法操作成功，那么就需要借助前端js操作实现。比如浏览器的滚动条这种不是html页面的内容，无法直接通过selenium 控制到。需要借助JavaScript控制。比如有些点击操作无法通过普通点击鼠…...

编程日记 2024/5/24 23:28:51

雪花算法代码

/*** author lwh* date 2023/9/5* description 批量插入，手动设置**/ public class IdWorker {//因为二进制里第一个 bit 为如果是 1，那么都是负数，但是我们生成的 id 都是正数，所以第一个 bit 统一都是 0。//机器ID 2进制5位 3…...

编程日记 2024/5/24 23:27:50

我把PostgreSQL最核心的插件撸干净了！！！

作者：IT邦德中国DBA联盟(ACDU)成员，10余年DBA工作经验， Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主，全网粉丝10万擅长主流Oracle、MySQL、PG、高斯及Greenplum备份恢复， 安装迁移，性能优化、故障…...

编程日记 2024/5/24 23:25:47

Transformer详解(1)-结构解读

Transormer块主要由四个部分组成，注意力层、位置感知前馈神经网络、残差连接和层归一化。 1、注意力层(Multi-Head Attention) 使用多头注意力机制整合上下文语义，它使得序列中任意两个单词之间的依赖关系可以直接被建模而不基于传统的循环结构&#…...

编程日记 2024/5/24 23:24:46

使用Flask Swagger自动生成API文档

文章目录安装Flask Swagger使用Flask Swagger生成API文档总结1. 自动化文档生成2. 交互式文档展示3. 规范化API设计4. 提升协作效率5. 支持多种格式 Flask Swagger是一种用于管理Flask API文档的工具。它基于OpenAPI规范，可以自动生成API的交互式文档。使用Flask S…...

编程日记 2024/5/24 23:22:44

操作系统408考研-经典例题

什么是操作系统？答：操作系统，是计算机系统中最基本、最重要的系统软件，是其它软件的***支撑***。控制和管理计算机系统的硬件和软件资源，合理的组织计算机工作流程，并为用户使用计算机提供公共和基本的服务 2.多道程序 (multiprogrammming) 和多重处理 (multiprocessi…...

编程日记 2024/5/24 23:21:43

工程项目管理系统源码与Spring Cloud：实现高效系统管理与二次开发

随着企业规模的不断扩大和业务的快速发展，传统的工程项目管理方式已经无法满足现代企业的需求。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性，企业需要借助先进的数字化技术进行转型。本文将介绍一款采用Spring CloudSpring BootMybat…...

编程日记 2024/5/24 23:20:42

react中hook 函数的使用

以 use 开头的函数被称为 Hook。useState 是 React 提供的一个内置 Hook。你可以在 React API 参考中找到其他内置的 Hook。你也可以通过组合现有的 Hook 来编写属于你自己的 Hook。 Hook 比普通函数更为严格。你只能在你的组件（或其他 Hook）的顶层调…...

编程日记 2024/5/24 23:19:41

探索k8s集群中kubectl的陈述式资源管理

一、k8s集群资源管理方式分类 1.1陈述式资源管理方式：增删查比较方便，但是改非常不方便使用一条kubectl命令和参数选项来实现资源对象管理操作即通过命令的方式来实 1.2声明式资源管理方式：yaml文件管理使用yaml配置文件或者json配置文…...

编程日记 2024/5/24 23:18:40

webgl入门-绘制三角形

绘制三角形前言三角形是一个最简单、最稳定的面，webgl 中的三维模型都是由三角面组成的。咱们这一篇就说一下三角形的绘制方法。课堂目标理解多点绘图原理。可以绘制三角形，并将其组合成多边形。知识点缓冲区对象点、线、面图形第一章 web…...

编程日记 2024/5/24 23:17:38

深入分析 Android Activity (三)

深入分析 Android Activity (三) 1. Activity 的配置变化处理当设备配置（如屏幕方向、语言、屏幕大小等）发生变化时，默认情况下，Android 会销毁并重新创建当前的 Activity。这种行为确保了新配置能够正确应用，但在某…...

编程日记 2024/5/24 23:16:37

电影《朝云暮雨》观后感

上周看了电影《朝云暮雨》，看完之后，感觉自己整个人都不太好了，也不是说电影太差，只是觉得电影没有传达正能量，让人很不舒服。 （1）演技在线对于著名的演员“范伟”，或者说&#x…...

编程日记 2024/5/24 23:15:36

网络编程（Modbus进阶）

思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以高效率、强健性、易实现的特点成为工业控制系统的通信标准。包…...

编程新知 2025/7/13 16:37:15

OpenLayers 可视化之热力图

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...

编程新知 2025/7/14 11:45:00

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号错误码常见问题前置条件手机安装有sim卡手机开启…...

编程新知 2025/7/14 20:24:06

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）专栏介绍：《编程项目实战》目录一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/6/16 21:02:04

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/6/21 15:09:46

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

MySQL 主从同步异常处理

阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示&#xff…...

编程新知 2025/7/12 18:04:44

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知，帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量，能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度，还为机器人、医疗设备和制造业的智…...

编程新知 2025/7/12 5:47:20

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下，大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性，吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型，成为释放其巨大潜力的关键所在&…...

编程新知 2025/7/12 5:00:20

CSS

练习