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

前端三大组件之CSS，三大选择器，游戏网页仿写

news 2025/7/12 14:51:10

回顾

full stack全栈

Web前端三大组件

结构(html) + 样式(css) + 动作/交互(js) --- 》框架vue，安哥拉

div

常用的标签

扩展标签

列表

ul/ol

order——有序号

unordered——没序号的黑点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表标签</title></head><body><h1>大学最有用的考试？</h1><ul><!-- 小黑点。 --><li>四级</li><li>六级</li></ul></body>
</html>

序号

加勾选框

布局

span：行内插入数据
div：块布局，页面矩形区域--《后续》

H5标签

CSS入门

建包结构

引包的结构（标准规范写法）

当前文件夹 ----- ./

层叠样式表（Cascading Style Sheets，缩写为 CSS）

表(table)

类似Java的全局变量

style

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css入门</title><style>img{width: 40px;height: 50px;}</style></head><body><!-- ./当前 --><img src="./img/lol.jpg" alt="bujianle" /><img src="./img/dong.png" alt="???" /></body>
</html>

三大选择器

选择标签使用指定的css效果。

标签选择器（派生）

派生类比Java的继承。

根据标签名称选择css操作。

font-size：字体大小

标签名称{属性：值；
}

span控制部分字体变大。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css-标签选择器</title><style>span{/* 字体大小 */font-size: 28px;}</style></head><body><p>今天还没写作业，<span>软件工程</span>xxt作业</p><p>四级定个<span>计划</span>吧</p></body>
</html>

id选择器

尚书

标签内加入一个唯一id属性

tips： id不能使用数字开头

id一般第一个不能输数字第一个输字母后面可以跟数字

eg：a1---ok 111---false

先写下面的id 其次再在上面#选择样式style。
#id值{属性：值;
}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>id选择器</title><style>/* #--选择 */#cengId{font-size: 28px;font-family: 华文行楷 ;}#guifan{font-size: 32px;font-family: 华文彩云 ;}</style></head><body><p>层叠样式表<span id="cengId">（Cascading Style Sheets，缩写为 CSS）</span>是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。</p><p>CSS 是开放 Web 的核心语言之一，并<span id="guifan">根据 W3C 规范</span>在 Web 浏览器中进行了标准化。以前，CSS 规范的各个部分的开发是同步进行的，这种方式允许对最新推荐的 CSS 版本进行控制。你可能已经听说过 CSS1、CSS2.1 甚至 CSS3。但是以后将不会再有 CSS3 或者 CSS4；相反，现在的一切都是没有版本号的 CSS。</p></body>
</html>

字体font——font-famliy

还可以把span再单独分/提出来

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>id选择器</title><style>span{font-size: 14px;}/* #--选择 */#cengId{font-family: 华文行楷 ;}#guifan{font-family: 华文彩云 ;}</style></head><body><p>层叠样式表<span id="cengId">（Cascading Style Sheets，缩写为 CSS）</span>是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。</p><p>CSS 是开放 Web 的核心语言之一，并<span id="guifan">根据 W3C 规范</span>在 Web 浏览器中进行了标准化。以前，CSS 规范的各个部分的开发是同步进行的，这种方式允许对最新推荐的 CSS 版本进行控制。你可能已经听说过 CSS1、CSS2.1 甚至 CSS3。但是以后将不会再有 CSS3 或者 CSS4；相反，现在的一切都是没有版本号的 CSS。</p></body>
</html>

[*重点]class（类）选择

定义好css内容，由内容自行选择。----框架 font-weight: 字体粗细。 eg: font-weight: bold; //加粗

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>《重点》class选择器</title><style>.my-font{font-size: 30px;}.my-font-family{font-family: 华文彩云;/* 加粗 */font-weight: bold;}</style></head><body><p>CSS 是一种<span class="my-font my-font-family">描述 HTML 文档</span>样式的语言。<span class="my-font my-font-family">CSS</span> 描述应该如何显示 HTML 元素。</p></body>
</html>

