HTMLayout学习笔记
by BBDXF
一、界面篇
学习界面需要有一定的HTML、CSS认知,如果你问为什么,那就当我白说。
由于界面库官方没有给一个完善的User guide,所有的学习都靠自己,而唯一的标准教程就是SDK中给的例程,所以为了完善地学习此库,以SDK中的例程一个个解析学习。
此篇主要来解析html_samples下的界面编写,我想这是大家都非常关心的话题,所以放在第一位。(PS:由于界面编写需要很多 HTML+CSS 知识,我也是新手,没有多少这方面的学习,所以如有错误纯属正常,望谅解。)
参考文档:http://www.terrainformatica.com/wiki/h-smile/drag-n-drop?do=index
1、@font-face
此例程主要讲解字体(自定义字体)在界面中的使用。(以后若无特殊情况,都会按照以下形式【文件结构+代码+解析】组织文章)
文件结构:
NinjaLine.ttf
test.htm
代码:在Style中,插入
@font-face
{
font-family: NinjaLine;
src: url(NinjaLine.ttf);
}
p
{
font: 18pt NinjaLine;
}
解析:其中font:18pt NinjaLine; 是设置段落
之内的文字以NinjaLine字体显示。而由于这种字体没有在系统里注册,所以不能直接调用,需要按照@font-face{...}的形式给予声明(和C/C++的函数声明的感觉差不多),如果是系统里已经有的字体,如“宋体”、“楷体”等就可以不声明,直接使用。
2、@image-map
这部分讲的是@image-map的用法。
文件结构:
cmd.bat
dpi-aware.htm
rttb.png
star-1x.png
star-2x.png
test.htm
toolbar-icons.htm
第一个文件:dpi-aware.htm,讲的是关于自适应DPI的问题。
代码:
@image-map dpi-aware {
src: url(star-1x.png) 100dpi,
url(star-2x.png) ;
}
#star {
size:180dip;
background: no-repeat 50% 50%;
background-image: image-map(dpi-aware);
border:1px solid;
}
#star-no {
size:180dip;
background: no-repeat 50% 50%;
background-image: url(star-1x.png);
border:1px solid;
}
//HTML代码省略
解析:
代码中比较值得注意的就是声明了一个@image-map dpi-aware {}(不专业,但是方便理解就这么说了),然后再#star这一块调用image-map(dpi-aware),将它设置为背景图片。在我的电脑上运行的效果是#star和#star-no显示的是同一张图片(大家的效果都应该差不多),但是将声明的部分改为:
@image-map dpi-aware {
src: url(star-1x.png) 90dpi,
url(star-2x.png) ;
}
之后,显示的是声明的第二张图片。为什么呢?
官方给出的说明其实已经解释了这个问题,@image-map dpi-aware 声明,当被调用时,会根据电脑屏幕的DPI(每英寸点数,win7可以通过注册表 HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetric\AppliedDPI查看),当电脑DPI小于设定的100dpi时,就会调用第一张图片,否则就是第二张了。总的来说,就是根据屏幕DPI自适应显示相应的图片。
第二个文件:test.htm 是关于设置样式的问题,官方没给任何解释,但是根据第三个文件内容,可以很明显地看出来,它啥也不是,就是个Test,Pass掉。
第三个文件:toolbar-icons.htm 这个文件很重要,他给我们提供了一种很方便地加载类似MFC中工具条界面的方法。
代码:
Style部分样式代码:
@image-map tb-icon
{
src:url(rttb.png);
cells:15 2;
items: ulist,
olist,
unindent,
indent,
picture,
table,
link,
align-left,
align-center,
align-right,
align-justify,
align,
fullscreen,
unfullscreen,
props,
bold,
italic,
underline,
strikethrough,
font-family,
font-size,
text-color,
text-back-color,
source;
}
toolbar {
display:block;
display-model:block-inside;
flow:horizontal; border-spacing:2px;
padding:0;
border-left: 1px solid #F4F4F4;
border-bottom: 1px solid #BBB;
background-color: #F1F1F1 #F1F1F1 #DADADA #DADADA;
}
toolbar > widget.button {
behavior:clickable;
size:21px;
padding:0;
foreground:no-repeat 50% 50%; padding:3px;
foreground-repeat:no-repeat;
background-image:none;
background-repeat:stretch;
hit-margin: 2px;
margin: 2px;
transition:none;
}
toolbar > widget.button.bold { foreground-image:image-map(tb-icon,bold); }
toolbar > widget.button.italic { foreground-image:image-map(tb-icon,italic); }
....(类似的省略)
Body部分Htm代码:
....其他的省略
解析:
Style部分的第一个声明@image-map和字体声明类似,声明了一个ToolBar的结构,其中,src:url(xx.png);表明Toolbar所使用的图片,一般为了美观,png要做成透明背景的。cells:15 2;表明整个Toolbar的大小为多少行多少列。items:xx1,xx2,...;表明Toolbar中有哪些项,都以名称表示,每个名称都和图片中的图标相对应。一般cells中形成的表格数一定要大于items的项目数。
toolbar{ .... }和toolbar > widget.button{....}和其类似样式的就是CSS样式了,虽然并不和平常使用的CSS完全相同,但是除了添加的一些专门适用于程序的样式之外,其他的都差不多,我只捡一些比较重要和特殊的加以说明,一般性描述的不做介绍,有问题的可以去W3CSchool和HTMLayout官网查询。
toolbar{} //设置 之间的内容的样式,这种使用方法以后会很常见
display:block; //显示当前块,一般不需要设置,默认的就是这个
flow:horizontal; //水平放置其内部块,这个很重要,是HTMLayout专用的
toolbar > widget.button{} //设置内部或者有声明的块的样式,这种用法很常见,你可以根据各块的关系随意组合下去。
toolbar > widget.button:hover{} //上一个用法的扩展,表明是在上一个样式的前提下,当鼠标移到上面时,所表现的的样式,类似的还有 :active、:disable等。
behavior:clickable;//设置它对应控件的动作为可以被点击。behavior有很多动作,每一个动作的具体含义需要查阅官方的文档。
background-image:url(theme:toolbar-button-hover); //设置背景图片,重点是后面的theme主题设置,目前未找到全的列举说明,暂时明白什么意思就行了,当然也可以自己设置对应的图片。
foreground-image-transformation: colorize(#70F); //设置当每一项被至于焦点时,图片的前景颜色,通过colorize(xx)可以改变图片的显示颜色(透明的前景色)。
toolbar > widget.button.bold { foreground-image:image-map(tb-icon,bold); } //这里才是重点的重点,它将HTML中的name="bold"(.bold)对应的widget和@image-map中的图片对应起来,{}中的bold就是在声明时指定的名称。
最后是HTML部分,重点是 这表明widget控件的类型(style)为button,其名称为bold(bold这里只是表示一个名称,不是粗体的标志),个人猜测完全可以写为 这种比较正规的写法,只是样式需要做很多调整,没有官方的方法省事。值得注意的是,CSS中的名称一定要和这里的style和class对应,原因我也不用多说了。
3、abs
文档结构:
│ abs.htm
│ abspos.htm
│ abs_fix.htm
│ fix_center.htm
│ menus.htm
│ rel_abs.htm
└─images
back.png
menu-back.png
第一个文件:abs.htm 演示的是绝对位置的不同效果。
代码:
Style部分:
#abs1 {
position:relative;
overflow:auto;
height:50%;
...
}
#abs2 {
position:absolute;
width:150px;
...
}
#abs3 {
position:absolute;
width:150px;
...
}
HTML部分(只写框架):
解析:
Style部分值得注意的就是position属性的设置,其中absolute指绝对的,relative相对的。这里的绝对是相对于当前所在的大块(母块)来说的,由于abs1的height:50%,配合overflow:auto,每次只显示一半的区块,所以拉动滑动条时它的左上角坐标是变化的,而abs2相对于他的左上角的绝对位置不变,所以abs2区块也会跟随着abs1移动。而abs3由于直接位于body之内,他的位置相对于body的左上角来绝对确定,body不变,他的位置就不会变。
做个小总结:
1、absolute:不占位、relative:有占位!position为rel的层在显示时,会占用一行!其后面的abs层只会在下一行显示出来! position为abs的层在显示时,会与后面的重叠在一起!
2、默认情况下(不结合top等来定位),absolute(绝对定位)以父层来定位的
如上面的id为abs的层,如果不结合top等来定位,则其显示位置会随父级posi层(posi在文档左下角,其也会在左下角)
3、在结合top、bottom、right、left等属性时,absolute(绝对定位)以窗口做为定位,relative以自身的占位为基线做偏移!
4、在结合top、bottom、right、left等属性时,如果想absolute(绝对定位)能以父层做为定位基线的话,则在父层应用absolute或relativ属性就可以!
HTML部分是标准的html标记,不做解释。
第二个文件:abs_fix.htm 第一个的拓展,介绍属性position:fixed; 的用法
由于其他的都和第一个类似,不做介绍,只讲解position:fixed; 的原理。
position:fixed; 除了相对位置和绝对位置,还有一个fixed(固定的),它用来定位一个区块相对于边框(上下左右)的位置,使用非常方便,通过它你可以很简单地将一个区块固定到右边框、上边框、下边框,而不同设置太多的代码。一般他需要left,right,top,bottom中的一个或者多个配合。如将一个区块设置为距右边框10px,上下10px,宽度100px,高度随框架变化,代码如下:
#fix {
position:fixed;
right:10px;
top:10px;
width:100px;
bottom:10px;
}
相当的方便和简单,唯一的缺点是在低版本的IE引擎(如IE6.0),变现的不好,不过对于HTMLayout没有问题。
第三个文件:abspos.htm 这个比第一个还简单,介绍绝对位置的,略过。
第四个文件:fix_center.htm 这个和第二个类似,是它的威力加强版。呵呵,实现居中效果。这个很简单。
左右居中: left:*;right:*;
上下居中:top:*;bottom:*;
PS: 千万不要忘了设置width:属性,这应该是理所当然的,你不给人家提供宽度,如何居中!
第四个文件: menus.htm 通过定位实现菜单的样式,这个比较有意思。这个里面没有新的内容,但是需要有一定的排版美化能力,完全用css组合成的一个菜单框架,这里也只讲解思路。
代码:
Style部分:
menu {
flow:horizontal;
padding-right:100%%;
...
}
menu li{
display:block;
position:relative;
...
}
menu menu{
flow:vertical;
display:none;
...
}
menu > li:hover > menu{
display:block;
}
HTML部分:
File
New
Open
Exit
代码解析:
先说HTML结构,先有一个
内部包含多个,每个 都作为主菜单显示的内容,在 的内部,再设置一个这样的结构,作为子菜单,还可以在主菜单下创建一个填充一些想要的控件。
CSS部分,重点是flow:horizontal/vertical;其中主菜单使用水平排列,使得每个
都成为一个单独的菜单存在,子菜单同样使用垂直排列,这样就成为了一个完整的菜单栏。
第五个文件:rel_abs.htm 相对定位,参看第一个的总结就可。
4、animated-png 动画的png(挺有意思的)
文件结构:
012-dispose-background.png
012-dispose-none.png
012-dispose-previous.png
apng.htm
bouncing-beach-ball.png
disposal.htm
loading.htm
loading_16.png
第一个文件:apng.htm 展示如何使用APNG动画
代码:
Style部分:
p:nth-child(3) { background-color:#8080ff; }
p:nth-child(2) { background-color:#ff8080; }
HTML部分:
解析:
首先说下调用问题,就和普通的图片调用一样。然后,背景的问题,可以通过设置背景色来展现不同的背景。最后需要注意一个用法:p:nth-child(3) { } 这种调用是指,第3个
标签的样式,可以用来避免多次设置class和id。
第二个文件:disposal.htm 用来展示用不同模式制作出来的动画APNG的差别,这个对于制作APNG的时候有点帮助,程序控制方面没用。
第三个文件:Loading.htm 和第一个一样。不解释。
5、animations
文件结构:
│ blend.htm
│ h-sliding-bar-csss!.htm
│ h-sliding-bar.htm
│ popup-animations.htm
│ sliding-bar-csss!.htm
│ sliding-bar.htm
│ sliding-list.htm
│
└─images
│ 2.gif
│ 4.gif
│ 5.gif
│ 7.gif
│ led-blue.png
│ led-green.png
│ led-red.png
│ led-yellow.png
│ leds.xar
│ list-back.png
│
├─cds
│ darkside.jpg
│ delicate.jpg
│ finalcut.jpg
│
└─outlook
calendar.gif
contacts.gif
folder.gif
mail.gif
notes.gif
tab-hover.png
tab.png
注:这里的文件比较特殊,如sliding-bar.htm 和sliding-bar-csss!.htm,这两个文件其实实现的是同一种效果,只是前者使用的是静态的CSS,后者使用了类似动态语言的编程,由于个人能力原因,这里只对静态的加以解释,对于想了解的各位说声抱歉。
第一个文件:Blend.htm 展示的是图片的渐变效果和一个动作
代码:
img:hover
{
foreground-image:url(images/led-red.png);
transition: blend;
}
#test { behavior:dropdown; }
#test popup img
{
foreground-image:url(images/led-yellow.png);
transition: blend;
}
#test popup img:hover
{
foreground-image:url(images/led-blue.png);
transition: blend;
}
HTML部分:
解析:
先说Blend的问题,我们能很明显地发现CSS中有这么一条属性:transition:blend;它告诉我们所有的渐变使用混合模式,这就是程序中看到的鼠标滑过之后一些浅颜色的残留,视觉效果很好。
再来说动作的问题:behavior:popup;之前也讲到过clickeable的动作,那个使一个button成为一个可以被点击的对象。这里的popup也是一个固定的动作,它使标签中的内容项菜单一样弹出。这里的弹出和之前的菜单比较类似,但是原理完全不一样。菜单弹出的是通过CSS的动作控制,将隐藏的动态显示出来,属于外部处理,而这里的就像是内部自动实现,只要你定义了popup标签,通过设置它父层的behavior,系统会自动调出下层的pop内容。
第二个文件:h-slider-bar.htm 水平的动态工具条
( 暂停更新,预计年后继续 )
转载于:https://www.cnblogs.com/bbdxf/p/3466867.html
你可能感兴趣的:(HTMLayout界面CSSS样式解析笔记)
【大模型】DeepSeek 高级提示词技巧使用详解
大富大贵7
程序员知识储备1 经验分享
以下是关于**DeepSeek大模型高级提示词技巧**的详细解析,帮助您更高效地利用模型能力,解决复杂任务:---###一、**核心提示词设计原则**1.**明确目标**-**避免模糊性**:直接说明任务类型(如生成、分析、推理、创作)和期望的输出格式(如代码、列表、JSON、自然语言)。-**示例**:❌模糊提示:“帮我处理数据。”✅明确提示:“分析以下销售数据,按地区分类,总结Top3区域的增
英伟达(NVIDIA)芯片全解析:专业分类、应用场景与真实案例
嵌入式Jerry
AI 分类 人工智能 数据挖掘 嵌入式硬件 linux 数据分析 算法
引言你知道吗?你每天使用的智能手机、AI语音助手、自动驾驶汽车,甚至是电影特效背后,都有英伟达(NVIDIA)的芯片在默默工作。NVIDIA不仅仅是“游戏显卡”的代名词,它的GPU和AI计算平台已经广泛应用于人工智能(AI)、自动驾驶、医疗影像、工业自动化、智能家居等领域。那么,NVIDIA的芯片有哪些分类?它们分别用在哪里?普通人又能从哪些场景感受到它的存在?今天,我们就来用最通俗易懂的方式,带
《DAMA数据管理知识体系指南》第五章 数据建模和设计读书笔记总结
数据大包哥
# 数据治理 大数据
《DAMA数据管理知识体系指南》第五章数据建模和设计读书笔记总结在《DAMA数据管理知识体系指南》中,第五章围绕数据建模和设计展开深入探讨,数据建模和设计作为数据管理的关键环节,对组织有效理解、管理和利用数据起着基础性作用,为企业实现数据驱动的决策和运营提供了重要支撑。一、数据建模和设计的基础概念1.1定义与重要性数据建模是发现、分析和确定数据需求,并采用数据模型的精确形式表示和传递这些需求的过程
《DAMA数据管理知识体系指南》备考笔记-第一章 数据管理 (4 分)_dama8大模块(3)
2401_83739821
程序员 运维 学习 面试
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。需要这份系统化的资料的朋友,可以点击这里获取!一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!数据管理所需技能包括:设计能力、高级技术技能、理
《DAMA数据管理知识体系指南》备考笔记-第一章 数据管理 (4 分)_dama8大模块
2401_84411072
程序员 笔记 大数据
数据:构成信息的基本材料。信息:数据在特定上下文中的应用。P2数据驱动的定义:依赖事件触发和分析应用以获得有价值的见解。这要求业务领导与技术专家合作,并依据专业规则对数据进行有效管理。P3数据管理的核心原则:P4-51高效数据管理需领导层承担其责任。2数据价值:A作为一个具有独特属性的资产;B可以用经济学术语表达。3数据管理的需求源自业务需求:A涉及质量管理。B需要元数据。C需要规划。D应驱动IT
rust笔记8-Deref与隐式解引用强制转换
shanzhizi
rust rust 笔记 算法
Rust的智能指针和DerefTrait是Rust中非常重要的概念,它们使得Rust的引用和指针操作更加灵活和安全。下面我们将深入介绍DerefTrait、Deref与&、*运算符的关系,以及Rust的隐式解引用强制转换(DerefCoercion)。1.智能指针与DerefTrait智能指针(如Box、Rc、Arc等)是Rust中用于管理堆上数据的类型。它们实现了DerefTrait,使得智能指
机器学习学习笔记(十七)—— 优化算法概述
lancetop-stardrms
机器学习 机器学习
一、概观scipy中的optimize子包中提供了常用的最优化算法函数实现。我们可以直接调用这些函数完成我们的优化问题。optimize中函数最典型的特点就是能够从函数名称上看出是使用了什么算法。下面optimize包中函数的概览:1.非线性最优化fmin--简单Nelder-Mead算法fmin_powell--改进型Powell法fmin_bfgs--拟Newton法fmin_cg--非线性共
chatgpt赋能python:PythonUDS:让你的汽车掌握更多技能
qq_43479892
ChatGpt chatgpt 汽车 计算机
PythonUDS:让你的汽车掌握更多技能UDS(UnifiedDiagnosticServices)是一种汽车电子控制单元(ECU)通信协议,用于车辆的诊断和测试。PythonUDS是用Python编程语言实现的UDS客户端和服务器实现,并且为汽车行业提供了许多有用的功能。什么是PythonUDS?PythonUDS是一种用于处理汽车诊断数据和通信的Python库。它可以帮助你轻松地解析和操作U
(学习总结25)Linux工具:vim 编辑器 和 gcc/g++ 编译器
瞌睡不来
linux 编辑器 学习 vim gcc/g++ 编译器
Linux工具:vim编辑器和gcc/g++编译器vim编辑器在Linux命令行中执行vimvim命令模式光标操作相关命令文本或字符操作命令撤销操作命令查找操作vim插入模式vim底行模式查找与编写操作界面操作文件处理操作vim与shell交互其它操作退出vim一般操作vim可视模式vim替换模式vim简单配置配置文件位置:常用配置选项,用来测试(可以在vim底行模式使用):使用插件gcc/g++
开源的H5即时聊天系统 spring-boot + netty + protobuf + vue ~
lmxdawn
黎明晓 spring-boot vue netty websocket protobuf
前言一篇文章引发的思考?一次读公号推文,发现一篇文章写得特好,勾起了好奇心《群聊比单聊,为什么复杂这么多?》,@沈大大.GitHub地址him-vue前往him-netty前往心路历程第一阶段,刚看完文章时,特别兴奋,开始着手,花了一个月把聊天界面基本弄,然后着手于后端,经过些简单的调研,决定用netty搭建一个,后面发现里面的复杂逻辑,再加上心中的火似乎已经熄灭,最后…第二阶段,最近刷公文时又刷
CS架构和BS架构的区别(通俗易懂)
九块六
CS架构 BS架构 服务器 运维
目录一、CS架构1.1.优点:1.2.缺点二、BS架构2.1.优点2.2.缺点三、区别3.1.开发成本3.2.客户端负载3.3.安全性3.4.作用范围CS:Client/Server(客户端/服务器)结构,使用之前需要用户下载安装客户端的操作界面例如:腾讯视频、QQ、微信社交工具、WPS、向日葵、Navicat工具、idea、Xshell等BS:Browser/Server(浏览器/服务器)结构,
键盘启用触摸板-tips
Administrator_ABC
电脑 windows
在日常使用笔记本电脑时,我们会遇到没带鼠标,触摸板关闭的情况,通常情况下,我们习惯通过鼠标点击或触摸屏操作来启用触摸板,但其实通过键盘也能轻松实现这一功能。以下就是一种通过键盘操作启用触摸板的方法,希望能为大家提供一些便利。一、准备工作确保你的笔记本电脑已经连接了键盘(内置键盘或外接键盘),均可并且系统处于正常运行状态。(可以开机进入桌面)二、操作步骤同时按下“Windows徽标键+i”键打开设置
TaskBuilder主界面介绍
Nodejs_home
java python
TaskBuilder主界面介绍TaskBuilder的主界面分为如下图所示的7个区域:这7个区域的作用简要介绍如下:2、服务器设置:在此查看和设置任擎服务器的信息。应用系统的代码都是保存在任擎服务器上的,TaskBuilder必须连接任擎服务器才能进行相关操作,且同一时间只能连接一个任擎服务器,默认连接服务器列表中的第一个服务器,可以打开服务器列表选择其他服务器进行切换,切换服务器后,区域4内的
Qt - 模型视图
aoaoGofei
qt qt 数据库 oracle
模型/视图概念模型/视图结构将数据存储和界面展示分离,分别用不同的类实现模型:存储数据视图:界面上的视图组件显示模型中的数据;在视图组件里修改的数据会被自动保存在模型中源数据内存中的一个字符串列表磁盘文件系统结构数据库的一个数据表sql查询结果视图(视图组件)视图从模型获得数据然后将其显示在界面上QListViewQTreeViewQTableView模型(数据模型)模型与源数据通信,并为视图自检
PyQt入门学习:深入理解Model/View架构中的视图Item Views父类
代码飞翔
pyqt 学习 Python
PyQt入门学习:深入理解Model/View架构中的视图ItemViews父类在PyQt中,Model/View架构是一种常用的模式,用于处理数据与界面的分离。其中,视图(View)负责显示数据,并通过ItemViews父类提供了许多方便的功能和方法。本文将详细介绍ItemViews父类的使用,并提供相应的源代码示例。在开始之前,请确保已经安装了PyQt库。可以使用以下命令进行安装:pipins
deepseek-r1系列模型私有化部署分别需要的最低硬件配置
Sophie'sCookingLab
大模型 deepseek
DeepSeek-R1系列模型部署所需的最低硬件配置如下:DeepSeek-R1-1.5BCPU:最低4核(推荐多核处理器)内存:8GB+硬盘:3GB+存储空间(模型文件约1.5-2GB)显卡:非必需(纯CPU推理),若GPU加速可选4GB+显存(如GTX1650)适用场景:低资源设备部署(如树莓派、旧款笔记本)、实时文本生成(聊天机器人、简单问答)、嵌入式系统或物联网
关于Linux中使用USE(使用率/饱和度/错误)方法分析系统性能的一些笔记
山河已无恙
Linux 性能调优 linux 服务器 运维 USE
写在前面今天和小伙伴们分享通过USE方法对系统进行性能分析和性能调整博文内容涉及:什么是USE方法,以及USE的使用建议具体的USE指标采集分析食用方式:需要Linux基础知识理解不足小伙伴帮忙指正傍晚时分,你坐在屋檐下,看着天慢慢地黑下去,心里寂寞而凄凉,感到自己的生命被剥夺了。当时我是个年轻人,但我害怕这样生活下去,衰老下去。在我看来,这是比死亡更可怕的事。--------王小波如果说希望通过
多模态论文笔记——DiT(Diffusion Transformer)
好评笔记
多模态论文笔记 深度学习 transformer DiT 人工智能 机器学习 aigc stable diffusion
大家好,这里是好评笔记,公主号:Goodnote,专栏文章私信限时Free。本文详细介绍Transformer架构图像生成方面的应用,将Diffusion和Transformer结合起来的模型:DiT。目前DiT已经成为了AIGC时代的新宠儿,视频和图像生成不可缺少的一部分。文章目录论文定义架构与传统(U-Net)扩散模型区别架构噪声调度策略与传统扩散的相同输入图像/条件信息的Patch化(Pat
Transformer解析——(五)代码解析及拓展
cufewxy2018
深度学习 transformer 深度学习 人工智能
本系列已完结,全部文章地址为:Transformer解析——(一)概述-CSDN博客Transformer解析——(二)Attention注意力机制-CSDN博客Transformer解析——(三)Encoder-CSDN博客Transformer解析——(四)Decoder-CSDN博客Transformer解析——(五)代码解析及拓展-CSDN博客1代码解析代码参考了基于Tensorflow实
【网络教程】如何获取阿里云盘的refresh_token
xiaoqiangclub
网络教程 阿里云盘 refresh_token
文章目录介绍演示环境refresh_token获取阿里云盘的refresh_token⚓️相关链接⚓️介绍很多阿里云盘的第三方软件/程序要求我们填写阿里云盘的refresh_token,今天就一步一步叫大家如何正确的获取阿里云盘的refresh_token。演示环境本文演示环境如下:操作系统:Windows11浏览器:Edge阿里云盘:云盘注意:本文内容为个人笔记,仅供参考。附:读者须知refre
Nginx 负载均衡与权重配置解析
码农研究僧
配置 nginx 负载均衡 运维
目录前言1.权重分析2.负载均衡3.实战前言对于Nginx的讲解,更多推荐阅读:Nginx配置静态网页访问(图文界面)Nginx将https重定向为http进行访问的配置(附Demo)Nginx从入门到精通(全)详细分析Nginx配置参数(附Demo)在Nginx配置文件中,upstream指令用于定义一组后端服务器,将被用作负载均衡的目标提到的“权重”部分是与负载均衡相关的设置,通过权重来控制每
uni-app、uview开发时的三种富文本渲染方案
柠檬树^-^
uni-app
1.使用vue语法的v-html 富文本富文本富文本`">-->2.使用小程序标签rich-text富文本富文本富文本`" >-->3.使用uview内置的u-parse组件该组件一般用于富文本解析场景,比如解析文章内容,商品详情,带原生HTML标签的各类字符串等,此组件和uni-app官方的rich-text组件功能有重合之处,但是也有不同的地方相同点:二者都能解析HTML字符串不同点:对于轻量
React前端框架详解
小俊学长
react.js 前端框架 前端
React前端框架详解React是一个用于构建用户界面的JavaScript库,由Facebook开发并维护。自2013年发布以来,React凭借其独特的优势,在前端开发领域迅速崛起,成为最受欢迎的前端框架之一。本文将从React的基本概念、核心特性、应用场景、优缺点以及学习建议等多个方面,对React前端框架进行详细阐述。一、React的基本概念React是一个专注于构建用户界面的JavaScr
React前端框架基础知识详解
大梦百万秋
知识学爆 前端框架 react.js 前端
React是由Facebook推出的一个用于构建用户界面的JavaScript库,现已成为前端开发中最流行的框架之一。React的核心理念是通过组件化的方式构建用户界面,提升代码的可维护性和复用性。本文将为大家详细介绍React框架的基础知识,并带你快速入门。1.React是什么?React是一个用于构建UI界面的库,它通过组件的方式将用户界面拆分为可独立维护的小部分。它专注于视图层(View),
React 前端框架介绍
Earth explosion
前端框架
什么是React?React是一个由Facebook开发并维护的开源JavaScript库,用于构建用户界面。它主要用于创建交互式用户界Face(UI),尤其是当数据变化时需要更新部分视图时非常有效。React的核心思想是组件化和声明性编程,这使得开发者可以轻松地创建、组合和重用代码。React的主要特点组件化设计:React鼓励使用组件化设计。每个组件是一个独立的模块,可以单独开发、测试和调试。
Ubuntu下的守护进程的编写
zeal_fish
ubuntu ubuntu 操作系统 终端 守护进程
守护进程(Daemon)及特性在linux或者unix操作系统中在系统的引导的时候会开启很多服务,这些服务就叫做守护进程。守护进程是脱离于终端并且在后台运行,周期性的执行某种任务或者等待处理某些发生的事件进程。守护进程脱离于终端是为了避免进程在执行过程中的信息在任何终端上显示并且进程也不会被任何终端所产生的终端信息所打断。由于在Linux中,每一个系统与用户进行交流的界面称为终端,每一个从此终端开
Ubuntu24.04部署OBS Studio笔记
wisetoro
笔记
1.安装OBSStudio2.安装droidCam客户端https://files.dev47apps.net/linux/droidcam_latest.zip./install-client3.安装网络摄像头(V4L2Loopback)和音频(可选)sudoaptinstalllinux-headers-`uname-r`gccmake#基于Debian/Ubuntu和RHEL(Fedora/
文献阅读(part2)--Towards K-means-friendly spaces Simultaneous deep learning and clustering
GUI Research Group
机器学习 python 深度聚类
学习笔记,仅供参考文章目录AbstractIntroductionBackgroundandRelatedWorksProposedFormulationOptimizationProcedureInitializationviaLayer-wisePre-Training(通过分层预训练进行初始化)AlternatingStochasticOptimizationExperiments合成数据演
笔记-Ubuntu本地镜像源配置
丶花落谁家
笔记 ubuntu apt
背景需要内网部署JitsiMeet,不用docker,用离线包进行安装,由于安装包需要的依赖比较多,因此需要在本地进行镜像源配置,保证依赖的正确安装。操作1、先在外网拿到安装包cd/var/cache/apt/archives2、复制至内网将所有deb复制至内网根目录下mkdir/ak/downloadchmod777-R/ak/download/3、依赖打包dpkg-scanpackages/a
Pytest测试用例中的mark用法(包含代码示例与使用场景详解)
测试界媛姐
技术分享 自动化测试 软件测试 pytest 测试用例
在软件开发中,测试是确保代码质量和功能稳定性的重要环节。Python作为一门流行的编程语言,拥有丰富的测试工具和框架,其中pytest是其中之一。pytest提供了丰富的功能来简化测试用例的编写,其中的mark功能允许我们对测试用例进行标记和分组,以便于选择性运行和管理。本文将深入探讨pytest中mark的用法,包括基本用法、常用用法和实际应用场景,并通过代码示例进行详细解析。一、基本用法1.安
桌面上有多个球在同时运动,怎么实现球之间不交叉,即碰撞?
换个号韩国红果果
html 小球碰撞
稍微想了一下,然后解决了很多bug,最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后,遍历整个在dom树中的其他小球,看一下它们与当前小球的距离是否小于球半径的两倍?若小于说明下一次绘制该小球(设为a)前要把他的方向变为原来相反方向(与a要碰撞的小球设为b),即假如当前小球的距离小于球半径的两倍的话,马上改变当前小球方向。那么下一次绘制也是先绘制b,再绘制a,由于a的方向已经改变
《高性能HTML5》读后整理的Web性能优化内容
白糖_
html5
读后感
先说说《高性能HTML5》这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲,再去分析性能优化的内容,这样才会有吸引力。因为只是在线试读,没有机会看后面的内容,所以不胡乱评价了。
[JShop]Spring MVC的RequestContextHolder使用误区
dinguangx
jeeshop 商城系统 jshop 电商系统
在spring mvc中,为了随时都能取到当前请求的request对象,可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量,如request, response等。 在jshop中,对RequestContextHolder的
算法之时间复杂度
周凡杨
java 算法 时间复杂度 效率
在
计算机科学 中,
算法 的时间复杂度是一个
函数 ,它定量描述了该算法的运行时间。这是一个关于代表算法输入值的
字符串 的长度的函数。时间复杂度常用
大O符号 表述,不包括这个函数的低阶项和首项系数。使用这种方式时,时间复杂度可被称为是
渐近 的,它考察当输入值大小趋近无穷时的情况。
这样用大写O()来体现算法时间复杂度的记法,
Java事务处理
g21121
java
一、什么是Java事务 通常的观念认为,事务仅与数据库相关。 事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性(atomicity)、一致性(consistency)、隔离性(isolation)和持久性(durability)的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时,所有被该事务影响的数据都应该恢复到事务执行前的状
Linux awk命令详解
510888780
linux
一. AWK 说明
awk是一种编程语言,用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件,或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能,是linux/unix下的一个强大编程工具。它在命令行中使用,但更多是作为脚本来使用。
awk的处理文本和数据的方式:它逐行扫描文件,从第一行到
android permission
布衣凌宇
Permission
<uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中,改值可以修改上传
<uses-permission android:na
Oracle和谷歌Java Android官司将推迟
aijuans
java oracle
北京时间 10 月 7 日,据国外媒体报道,Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行,这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测,谷歌 Oracle 案很可能会被推迟。 该案中的第二波辩护被安排在 10 月 17 日出庭,从目前看来
linux shell 常用命令
antlove
linux shell command
grep [options] [regex] [files]
/var/root # grep -n "o" *
hello.c:1:/* This C source can be compiled with:
Java解析XML配置数据库连接(DOM技术连接 SAX技术连接)
百合不是茶
sax技术 Java解析xml文档 dom技术 XML配置数据库连接
XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔 所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习
XML配置数据库的连接主要技术点的博客;
JDBC编程 : JDBC连接数据库
DOM解析XML: DOM解析XML文件
SA
underscore.js 学习(二)
bijian1013
JavaScript underscore
Array Functions 所有数组函数对参数对象一样适用。1.first _.first(array, [n]) 别名: head, take 返回array的第一个元素,设置了参数n,就
plSql介绍
bijian1013
oracle 数据库 plsql
/*
* PL/SQL 程序设计学习笔记
* 学习plSql介绍.pdf
* 时间:2010-10-05
*/
--创建DEPT表
create table DEPT
(
DEPTNO NUMBER(10),
DNAME NVARCHAR2(255),
LOC NVARCHAR2(255)
)
delete dept;
select
【Nginx一】Nginx安装与总体介绍
bit1129
nginx
启动、停止、重新加载Nginx
nginx 启动Nginx服务器,不需要任何参数u
nginx -s stop 快速(强制)关系Nginx服务器
nginx -s quit 优雅的关闭Nginx服务器
nginx -s reload 重新加载Nginx服务器的配置文件
nginx -s reopen 重新打开Nginx日志文件
spring mvc开发中浏览器兼容的奇怪问题
bitray
jquery Ajax springMVC 浏览器 上传文件
最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件.
在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer
Lua的io库函数列表
ronin47
lua io
1、io表调用方式:使用io表,io.open将返回指定文件的描述,并且所有的操作将围绕这个文件描述
io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr
2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄
多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil
java-26-左旋转字符串
bylijinnan
java
public class LeftRotateString {
/**
* Q 26 左旋转字符串
* 题目:定义字符串的左旋转操作:把字符串前面的若干个字符移动到字符串的尾部。
* 如把字符串abcdef左旋转2位得到字符串cdefab。
* 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n),辅助内存为O(1)。
*/
pu
《vi中的替换艺术》-linux命令五分钟系列之十一
cfyme
linux命令
vi方面的内容不知道分类到哪里好,就放到《Linux命令五分钟系列》里吧!
今天编程,关于栈的一个小例子,其间我需要把”S.”替换为”S->”(替换不包括双引号)。
其实这个不难,不过我觉得应该总结一下vi里的替换技术了,以备以后查阅。
1
所有替换方案都要在冒号“:”状态下书写。
2
如果想将abc替换为xyz,那么就这样
:s/abc/xyz/
不过要特别
[轨道与计算]新的并行计算架构
comsci
并行计算
我在进行流程引擎循环反馈试验的过程中,发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段,而整个流程中又充满着很多并行路由,每个并行路由中又包含着一些并行节点,那么当整个流程图开始循环反馈过程的时候,这个流程图的运行过程是否变成一个并行计算的架构呢?
重复执行某段代码
dai_lm
android
用handler就可以了
private Handler handler = new Handler();
private Runnable runnable = new Runnable() {
public void run() {
update();
handler.postDelayed(this, 5000);
}
};
开始计时
h
Java实现堆栈(list实现)
datageek
数据结构——堆栈
public interface IStack<T> {
//元素出栈,并返回出栈元素
public T pop();
//元素入栈
public void push(T element);
//获取栈顶元素
public T peek();
//判断栈是否为空
public boolean isEmpty
四大备份MySql数据库方法及可能遇到的问题
dcj3sjt126com
DB backup
一:通过备份王等软件进行备份前台进不去?
用备份王等软件进行备份是大多老站长的选择,这种方法方便快捷,只要上传备份软件到空间一步步操作就可以,但是许多刚接触备份王软件的客用户来说还原后会出现一个问题:因为新老空间数据库用户名和密码不统一,网站文件打包过来后因没有修改连接文件,还原数据库是好了,可是前台会提示数据库连接错误,网站从而出现打不开的情况。
解决方法:学会修改网站配置文件,大多是由co
github做webhooks:[1]钩子触发是否成功测试
dcj3sjt126com
github git webhook
转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html
github和svn一样有钩子的功能,而且更加强大。例如我做的是最常见的push操作触发的钩子操作,则每次更新之后的钩子操作记录都会在github的控制板可以看到!
工具/原料
github
方法/步骤
">的作用" target="_blank">JSP中 的作用
蕃薯耀
JSP中<base href="<%=basePath%>">的作用
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
linux下SAMBA服务安装与配置
hanqunfeng
linux
局域网使用的文件共享服务。
一.安装包:
rpm -qa | grep samba
samba-3.6.9-151.el6.x86_64
samba-common-3.6.9-151.el6.x86_64
samba-winbind-3.6.9-151.el6.x86_64
samba-client-3.6.9-151.el6.x86_64
samba-winbind-clients
guava cache
IXHONG
cache
缓存,在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说,cache 就是为了提升系统性能而开辟的一块内存空间。
缓存的主要作用是暂时在内存中保存业务系统的数据处理结果,并且等待下次访问使用。在日常开发的很多场合,由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时,当我们发现我们的系统这个数据请求量很大的时候,频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的
Query的开始--全局变量,noconflict和兼容各种js的初始化方法
kvhur
JavaScript jquery css
这个是整个jQuery代码的开始,里面包含了对不同环境的js进行的处理,例如普通环境,Nodejs,和requiredJs的处理方法。 还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解 完整资源:
http://www.gbtags.com/gb/share/5640.htm jQuery 源码:
(
美国人的福利和中国人的储蓄
nannan408
今天看了篇文章,震动很大,说的是美国的福利。
美国医院的无偿入院真的是个好措施。小小的改善,对于社会是大大的信心。小孩,税费等,政府不收反补,真的体现了人文主义。
美国这么高的社会保障会不会使人变懒?答案是否定的。正因为政府解决了后顾之忧,人们才得以倾尽精力去做一些有创造力,更造福社会的事情,这竟成了美国社会思想、人
N阶行列式计算(JAVA)
qiuwanchi
N阶行列式计算
package gaodai;
import java.util.List;
/**
* N阶行列式计算
* @author 邱万迟
*
*/
public class DeterminantCalculation {
public DeterminantCalculation(List<List<Double>> determina
C语言算法之打渔晒网问题
qiufeihu
c 算法
如果一个渔夫从2011年1月1日开始每三天打一次渔,两天晒一次网,编程实现当输入2011年1月1日以后任意一天,输出该渔夫是在打渔还是在晒网。
代码如下:
#include <stdio.h>
int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/
{
if((a%4 == 0 && a%100 != 0
XML中DOCTYPE字段的解析
wyzuomumu
xml
DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL.
私有DTD
<!DOCTYPErootSYST