(CSS2) compact
分配对象为块对象或基于内容之上的内联对象(CSS3) run-in
分配对象为块对象或基于内容之上的内联对象(CSS3) ruby
将对象作为表格脚注组显示(CSS3) ruby-base
将对象作为表格脚注组显示(CSS3) ruby-text
将对象作为表格脚注组显示(CSS3) ruby-base-group
将对象作为表格脚注组显示(CSS3) ruby-text-group
将对象作为表格脚注组显示(CSS3) box将对象作为弹性盒模型显示(CSS3)-webkit-box;-moz-box;-o-box;-ms-box;inline-box将对象作为内联块级弹性盒模型显示(CSS3)
clip:rect(0 auto 35px 10px) 上边不剪切,右边不剪切,下边从第35个像素开始剪切直至最底部,左边剪10
overflow:visible 不剪切内容 hidden
将超出对象尺寸的内容进行裁剪,将不出现滚动条。 scroll
将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。 auto
在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。
第三节:弹性盒模型(box-orient子元素排列方式、box-pack子元素对齐方式、box-align子元素对齐方式、box-flex子元素如何分配剩余盒子的剩余空间、box-flex-group子元素的所属组、box-ordinal-group子元素的显示顺序、box-direction子元素顺序是否相反、box-lines子元素是否可以换行显示)要使其生效需给父级元素display为box或者是inline-box;注意浏览器
box-orient 定义盒子内部元素的方向排列方式 horizontal
(水平线上从左到右) vertical
(垂直线上从上到下) inline-axis
(水平编排)、block-axis
(垂直编排)、inherit
(继承父级元素)
box-pack:start 设置弹性盒模型对象的子元素从开始位置对齐(大部分情况等同于左对齐) center
设置弹性盒模型对象的子元素居中对齐 end
设置弹性盒模型对象的子元素从结束位置对齐(大部分情况等同于右对齐) justify
设置或弹性盒模型对象的子元素两端对齐
box-align:start 设置弹性盒模型对象的子元素从开始位置对齐 center
设置弹性盒模型对象的子元素居中对齐 end
设置弹性盒模型对象的子元素从结束位置对齐 baseline
设置弹性盒模型对象的子元素基线对齐 stretch
设置弹性盒模型对象的子元素自适应父元素尺寸
box-flex:0让子元素按照父元素的宽度划分 将一个容器分成6份,子对象a分1份,b分2份,c分3份(动态的分配剩余空间)
box-flex-group:1 动态的给数字较大的组分配其内容所需的实际空间(如无内容、paddin、border则不占空间),剩余空间则均分给数字最小的那个组(可能有1个或多个元素)
box-ordinal-group:1 调整三个栏目的先后顺序,数字越大越靠后, 数值较低的元素显示在数值较高元素的前面,相同数值的元素,它们的显示顺序取决于它们的代码顺序
box-direction:normal 确定内部元素的排列顺序 normal、reverse(翻转)、inherit 设置弹性盒模型对象的子元素按正常顺序排列 reverse
反转弹性盒模型对象的子元素的排列顺序
box-lines:single 弹性盒模型对象的子元素只在一行内显示 multiple
弹性盒模型对象的子元素超出父元素的空间时换行显示
第四节:尺寸(width、min-width、max-width、height、min-height、max-height) 第五节:外补白(margin、margin-top、margin-right、margin-bottom、margin-left) 第六节:内补白(padding、padding-top、padding-right、padding-bottom、padding-left) 第七节:边框(border、border-width、border-style、border-color、border-top、border-top-width、border-top-style、border-top-color、border-right、border-right-width、border-right-style、border-right-color、border-bottom、border-bottom-width、border-bottom-style、border-bottom-color、border-left、border-left-width、border-left-style、border-left-color、
border-image、border-radius、border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius、box-shadow阴影、box-reflect倒影 )
border-image:border-image-sourceborder-image-slice / border-image-width / border-image-outset / border-image-repeat
none:无背景图片。
使用绝对或相对地址指定图像。
用浮点数指定宽度。不允许负值。
用百分比指定宽度。不允许负值。
用长度值指定宽度。不允许负值。 stretch:指定用拉伸方式来填充边框背景图。 repeat:指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。 round:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
border-image:url(skin/border.png) 27/27px;
box-shadow none:无阴影 ①
第1个长度值用来设置对象的阴影水平偏移值。可以为负值 ②
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 ③
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 ④
如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
设置对象的阴影的颜色。 inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影 box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);
box-reflect:none | | | ` = above | below | left | right
= |
= none | | | | |
默认值:none无倒影 `box-reflect:below 0 linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
第八节:背景(background、background-color、
background-image、background-repeat、background-attachment背景图片是滚动还是固定、background-position、background-origin、background-clip、background-size、multiple-background混合属性 )
background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);渐变背景`background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));渐变背景
background-image:-o-linear-gradient(top , #45B5DA, #0382AD);渐变背景
background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);多重背景
background:linear-gradient(top,#000,#999)。从上到下、从黑色到灰色水平方向渐变
background:linear-gradient(left,#000,#999)。起始于左边、从黑色到灰色垂直方向渐变
background:linear-gradient(left,30deg,#000,#999)。起始于左边,倾斜30度、从黑色到灰色水平渐变
`background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
第九节:颜色(color、opacity) 第十节:字体(font、font-style、font-weight、font-size、font-family、font-stretch) 第十一节:文本(text-indent、text-overflow、text-align、text-transform、text-decration、text-decoration-line、text-decoration-color、text-decoration-style、text-shadow、text-fill-color、text-stroke、text-stroke-width、text-stroke-color、letter-spacing、word-spacing、vertical-align、word-wrap、white-space、direction、unicode-bidi、line-height、tab-size)
text-overflow clip:当对象内文本溢出时不显示省略标记(…),而是将溢出的部分裁切掉。 ellipsis:当对象内文本溢出时显示省略标记(…)。
text-transform none:无转换 capitalize:将每个单词的第一个字母转换成大写 uppercase:转换成大写 lowercase:转换成小写 full-width: full-size-kana:
white-space normal:默认处理方式。 pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象 nowrap:强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。 pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。 pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。
direction ltr:文本流从左到右。 rtl:文本流从右到左
unicode-bidi normal:对象不打开附加的嵌入层,对于内联要素,隐式重排序跨对象边界进行工作。 embed:对象打开附加的嵌入层,direction属性的值指定嵌入层,在对象内部进行隐式重排序。
bidi-override 严格按照direction属性的值重排序。忽略隐式双向运算规则。 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用 假如您想应用direction属性于内联元素的文本,您必须设定unicode-bidi属性为embed或bidi-override。
第十二节:列表(list-style、list-style-image、list-style-position、list-style-type)
list-style-type disc:实心圆(CSS1) circle:空心圆(CSS1) square:实心方块(CSS1) decimal:阿拉伯数字(CSS1) lower-roman:小写罗马数字(CSS1) upper-roman:大写罗马数字(CSS1) lower-alpha:小写英文字母(CSS1) upper-alpha:大写英文字母(CSS1) none:不使用项目符号(CSS1) armenian:传统的亚美尼亚数字(CSS2) cjk-ideographic:浅白的表意数字(CSS2) georgian:传统的乔治数字(CSS2) lower-greek:基本的希腊小写字母(CSS2) hebrew:传统的希伯莱数字(CSS2) hiragana:日文平假名字符(CSS2) hiragana-iroha:日文平假名序号(CSS2) katakana:日文片假名字符(CSS2) katakana-iroha:日文片假名序号(CSS2) lower-latin:小写拉丁字母(CSS2) upper-latin:大写拉丁字母(CSS2)
第十三节:表格(table-layout、border-collapse、border-spacing、caption-side、empty-cells) 第十四节:内容(content、counter-increment、counter-reset、quotes)
content normal:默认值。表现与none值相同 none:不生成任何值。
插入标签属性值 .attr p:after{content:attr(title);}
使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源) .url p:before{content:url(…/…/skin/ico.png);}
插入字符串 counter(name):使用已命名的计数器 .counter1 li:before{content:counter(testname);} counter(name,list-style-type):使用已命名的计数器并遵从指定的list-style-type属性 .counter2 li:before{content:counter(testname2,lower-roman);} counters(name,string):使用所有已命名的计数器 .counter3 li{counter-increment:testname3;} .counter3 li:before{content:counter(testname3,decimal)".";} counters(name,string,list-style-type):使用所有已命名的计数器并遵从指定的list-style-type属性 no-close-quote:并不插入quotes属性的后标记。但增加其嵌套级别 .counter3 li li:before{content:counter(testname3,decimal)".“counter(testname4,decimal)”.";} no-open-quote:并不插入quotes属性的前标记。但减少其嵌套级别 close-quote:插入quotes属性的后标记 open-quote:插入quotes属性的前标记 counter-increment:none |[ ]
第十五节:用户user interface(outline、outline-width、outline-style、outline-color、outline-offset、nav-index、nav-up、nav-right、nav-down、nav-left、cursor、zoom、box-sizing、resize、ime-mode)
outline
定义元素周围轮廓线,类似于border outline-width :指定轮廓边框的宽度。 outline-style :指定轮廓边框的样式。 outline-color :指定轮廓边框的颜色。 outline:2px solid #f00;border:3px solid #333;
outline-width
用长度值来定义轮廓的厚度。不允许负值 medium:定义默认宽度的轮廓。 thin:定义比默认宽度细的轮廓。 thick:定义比默认宽度粗的轮廓。
outline-style none:无轮廓。与任何指定的outline-width值无关 dotted:点状轮廓。 dashed:虚线轮廓。 solid:实线轮廓 double:双线轮廓。两条单线与其间隔的和等于指定的outline-width值 groove:3D凹槽轮廓。 ridge:3D凸槽轮廓。 inset:3D凹边轮廓。 outset:3D凸边轮廓。 outline-offset:4px;
cursor
[ [ ] [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]
resize none:不允许用户调整元素大小。 both:用户可以调节元素的宽度和高度。 horizontal:用户可以调节元素的宽度 vertical:用户可以调节元素的高度。 none:不允许用户调整元素大小。 both:用户可以调节元素的宽度和高度。 horizontal:用户可以调节元素的宽度 vertical:用户可以调节元素的高度。
第十六节:多栏multi-column(columns、column-width、column-count、column-gap、column-rule、column-rule-style、column-rule-color、column-span、column-fill、column-break-before、column-break-after、column-break-inside)
columns:200px 3;
第十七节:2D变换(transform、transform-origin)
translate
移动。translate(X(距离left位置),Y(距离top位置))。以坐标轴原点为中心进行位移,正值向右下角移动。 1旋转。transfrom:rotate(10deg)。平面旋转多少度 2斜拉。skew(X,Y)。倾斜多少度 3缩放。scale(X,Y)。放大或缩小多少倍 4移动。translate(X,Y)
transfrom:rotate(30deg)。 transfrom:scale(X,Y)。 transfrom:skew(X,Y)。 transfrom:translate(X,Y)。 1234
所有2D转换方法连在一起就是matrix()
。矩形方式进行变换matrix();
改变起点位置:transfrom-origin:bottom left
eg:transfrom:scale(1.5)。 对应的matrix是 transfrom:matrix(1.5,0,0,1.5,0,0); matrix(scaleX,0,0,scaleY,0,0) 1234
深究矩阵 matrix
ax+cy+e 为水平坐标。bx+dy+f 为垂直坐标。
transfrom:matrix(1 , 0 , 0 ,1 , 30 ,30)//a=1,b=0,c=0,d=1,e=30,f=30。 假设中心坐标为(0 ,0) x坐标为 ax+cy+e = 1_0 + 0_0 +30 = 30。 y坐标为 bx+dy+f = 0_0 + 1_0 + 30 = 30。 中心坐标变为了(30 ,30) 向右下角偏移,transfrom:translate(30px, 30px) 所以matrix只用关心最后两个参数就可以了 缩放:transfrom:matrix(1 , 0 , 0 ,1 , 30 ,30)当中的1是缩放的参数,所以写为transfrom:matrix(scalex ,0, 0 ,scaley ,30 ,30)
第十八节:过渡
transition-property:过渡效果的css属性名称。none、all、indent transition-duration:过渡的时长。 transition-timing-function:过渡速度曲线。平缓还是先慢后快。 transition-delay:过渡延迟。
第十九节:动画(animation-timing-function)
animation-name:`动画名称。animation-delay:
动画延迟。animation-duration:
动画运动周期时长。animation-timing-function:
动画速度曲线。linear(速度一致)、ease(低速开始,然后加快,结束慢)、ease-in(低速开始)、ease-out(低速结束)、ease-in-out(低速开始和结束)、cubic-bezier(自己的值,从0到1)animation-iteration-count:
动画播放次数。0、infinite。animation-direction:
动画是否在下一个周期逆向播放。normal、alternate。animation-play-state:
动画是否正在运行或暂停。 `animation-fill-mode
简写:animation:name duration timing-function delay
@keyframes animationName{ from{ ...... } to{ ...... } } @keyframes animationName{ 0%{ ...... } 50%{ ...... } 100%{ ...... } }
你可能感兴趣的:(前端,css3)
day15|前端框架学习和算法
universe_01
前端 算法 笔记
T22括号生成先把所有情况都画出来,然后(在满足什么情况下)把不符合条件的删除。T78子集要画树状图,把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索:每个边都走完,再回溯应用:二叉树搜索,图搜索回溯算法=DFS+剪枝T200岛屿数量(非常经典BFS宽度把树状转化成队列形式,lambda匿名函数“一次性的小函数,没有名字”setup语法糖:让代码更简洁好写的语法ref创建:基本类型的
vue element 封装表单
影子信息
vue vue.js javascript 前端
背景:在前端系统开发中,系统页面涉及到的表单组件比较多,所以进行了简单的封装。封装的包括一些Form表单组件,如下:input输入框、select下拉框、等实现效果:理论知识:表单组件官方链接:点击跳转封装组件:封装组件的思路:不封装element组件,每一个input组件绑定一个form对象,例如官网。简单封装element组件,利用for循环生成form表单的每一项el-form-item。进
前端面试每日 3+1 —— 第39天
浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么?[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么?《论语》,曾子曰:“吾日三省吾身”(我每天多次反省自己)。前端面试每日3+1题,以面试题来驱动学习,每天进步一点!让努力成为一种习惯,让奋斗成为一种享受!欢迎在Iss
前端数据库:IndexedDB从基础到高级使用指南
文章目录前端数据库:IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例:构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录(三)
笙囧同学
java 前端 状态模式
核心功能设计用户管理系统用户管理是整个系统的基础,我设计了完整的用户生命周期管理:用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制:认
从零到一:打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
作者简介:笙囧同学,中科院计算机大模型方向硕士,全栈开发爱好者联系方式:
[email protected] 各大平台账号:笙囧同学座右铭:偷懒是人生进步的阶梯前言在AI技术飞速发展的今天,如何将前沿的大模型技术与实际应用相结合,一直是我们开发者关注的焦点。今天,笙囧同学将带大家从零开始,构建一个基于GigaChatAI的艺术创作平台,实现React前端+Django后端的完整全栈解决方案。这不仅仅是
14.tornado操作之应用Websocket协议实现聊天室功能
孤寒者
Tornado框架从入门到实战 websocket tornado 聊天室功能实现 python
目录:每篇前言:1.什么是WebSocket(1)定义(2)优点(3)和HTTP对比(4)适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket(1)准备一个聊天室的页面:第一步:编写视图:第二步:编写接口:(app.py中加入以下接口!)第三步:编写前端页面:测试接口——响应OK!(2)使用WebSocket:(3)聊天室的聊天功能的最终实现:第一步:战前准备第二
为什么学习Web前端一定要掌握JavaScript?
web前端学习指南
为什么学习Web前端一定要掌握JavaScript?在前端的世界里,没有什么是JavaScript实现不了的,关于JS有一句话:凡是可以用JavaScript来写的应用,最终都会用JavaScript,JavaScript可运行在所有主要平台的所有主流浏览器上,也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
小架构step系列25:错误码
秋千码途
架构 java
1概述一个系统中,可能产生各种各样的错误,对这些错误进行编码。当错误发生时,通过这个错误码就有可能快速判断是什么错误,不一定需要查看代码就可以进行处理,提高问题处理效率。有了统一的错误码,还可以标准化错误信息,方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理,开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上,使用看不懂这些信息体验很差,也暴露了堆栈信息有
Java朴实无华按天计划从入门到实战(强化速战版-66天)
岫珩
Java 后端 java 开发语言 学习 Java 时间安排 学习计划
致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战(强化速战版-66天)1.基础(18)1.1JavaSE核心(5天)1.2数据库与SQL(5天)1.3前端基础(8天)2.进阶(17天)2.1JavaWeb核心(5天)2.2Mybatis与Spring全家桶(6天)2.3中间件入门(4天)2.4实践项目(2天)3.高阶(1
《跨域资源共享CORS的深层逻辑与前端实践精要》
不同源头的资源交互已成为常态,而跨域资源共享(CORS)正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑,不仅能解决实际开发中的跨域难题,更能触及网络安全与资源流通的核心矛盾,为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生,源于网络安全与应用发展的必然冲突。浏览器的同源策略,作为早期网络安全的基石,通过限制不同源文档的交互,有效阻挡了
深入了解 Kubernetes(k8s):从概念到实践
目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代,Kubernetes(简称k8s)已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司,都在广泛采用k8s来管理和部署容器化应用。本文将带
大厂都在用的前端缓存策略,你掌握了吗?
AI架构全栈开发实战笔记
前端 缓存 ai
大厂都在用的前端缓存策略,你掌握了吗?关键词:前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要:本文将深入探讨前端开发中常用的缓存策略,从浏览器缓存到ServiceWorker,从HTTP缓存头到CDN缓存,全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例,帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
26. 什么是雪碧图,作用和原理了解吗
yqcoder
前端面试-CSS css 前端 html
总结小图合成一张,使用background来使用,减少资源请求一、什么是雪碧图?雪碧图(CSSSprite)是一种前端优化技术,指的是将多个小图标合并成一张大图,通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图,减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
H5UI微信小程序前端框架实战指南
ai
本文还有配套的精品资源,点击获取简介:H5UI是一个为微信小程序开发设计的前端框架,基于H5技术,提供简洁高效的组件库。框架集成了丰富的UI元素,如按钮、表格、导航栏等,简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤,开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
Ubuntu安装LAMP
L_h1
测试 ubuntu linux
在安装vim时遇到了一个问题:E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend),是否有其他进程正占用它?解决办法:强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
震惊!DOM变化监控神器MutationObserver,前端开发必知的隐藏武器!
coding随想
JavaScript 前端 javascript html5
一、什么是MutationObserver?如果你是一个前端开发者,一定会遇到这样的场景:页面动态加载内容后,某些操作失效了。比如,你写了一个监听按钮点击的代码,但按钮是通过AJAX动态加载的,你的代码根本无法触发。这个时候,你就需要一个“监控哨兵”——MutationObserver,它能实时监听DOM树的变化,帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
Coze Studio 架构拆解:AI Agent 开发平台项目结构全分析
代码简单说
2025开发必备(限时特惠) 架构 人工智能 Coze Studio 架构 AI Agent 开发平台 全栈 AI 工程化 图解架构
CozeStudio架构拆解:AIAgent开发平台项目结构全分析标签:CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中,我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目,代码整洁、架构先进,特别是它基于
关于前端的性能优化
性能优化主要涵盖了以下四个方面:(tip:仅代表个人总结,如有不当,还希望看到的大佬多多指示)减少网络请求:合并文件、使用CDN、启用缓存。优化资源加载:代码分割、懒加载、图片压缩。提升渲染性能:减少重绘回流、防抖节流、使用WebWorker。监控和迭代:定期使用工具检测性能,持续优化。一、网络层面优化减少HTTP请求合并文件:将多个CSS或JavaScript文件合并成一个,减少请求次数。使用C
linux网卡显示未知未托管,linux有线网络显示设备未托管
NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包,如果使用DHCP,NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器,NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager);一个前端管理
页面开发样式和布局入门:Vite + Vue 3 + Less
页面开发样式和布局入门:Vite+Vue3+Less引言在现代前端开发中,样式和布局是页面开发的核心部分。随着技术的不断发展,Vite、Vue3和Less等工具和框架的出现,使得前端开发变得更加高效和灵活。然而,尽管这些工具和框架提供了强大的功能,但在实际开发中仍然会遇到各种样式和布局的问题。本文将结合Vite、Vue3和Less,详细介绍在页面开发中常见的样式和布局问题,并提供解决方案和最佳实践
推客系统小程序机构版开发上线全攻略(2025年最新版)
vx_qutudy
推客小程序 推客系统开发 推客系统源码
一、开发前准备:筑牢基础,合规先行1.1注册与认证账号注册:登录微信公众平台注册小程序账号,选择“机构版”类型,获取唯一AppID。资质认证:基础资质:企业营业执照、法人身份证、对公账户信息。特殊资质:涉及支付功能:需办理《增值电信业务经营许可证》(ICP证)。涉及教育/医疗内容:需《互联网信息服务许可证》或相关行业资质。1.2技术选型:高效与扩展并重模块推荐方案前端框架微信原生框架(WXML+W
网络安全第14集
不灭锦鲤
web安全 安全
前言:小迪安全14集,这集重点内容:0、什么是js渗透测试?在javascript中也存在变量和函数,存在可控变量和函数就有可能存在在漏洞,js开发的web应用和php、java开发的区别是,js能看得到的源代码,php看不到,但是风险就是未授权访问、配置信息泄露(加密算法、key秘钥等),源代码看得到,存在更多的url泄露,从而可能会出现未授权访问,从url,前提:web应用可以采用前端语言或后
怎么判断一个DAPP是否真正去中心化
判断一个DAPP(去中心化应用)是否真正去中心化,需要从多个维度进行考察。以下是关键评估标准:1.区块链依赖程度✅真正去中心化:核心逻辑和数据处理完全依赖智能合约,运行在区块链上(如以太坊、Solana等)。❌伪去中心化:依赖中心化服务器处理关键数据或业务逻辑,仅前端去中心化。2.智能合约控制权✅去中心化:合约代码开源,无管理员密钥(adminkey)或可升级后门,治理由DAO(去中心化自治组织)
Web前端交互利用Python跟大模型操作
哥本哈士奇
前端 交互 python
Web前端交互利用Python跟大模型操作一个简单的演示,如何把大模型应用集成到自己的应用场景当中。这里的场景我们模拟的是在吃鸡游戏中,一个作战计划,是否符合老六的行为规范。吃鸡游戏已经风靡很多年,游戏里每个人的游戏风格都不一样,有喜欢钢枪的,有喜欢随机应变的,也有喜欢当老六苟分的。每种风格的游戏方式以及游戏里的行为都不同,所以这里将演示如何应用大模型,去判断一个人的游戏方式,是否符合一个老六的行
尚硅谷微服务尚医通前端npm报错
尚硅谷微服务尚医通前端npm报错血泪史我的版本的8.0.0,弹幕里说降级npm到6.多就能安装,经过许久挣扎还是各种报错,最后通过一下办法解决解决办法:不需要降低npm版本,办法如下这里需要使用到cnpm:1.导入下载好到的项目2.安装cnpm:npminstallcnpm-g3.安装node-sass:cnpminstallnode-sass4.继续安装:cnpminode-sass-D5.删除
Layui核心语法快速入门指南
bemyrunningdog
layui 前端 javascript 开发语言
Layui基本语法学习指南Layui是一个经典的模块化前端框架,以其轻量易用、组件丰富著称。以下是Layui的核心语法结构和使用方法:一、模块加载机制(核心基础)//标准模块加载语法layui.use(['module1','module2'],function(){//回调函数中获取模块varmod1=layui.module1;varmod2=layui.module2;//模块功能调用mod
前端基础知识Vue3系列 - 04(Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同)
开始之前CompositionAPI可以说是Vue3的最大特点,那么为什么要推出CompositionApi,解决了什么问题?通常使用Vue2开发的项目,普遍会存在以下问题:代码的可读性随着组件变大而变差每一种代码复用的方式,都存在缺点TypeScript支持有限以上通过使用CompositionApi都能迎刃而解正文一、OptionsApiOptionsAPI,即大家常说的选项API,即以vue
Vue 工程化开发入门
dawn191228
前端学习 vue.js 前端 javascript 前端框架
文章目录一、Vue工程化开发概述二、Vue脚手架三、项目运行流程四、组件化开发五、组件注册六、总结在当今的前端开发领域,Vue.js以其简洁、高效的特性受到了广泛的欢迎。Vue的工程化开发能够帮助我们更好地组织和管理项目,提高开发效率和代码质量。本文将带你了解Vue工程化开发入门知识,包括脚手架、项目运行流程、组件化以及组件注册。一、Vue工程化开发概述工程化开发是一种将软件开发过程规范化、标准化
Python,C++,go语言开发社会犯罪人群回归社会跟踪与辅助管理APP
Geeker-2025
python c++ golang
开发一款用于**社会犯罪人群回归社会跟踪与辅助管理**的App,结合Python、C++和Go语言的优势,可以实现高效的数据处理、实时的跟踪监控以及用户友好的前端界面。以下是一个详细的开发方案,涵盖技术选型、功能模块、开发步骤等内容。##技术选型###后端(Python+Go)-**编程语言**:-**Python**:用于数据处理、机器学习(如风险评估、行为预测)、脚本编写等。-**Go**:用
windows下源码安装golang
616050468
golang安装 golang环境 windows
系统: 64位win7, 开发环境:sublime text 2, go版本: 1.4.1
1. 安装前准备(gcc, gdb, git)
golang在64位系
redis批量删除带空格的key
bylijinnan
redis
redis批量删除的通常做法:
redis-cli keys "blacklist*" | xargs redis-cli del
上面的命令在key的前后没有空格时是可以的,但有空格就不行了:
$redis-cli keys "blacklist*"
1) "blacklist:12:
[email protected]
oracle正则表达式的用法
0624chenhong
oracle 正则表达式
方括号表达示
方括号表达式
描述
[[:alnum:]]
字母和数字混合的字符
[[:alpha:]]
字母字符
[[:cntrl:]]
控制字符
[[:digit:]]
数字字符
[[:graph:]]
图像字符
[[:lower:]]
小写字母字符
[[:print:]]
打印字符
[[:punct:]]
标点符号字符
[[:space:]]
2048源码(核心算法有,缺少几个anctionbar,以后补上)
不懂事的小屁孩
2048
2048游戏基本上有四部分组成,
1:主activity,包含游戏块的16个方格,上面统计分数的模块
2:底下的gridview,监听上下左右的滑动,进行事件处理,
3:每一个卡片,里面的内容很简单,只有一个text,记录显示的数字
4:Actionbar,是游戏用重新开始,设置等功能(这个在底下可以下载的代码里面还没有实现)
写代码的流程
1:设计游戏的布局,基本是两块,上面是分
jquery内部链式调用机理
换个号韩国红果果
JavaScript jquery
只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象(通过this 因为一旦一个函数称为一个对象方法的话那么在这个方法内部this(结合下面的setStyles)指向这个对象)
function create(type){
var element=document.createElement(type);
//this=element;
你订酒店时的每一次点击 背后都是NoSQL和云计算
蓝儿唯美
NoSQL
全球最大的在线旅游公司Expedia旗下的酒店预订公司,它运营着89个网站,跨越68个国家,三年前开始实验公有云,以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。
云端本身是用于驱动网站的部分小功能的,如搜索框的自动推荐功能,还能保证处理Hotels.com服务的季节性需求高峰整体储能。
Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
java笔记1
a-john
java
1,面向对象程序设计(Object-oriented Propramming,OOP):java就是一种面向对象程序设计。
2,对象:我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说,对象是某个类型的实例。比如狗是一个类型,哈士奇可以是狗的一个实例,也就是对象。
3,面向对象程序设计方式的特性:
3.1 万物皆为对象。
C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点(一)
aijuans
C/C++求职面试必备考点
找工作在即,以后决定每天至少写一个知识点,主要是记录,逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益,后学幸运之至也。如有错误,还希望大家帮忙指出来。感激不尽。
后学保证每个写出来的结果都是自己在电脑上亲自跑过的,咱人笨,以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
程序员写代码时就不要管需求了吗?
asia007
程序员不能一味跟需求走
编程也有2年了,刚开始不懂的什么都跟需求走,需求是怎样就用代码实现就行,也不管这个需求是否合理,是否为较好的用户体验。当然刚开始编程都会这样,但是如果有了2年以上的工作经验的程序员只知道一味写代码,而不在写的过程中思考一下这个需求是否合理,那么,我想这个程序员就只能一辈写敲敲代码了。
我的技术不是很好,但是就不代
Activity的四种启动模式
百合不是茶
android 栈模式启动 Activity的标准模式启动 栈顶模式启动 单例模式启动
android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;
启动模式xml中配置
<activity android:name=".MainActivity" android:launchMode="standard&quo
Spring中@Autowired标签与@Resource标签的区别
bijian1013
java spring @Resource @Autowired @Qualifier
Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource、 @PostConstruct及@PreDestroy。
1. @Autowired @Autowired是Spring 提供的,需导入 Package:org.springframewo
Changes Between SOAP 1.1 and SOAP 1.2
sunjing
Changes Enable SOAP 1.1 SOAP 1.2
JAX-WS
SOAP Version 1.2 Part 0: Primer (Second Edition)
SOAP Version 1.2 Part 1: Messaging Framework (Second Edition)
SOAP Version 1.2 Part 2: Adjuncts (Second Edition)
Which style of WSDL
【Hadoop二】Hadoop常用命令
bit1129
hadoop
以Hadoop运行Hadoop自带的wordcount为例,
hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop,需要说明的是,这些命令的使用必须在Hadoop已经运行的情况下才能执行
Hadoop HDFS相关命令
hadoop fs -ls
列出HDFS文件系统的第一级文件和第一级
java异常处理(初级)
白糖_
java DAO spring 虚拟机 Ajax
从学习到现在从事java开发一年多了,个人觉得对java只了解皮毛,很多东西都是用到再去慢慢学习,编程真的是一项艺术,要完成一段好的代码,需要懂得很多。
最近项目经理让我负责一个组件开发,框架都由自己搭建,最让我头疼的是异常处理,我看了一些网上的源码,发现他们对异常的处理不是很重视,研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码,通过他们对异常处理的解决方案,我终
记录整理-工作问题
braveCS
工作
1)那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。
2)今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题,以后要是写更大的文件还是得改内存。想问题要长远啊
org.apache.tools.zip实现文件的压缩和解压,支持中文
bylijinnan
apache
刚开始用java.util.Zip,发现不支持中文(网上有修改的方法,但比较麻烦)
后改用org.apache.tools.zip
org.apache.tools.zip的使用网上有更简单的例子
下面的程序根据实际需求,实现了压缩指定目录下指定文件的方法
import java.io.BufferedReader;
import java.io.BufferedWrit
读书笔记-4
chengxuyuancsdn
读书笔记
1、JSTL 核心标签库标签
2、避免SQL注入
3、字符串逆转方法
4、字符串比较compareTo
5、字符串替换replace
6、分拆字符串
1、JSTL 核心标签库标签共有13个,
学习资料:http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html
功能上分为4类:
(1)表达式控制标签:out
[物理与电子]半导体教材的一个小问题
comsci
问题
各种模拟电子和数字电子教材中都有这个词汇-空穴
书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴
我现在回过头翻大学时候的教材,觉得这个
Flashback Database --闪回数据库
daizj
oracle 闪回数据库
Flashback 技术是以Undo segment中的内容为基础的, 因此受限于UNDO_RETENTON参数。要使用flashback 的特性,必须启用自动撤销管理表空间。
在Oracle 10g中, Flash back家族分为以下成员: Flashback Database, Flashback Drop,Flashback Query(分Flashback Query,Flashbac
简单排序:插入排序
dieslrae
插入排序
public void insertSort(int[] array){
int temp;
for(int i=1;i<array.length;i++){
temp = array[i];
for(int k=i-1;k>=0;k--)
C语言学习六指针小示例、一维数组名含义,定义一个函数输出数组的内容
dcj3sjt126com
c
# include <stdio.h>
int main(void)
{
int * p; //等价于 int *p 也等价于 int* p;
int i = 5;
char ch = 'A';
//p = 5; //error
//p = &ch; //error
//p = ch; //error
p = &i; //
centos下php redis扩展的安装配置3种方法
dcj3sjt126com
redis
方法一
1.下载php redis扩展包 代码如下 复制代码
#wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz
2 tar -zxvf 解压压缩包,cd /扩展包 (进入扩展包然后 运行phpize 一下是我环境中phpize的目录,/usr/local/php/bin/phpize (一定要
线程池(Executors)
shuizhaosi888
线程池
在java类库中,任务执行的主要抽象不是Thread,而是Executor,将任务的提交过程和执行过程解耦
public interface Executor {
void execute(Runnable command);
}
public class RunMain implements Executor{
@Override
pub
openstack 快速安装笔记
haoningabc
openstack
前提是要配置好yum源
版本icehouse,操作系统redhat6.5
最简化安装,不要cinder和swift
三个节点
172 control节点keystone glance horizon
173 compute节点nova
173 network节点neutron
control
/etc/sysctl.conf
net.ipv4.ip_forward =
从c面向对象的实现理解c++的对象(二)
jimmee
C++ 面向对象 虚函数
1. 类就可以看作一个struct,类的方法,可以理解为通过函数指针的方式实现的,类对象分配内存时,只分配成员变量的,函数指针并不需要分配额外的内存保存地址。
2. c++中类的构造函数,就是进行内存分配(malloc),调用构造函数
3. c++中类的析构函数,就时回收内存(free)
4. c++是基于栈和全局数据分配内存的,如果是一个方法内创建的对象,就直接在栈上分配内存了。
专门在
如何让那个一个div可以拖动
lingfeng520240
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml
第10章 高级事件(中)
onestopweb
事件
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
计算两个经纬度之间的距离
roadrunners
计算 纬度 LBS 经度 距离
要解决这个问题的时候,到网上查了很多方案,最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。
/**
*
* @param longitudeA
* 经度A点
* @param latitudeA
* 纬度A点
* @param longitudeB
*
最具争议的10个Java话题
tomcat_oracle
java
1、Java8已经到来。什么!? Java8 支持lambda。哇哦,RIP Scala! 随着Java8 的发布,出现很多关于新发布的Java8是否有潜力干掉Scala的争论,最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围,但Java并非是函数式编程王位的真正觊觎者。
2、Java 9 即将到来
Oracle早在8月份就发布
zoj 3826 Hierarchical Notation(模拟)
阿尔萨斯
rar
题目链接:zoj 3826 Hierarchical Notation
题目大意:给定一些结构体,结构体有value值和key值,Q次询问,输出每个key值对应的value值。
解题思路:思路很简单,写个类词法的递归函数,每次将key值映射成一个hash值,用map映射每个key的value起始终止位置,预处理完了查询就很简单了。 这题是最后10分钟出的,因为没有考虑value为{}的情