应用：height,width, font-

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>poem</title><style>#small{font-size: 15px;}#big{font-family: 华文行楷;}</style></head><body><h1><span id="big">将进酒</span></h1><div><img src="./img/libai.jpg" alt="图片不见了" width="50px" height="50px"/><a href="https://www.gushiwen.cn/authorv.aspx?name=%e6%9d%8e%e7%99%bd">(唐)<span id="small">李白</span></a></div><p><span id="big">君不见</span>黄河之水天上来，奔流到海不复回。<br /><span id="big">君不见</span>高堂明镜悲白发，朝如青丝暮成雪。<br />人生得意须尽欢，莫使金樽空对月。<br />天生我材必有用，千金散尽还复来。<br />烹羊宰牛且为乐，会须一饮三百杯。<br />岑夫子，丹丘生，将进酒，杯莫停。<br />与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听)<br />钟鼓馔玉不足贵，但愿长醉不愿醒。(不足贵 一作：何足贵；不愿醒 一作：不复醒)<br />古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯)<br />陈王昔时宴平乐，斗酒十千恣欢谑。<br />主人何为言少钱，径须沽取对君酌。<br />五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p></body>
</html>

CSS常用属性

div为核心，对象/标签/组件/容器。

width宽度

100%铺满

height高度

没有100%

color字体颜色

定义字体颜色

一个好用的调色板 | 颜色选择器 - Codeeeee 在线小工具

background-color：

背景颜色

颜色写法

背景图片

background-image:url('./img/tp.jpg');

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>div</title><style>#div1 {width: 400px;height: 300px;background-color: lawngreen;}#div2 {width: 100%;height: 300px;background-color: darkred;}#bkdiv{width: 100%;height: 400px;/* background-color: beige; */background-image: url('./img/bk.jpg');}img{width: 100px;height: 100px;}</style></head><body><div id="div1"></div><div id="div2"></div><div id="bkdiv"><img src="./img/heiwukun.jpg" alt="" /><h1>将敬酒</h1><p>李白</p></div></body>
</html>

背景图扩展 repeat

background-repeated:左右扩展

background-size：背景大小

y方向：reated-y

就出现一次,不会重复填充空白区： no-repeat

填满

边框:border

border

边框顺时针上右下左 ---四个方向

线条：实线/虚线

默认写法：2px 颜色 soild实线/dashed虚线

border: 宽度颜色 solid；

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>border边框</title><style>#bkDiv{width: 50%;height: 500px;/* 实线 */border-top: 2px red solid;/* 虚线 */border-right: 4px dashed;border-left: 2px solid;border-bottom :2px solid;}</style></head><body><div id="bkDiv"><div id="bgdiv"></div></div></body>
</html>

应用：创建一个表格

一般写法

去掉黑边框

内部分割线

tfoot

照片

简写写法

格式：

border: 宽度（num.px）颜色（color） solid（实线）； ---四个方向

调整文本的位置text-

text-algin

text-decoration

去掉下划线

居中

完整版：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格-css</title><style>.tab{width: 100%;/* border-top: 4px green solid;border-right: 4px green solid;border-bottom: 4px green solid;border-left: 4px green solid; */border: 4px green solid;border-collapse: collapse;}th{/*  border-top: 1px green solid;border-right: 1px green solid;border-bottom: 1px green solid;border-left: 1px green solid; */border: 1px green solid;}td{/*      border-top: 1px green solid;border-right: 1px green solid;border-bottom: 1px green solid;border-left: 1px green solid; */border: 1px green solid;text-align: center;}img{width: 100%;height: 30px;}body{/* background-image: url('img/bk.jpg'); */}.myfoot{text-align: right;}a{text-decoration: none;}</style></head><body><table border="0" class="tab"><caption>学生信息表</caption><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>专业</th><th>学历</th><th>成绩</th><th>照片</th></tr></thead><tbody><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/libai.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr></tbody><tfoot><tr><td colspan="8" class="myfoot"><a href="#">上一页</a><a href="#">1</a> &nbsp;&nbsp;<a href="#">2</a> &nbsp;&nbsp;<a href="#">3</a>&nbsp;&nbsp;<a href="#">...</a><a href="#">下一页</a></td></tr></tfoot></table></body>
</html>

