前端三大组件之CSS，三大选择器，游戏网页仿写
回顾
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> <a href="#">2</a> <a href="#">3</a> <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> <a href="#">2</a> <a href="#">3</a> <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"…...
sqlsever 分布式存储查询
当数据存储在不同的服务器上的时候怎么取出来进行正常管连呢?比如你有 A 和B 两个服务器 里面存有两个表 分别是 A_TABLE、B_TABLE 其中 他们的关联关系是 ID 互相关联 1.创建链接服务器如果在B数据库要访问A数据库 那么 就在B数据库创建 -- 创建链接服务器 EXEC sp_addlink…...
deeponet(nature原文部分重点提取)
论文链接：Learning nonlinear operators via DeepONet based on the universal approximation theorem of operators | Nature Machine Intelligence 原文部分重点提取 DeepONets 会产生小的泛化误差 隐式类型算子还可以描述我们对其形式没有任何数学知识的系统 De…...
LeetCode【0036】有效的数独
本文目录 1 中文题目2 求解方法：python内置函数set2.1 方法思路2.2 Python代码2.3 复杂度分析 3 题目总结 1 中文题目 请根据以下规则判断一个 9 x 9 的数独是否有效。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线…...
Typecho登陆与评论添加Geetest极验证，支持PJAX主题（如Handsome）
Typecho登陆与评论添加Geetest极验证，支持PJAX主题（如Handsome） 起因 最近垃圾评论比较多，为了防止一些机器人，我给博客添加了一些评论过滤机制，并为评论添加了验证码。 原本使用的插件是noisky/typecho…...
前端入门一之ES6--面向对象、够着函数和原型、继承、ES5新增方法、函数进阶、严格模式、高阶函数、闭包
前言 JS是前端三件套之一，也是核心，本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点，这篇是ES6;这篇文章是本人大一学习前端的笔记；欢迎点赞 收藏 关注，本人将会持续更新。 文章目录 JS高级 ES61、面向对象1.1…...
脑机接口、嵌入式 AI 、工业级 MR、空间视频和下一代 XR 浏览器丨RTE2024 空间计算和新硬件专场回顾
这一轮硬件创新由 AI 引爆，或许最大受益者仍是 AI，因为只有硬件才能为 AI 直接获取最真实世界的数据。 在人工智能与硬件融合的新时代，实时互动技术正迎来前所未有的创新浪潮。从嵌入式系统到混合现实，从空间视频到脑机接口&…...
RoseTTAFold MSA_emb类解读
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(…...
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...>…...
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版本号，表示安装并…...
C语言 精选真题2
题目要求：将形参s所指向的字符串转换为整数并且返回 知识点： 将字符1转化为整数1 int fun(char *s) {int flag1,n0; if(*s-) //先根据第一个符号来判断是正负；然后读取第二位{flag-1;s; }else if(*s){s;}while(*s>0&&…...
Netty篇（WebSocket）
目录 一、简介 二、特点 三、websock应用场景 四、websocket案例 1. 服务端 2. 处理器 3. 页面端处理 五、参考文献 一、简介 没有其他技术能够像WebSocket一样提供真正的双向通信，许多web开发者仍然是依赖于ajax的长轮询来 实现。（注ÿ…...
云原生-docker安装与基础操作
一、云原生 Docker 介绍 Docker 在云原生中的优势 二、docker的安装 三、docker的基础命令 1. docker pull（拉取镜像） 2. docker images（查看本地镜像） 3. docker run（创建并启动容器） 4. docker ps…...
MySQL数据库：SQL语言入门 【上】（学习笔记）
SQL（Structured Query Language）是结构化查询语言的简称，它是一种数据库查询和程序设计语言，同时也是目前使用最广泛的关系型数据库操作语言。（95%适用于所有关系型数据库） 【 SQL是关系型数据库通用的操作…...
重学 Android 自定义 View 系列(六)：环形进度条
目标 自定义一个环形进度条，可以自定义其最大值、当前进度、背景色、进度色，宽度等信息。 最终效果如下（GIF展示纯色有点问题）： 1. 结构分析 背景圆环：表示进度条的背景。进度圆环：表示当前…...
nodejs 020: React语法规则 props和state
props和state 在 React 中，props 和 state 是管理数据流的两种核心机制。理解它们之间的区别和用途是构建 React 应用程序的基础。 一、props 和 state的区别 特性propsstate定义方式由父组件传递给子组件的数据组件内部管理的本地数据是否可修改不可变ÿ…...
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 然后就&…...
SwiftUI（十二）- 容器组件 布局与结构的基石
引言 在用户界面开发中，布局是设计一个应用程序的视觉层次和交互体验的核心之一。无论是设计简单的按钮排布，还是复杂的多层次页面，合理的布局和结构可以极大地提升用户体验。而容器组件，作为将多个视图整合、组织、排列的工具&a…...
想租用显卡训练自己的网络？AutoDL保姆级使用教程（PyCharm版）
各位小伙伴们大家好~ 不知道各位同学在科研过程中是否有这样的苦恼 电脑无显卡。难不成我要用CPU跑实验吗？救救我吧电脑显卡算力太低。训练过程慢慢慢慢慢，等半天都出不来结果电脑显卡显存不够，batchsize稍微高一点点，就要爆显存…...
LeetCode【0039】组合总和
本文目录 1 中文题目2 求解方法：回溯法2.1 方法思路2.2 Python代码2.3 复杂度分析 3 题目总结 1 中文题目 给定一个 无重复元素 的整数数组 candidates 和一个目标整数 target ，找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）
考察一般的三次多项式，以r为参数： p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]； 此多项式的根为： 尽管看起来这个多项式是特殊的，其实一般的三次多项式都是可以通过线性变换化为这个形式…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合
作者：来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布，Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明，Elastic 作为 …...
的打车小程序)
基于鸿蒙(HarmonyOS5)的打车小程序
1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...
GeoServer发布PostgreSQL图层后WFS查询无主键字段
在使用 GeoServer（版本 2.22.2） 发布 PostgreSQL（PostGIS）中的表为地图服务时，常常会遇到一个小问题： WFS 查询中，主键字段（如 id）莫名其妙地消失了！ 即使你在…...
RushDB开源程序 是现代应用程序和 AI 的即时数据库。建立在 Neo4j 之上
一、软件介绍 文末提供程序和源码下载 RushDB 改变了您处理图形数据的方式 — 不需要 Schema，不需要复杂的查询，只需推送数据即可。 二、Key Features ✨ 主要特点 Instant Setup: Be productive in seconds, not days 即时设置 ：在几秒钟…...
ZYNQ学习记录FPGA(二)Verilog语言
一、Verilog简介 1.1 HDL（Hardware Description language） 在解释HDL之前，先来了解一下数字系统设计的流程：逻辑设计 -> 电路实现 -> 系统验证。 逻辑设计又称前端，在这个过程中就需要用到HDL，正文…...