实操：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格-css</title><style>.title{background-color: ;#00ac9a}.tab{width: 100%;/* border-top: 4px green solid;border-right: 4px green solid;border-bottom: 4px green solid;border-left: 4px green solid; */border: 4px green solid;border-collapse: collapse;}th{/*  border-top: 1px green solid;border-right: 1px green solid;border-bottom: 1px green solid;border-left: 1px green solid; */background-color: #00ac9a;color: aliceblue;border: 1px green solid;}td{/*      border-top: 1px green solid;border-right: 1px green solid;border-bottom: 1px green solid;border-left: 1px green solid; */border: 1px #00ac9a solid;text-align: center;}img{width: 100%;height: 30px;;}body{/* background-image: url('img/bk.jpg'); */}.myfoot{text-align: right;}a{text-decoration: none;}</style></head><body><table border="0" class="tab"><caption class="title">近期开服</caption><thead><tr><th>游戏名称</th><th>开服时间</th><th>服务器名</th><th>运营商</th><th>福利</th><th>官网</th></tr></thead><tbody><tr><td>白蛇传奇</td><td>2024-11-10 10:00</td><td>双线1服</td><td>9377游戏</td><td>9377平台全满攻速礼包</td><td><img src="./img/entry.png" alt="无法进入!" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr><tr><td>snuts001</td><td>徐泽伟</td><td>男</td><td>18</td><td>幼师</td><td>中专</td><td>60</td><td><img src="./img/heiwukun.jpg" alt="个人照片" /></td></tr></tbody><tfoot><tr><td colspan="8" class="myfoot"><a href="#">上一页</a><a href="#">1</a> &nbsp;&nbsp;<a href="#">2</a> &nbsp;&nbsp;<a href="#">3</a>&nbsp;&nbsp;<a href="#">...</a><a href="#">下一页</a></td></tr></tfoot></table></body>
</html>

margin 边距

上 / 左常用

margin-top

margin-left

居中 -- auto 永远在屏幕中间。

再处理td的宽度

跳转

去下划线

变颜色

按钮

伪类

选择器: hover

选中标签滑动鼠标效果

tr:hover{background-color:#ededed;font-weight:bold;
}

字体

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>仿17173</title><style>.tab {margin-left: auto;margin-right: auto;margin-top: 10%;width: 80%;border-collapse: collapse;}
thead {background-color: #00ac9a;}
th {height: 50px;color: white;}
td {height: 50px;text-align: center;border-bottom: 1px #ededed solid;color: #666;}
a {text-decoration: none;color: #00ac9a;}
.btn {width: 150px;padding: 5px 5px 5px 5px;border: 0px red solid;background-color: #ff7800;color: white;}tr:hover{background-color: #ededed;font-weight: bold;}.firstTr{background-color: #E9D435 ;}.hot{width: 23px;height: 12px;}</style></head><body>
<table class="tab"><thead><tr><th>游戏名称</th><th>开服时间 </th><th>服务器名 </th><th>运营商</th><th>福利</th><th>官网</th></tr></thead><tbody><tr class="firstTr"><td><a href="#">星变<img src='https://ue.yeyoucdn.com/a/kf/index/2017/img/ico-hot.png' class="hot"/> </a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td></tr><tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr><tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr>
<tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr>
<tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr>
<tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr><tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr><tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr><tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr>
</tbody>
</table>
</body>
</html>

去掉中间留白

完整代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>仿17173</title><style>body{background-image: url('./img/bk2.png');background-repeat: no-repeat;background-size: 100% 100%;}.tab {margin-left: auto;margin-right: auto;width: 80%;border-collapse: collapse;}
thead {background-color: #00ac9a;}
th {height: 50px;color: white;}
td {height: 50px;text-align: center;border-bottom: 1px #ededed solid;color: #666;}
a {text-decoration: none;color: #00ac9a;}
.btn {width: 150px;padding: 5px 5px 5px 5px;border: 0px red solid;background-color: #ff7800;color: white;}tr:hover{background-color: #ededed;font-weight: bold;}.firstTr{background-color: #E9D435 ;}.hot{width: 23px;height: 12px;}div{width: 100%;height: 200px;border: 0px red solid ;background-image: url('https://ue.yeyoucdn.com//images/game/index/2014/bg-full0.jpg');background-size: 100% 100%;}</style></head><body><div></div>
<table class="tab"><thead><tr><th>游戏名称</th><th>开服时间 </th><th>服务器名 </th><th>运营商</th><th>福利</th><th>官网</th></tr></thead><tbody><tr class="firstTr"><td><a href="#">星变<img src='https://ue.yeyoucdn.com/a/kf/index/2017/img/ico-hot.png' class="hot"/> </a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td></tr><tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr><tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr>
<tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr>
<tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr>
<tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr><tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr><tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr><tr><td><a href="#">梦回江湖</a></td><td>2024-11-10 08:00</td><td>双线115服</td><td>彩虹游戏</td><td>VIP专属霸服礼包</td><td><a href="#" class="btn">进入游戏</a></td>
</tr>
</tbody>
</table>
</body>
</html>

前端三大组件之CSS，三大选择器，游戏网页仿写

回顾 full stack全栈 Web前端三大组件结构(html) 样式(css) 动作/交互(js) --- 》框架vue，安哥拉 div 常用的标签扩展标签列表 ul/ol order——有序号 unordered——没序号的黑点 <!DOCTYPE html> <html><head><meta charset"…...

编程日记 2024/11/13 20:56:42

sqlsever 分布式存储查询

当数据存储在不同的服务器上的时候怎么取出来进行正常管连呢?比如你有 A 和B 两个服务器里面存有两个表分别是 A_TABLE、B_TABLE 其中他们的关联关系是 ID 互相关联 1.创建链接服务器如果在B数据库要访问A数据库那么就在B数据库创建 -- 创建链接服务器 EXEC sp_addlink…...

编程日记 2024/11/13 20:53:39

deeponet(nature原文部分重点提取)

论文链接：Learning nonlinear operators via DeepONet based on the universal approximation theorem of operators | Nature Machine Intelligence 原文部分重点提取 DeepONets 会产生小的泛化误差隐式类型算子还可以描述我们对其形式没有任何数学知识的系统 De…...

编程日记 2024/11/13 20:52:38

LeetCode【0036】有效的数独

本文目录 1 中文题目2 求解方法：python内置函数set2.1 方法思路2.2 Python代码2.3 复杂度分析 3 题目总结 1 中文题目请根据以下规则判断一个 9 x 9 的数独是否有效。数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线…...

编程日记 2024/11/13 20:49:34

Typecho登陆与评论添加Geetest极验证，支持PJAX主题（如Handsome）

Typecho登陆与评论添加Geetest极验证，支持PJAX主题（如Handsome） 起因最近垃圾评论比较多，为了防止一些机器人，我给博客添加了一些评论过滤机制，并为评论添加了验证码。原本使用的插件是noisky/typecho…...

编程日记 2024/11/13 20:48:33

前端入门一之ES6--面向对象、够着函数和原型、继承、ES5新增方法、函数进阶、严格模式、高阶函数、闭包

前言 JS是前端三件套之一，也是核心，本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点，这篇是ES6;这篇文章是本人大一学习前端的笔记；欢迎点赞收藏关注，本人将会持续更新。文章目录 JS高级 ES61、面向对象1.1…...

编程日记 2024/11/13 20:47:31

脑机接口、嵌入式 AI 、工业级 MR、空间视频和下一代 XR 浏览器丨RTE2024 空间计算和新硬件专场回顾

这一轮硬件创新由 AI 引爆，或许最大受益者仍是 AI，因为只有硬件才能为 AI 直接获取最真实世界的数据。在人工智能与硬件融合的新时代，实时互动技术正迎来前所未有的创新浪潮。从嵌入式系统到混合现实，从空间视频到脑机接口&…...

编程日记 2024/11/13 20:43:27

MSA_emb 类的作用是对多序列对齐（MSA）数据进行嵌入编码，同时添加位置编码和查询编码（调用PositionalEncoding 和 QueryEncoding）以便为序列特征建模类。源代码： class MSA_emb(nn.Module):def __init__(self, d_model=64, d_msa=21, p_drop=0.1, max_len=5000):super(…...

编程日记 2024/11/13 20:42:26

2411C++,C++26反射示例

参考 namespace __impl {template<auto... vals>struct replicator_type {template<typename F>constexpr void operator>>(F body) const {(body.template operator()<vals>(), ...);}};template<auto... vals>replicator_type<vals...>…...

编程日记 2024/11/13 20:41:25

Ubuntu上搭建Flink Standalone集群

Ubuntu上搭建Flink Standalone集群本文部分内容转自如下链接。环境说明 ubuntu 22.06 先执行apt-get update更新环境第1步安装JDK 通过apt自动拉取 openjdk8 apt-get install openjdk-8-jdk执行java -version，如果能显示Java版本号，表示安装并…...

编程日记 2024/11/13 20:39:22

C语言精选真题2

题目要求：将形参s所指向的字符串转换为整数并且返回知识点： 将字符1转化为整数1 int fun(char *s) {int flag1,n0; if(*s-) //先根据第一个符号来判断是正负；然后读取第二位{flag-1;s; }else if(*s){s;}while(*s>0&&…...

编程日记 2024/11/13 20:38:20

Netty篇（WebSocket）

目录一、简介二、特点三、websock应用场景四、websocket案例 1. 服务端 2. 处理器 3. 页面端处理五、参考文献一、简介没有其他技术能够像WebSocket一样提供真正的双向通信，许多web开发者仍然是依赖于ajax的长轮询来实现。（注&#xff…...

编程日记 2024/11/13 20:36:18

云原生-docker安装与基础操作

一、云原生 Docker 介绍 Docker 在云原生中的优势二、docker的安装三、docker的基础命令 1. docker pull（拉取镜像） 2. docker images（查看本地镜像） 3. docker run（创建并启动容器） 4. docker ps…...

编程日记 2024/11/13 20:35:17

MySQL数据库：SQL语言入门【上】（学习笔记）

SQL（Structured Query Language）是结构化查询语言的简称，它是一种数据库查询和程序设计语言，同时也是目前使用最广泛的关系型数据库操作语言。（95%适用于所有关系型数据库） 【 SQL是关系型数据库通用的操作…...

编程日记 2024/11/13 20:30:10

重学 Android 自定义 View 系列(六)：环形进度条

目标自定义一个环形进度条，可以自定义其最大值、当前进度、背景色、进度色，宽度等信息。最终效果如下（GIF展示纯色有点问题）： 1. 结构分析背景圆环：表示进度条的背景。进度圆环：表示当前…...

编程日记 2024/11/13 20:25:03

nodejs 020: React语法规则 props和state

props和state 在 React 中，props 和 state 是管理数据流的两种核心机制。理解它们之间的区别和用途是构建 React 应用程序的基础。一、props 和 state的区别特性propsstate定义方式由父组件传递给子组件的数据组件内部管理的本地数据是否可修改不可变&#xff…...

编程日记 2024/11/13 20:24:02

STM32问题集

这里写目录标题一、烧录1、 Can not connect to target!【ST-LINK烧录】一、烧录 1、 Can not connect to target!【ST-LINK烧录】烧录突然 If the target is in low power mode, please enable “Debug in Low Power mode” option from Target->settings menu 然后就&…...

编程日记 2024/11/13 20:22:00

SwiftUI（十二）- 容器组件布局与结构的基石

引言在用户界面开发中，布局是设计一个应用程序的视觉层次和交互体验的核心之一。无论是设计简单的按钮排布，还是复杂的多层次页面，合理的布局和结构可以极大地提升用户体验。而容器组件，作为将多个视图整合、组织、排列的工具&a…...

编程日记 2024/11/13 20:20:58

想租用显卡训练自己的网络？AutoDL保姆级使用教程（PyCharm版）

各位小伙伴们大家好~ 不知道各位同学在科研过程中是否有这样的苦恼电脑无显卡。难不成我要用CPU跑实验吗？救救我吧电脑显卡算力太低。训练过程慢慢慢慢慢，等半天都出不来结果电脑显卡显存不够，batchsize稍微高一点点，就要爆显存…...

编程日记 2024/11/13 20:18:55

LeetCode【0039】组合总和

本文目录 1 中文题目2 求解方法：回溯法2.1 方法思路2.2 Python代码2.3 复杂度分析 3 题目总结 1 中文题目给定一个无重复元素的整数数组 candidates 和一个目标整数 target ，找出 candidates 中可以使数字和为目标数 target 的所有不同组合 &#…...

编程日记 2024/11/13 20:16:53

QMC5883L的驱动

简介本篇文章的代码已经上传到了github上面，开源代码作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/6/21 13:57:28

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...

编程新知 2025/7/10 10:37:13

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/6/17 4:52:56

MVC 数据库

MVC 数据库引言在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/6/27 10:06:34

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/7/11 20:59:13

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...

编程新知 2025/6/21 22:37:01

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights）多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/7/6 21:43:13

基于Springboot+Vue的办公管理系统

角色： 管理员、员工技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...

编程新知 2025/7/10 6:01:50

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍传统滑模观测器采用如下结构： 传统SMO中LPF会带来相位延迟和幅值衰减，并且需要额外的相位补偿。采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)，可以去除高次谐波，并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2025/7/11 19:32:48

回顾