(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;
columns:200px;
column-count:3;column-gap:40px;
第十七节: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
matrix()和matrix3d(),前者是2D的平面移动变换,33。后者是3D变换,4 4。 transfrom:matrix(a , b , c , d , e , f) 所对应的矩阵如下图 第一个与第一个相乘,第二个与第二个相乘,第三个与第三相乘 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 = 10 + 0 0 +30 = 30。 y坐标为 bx+dy+f = 00 + 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% {
...... }
}
你可能感兴趣的:(前端,css,css3)
node模块
weiweiweb888
前端 javascript bootstrap
模块系统模块化介绍传统开发的问题随着项目的扩大,然后代码就越来越庞大,如果没有很好的规划,后期维护非常复杂(甚至就维护不了)。比如:前端html中有很多特效会依赖js文件。比如:index.html:bootstrap以上就是一个依赖关系,bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大,我们的html页面也就随之增加,并且每一个html页面都会
Webpack | vite | Rollup | Gulp | Grunt 比较
前端阿彬
前端实用知识学习 webpack gulp 前端 vite 打包工具
前言模块化管理工具和自动化构建工具是不同的。两者主要体现在侧重点不一样。自动化构建工具侧重于前端开发的整个过程的控制管理(像是流水线)。而模块化管理工具更侧重于模块打包,当然我们可以把开发中的所有资源(图片、js文件、css文件等)都可以看成模块。Webpackwebpack可以说是当前最流行的模块化管理工具和打包工具。其通过loader的转换,可以将任何形式的资源视作模块。它还可以将各个模块通过
【网络安全】如何预防xss
不会代码的小徐
web安全 xss 安全
XSS(Cross-SiteScripting,跨站脚本攻击)是一种代码注入攻击。攻击者通过在目标网站注入恶意脚本,使其在用户浏览器中执行,从而窃取用户敏感信息如Cookie和SessionID。CSS在前端已经被用了,为了避免歧义用了XSS作为缩写。XSS的本质是恶意代码与网站正常代码混在一起,浏览器无法分辨它们的可信度,最终导致恶意代码被执行。XSS的危害浏览器无法区分恶意代码和正常代码,它们
java版本ERP管理系统源码 Spring Cloud alibaba Spring Boot MybatisPlus Redis VUE3 ElementUI 微服务
m0_66404702
java spring boot redis ERP管理系统源码
在当今数字化浪潮的推动下,企业对于高效、稳定且易于扩展的管理系统需求日益增长。为了满足这一需求,我们精心打造了一款基于Java技术的鸿鹄ERP(EnterpriseResourcePlanning)管理系统。该系统充分利用了SpringCloudAlibaba、SpringBoot、MybatisPlus、Redis等先进技术栈,并结合前端框架VUE3和ElementUI,构建了一个功能丰富、性能
CSS中inset属性详细讲解
OEC小胖胖
css 前端
CSS中的inset属性是一种用于定位和调整非static定位元素的缩略属性。它是四个单独属性的简写,这些属性是top、right、bottom和left。通过inset属性,可以同时设置这些属性的值,简化代码书写。1.属性语法inset属性的语法如下:/*单个值*/inset:|;/*两个值*/inset:||;/*三个值*/inset:|||;/*四个值*/inset:||||;①单个值当提供
前端安全-加密
姜慧慧
前端工程 安全 前端 https
1密码安全1.1泄露渠道数据库被盗服务器被入侵通讯被窃听内部人员泄露其他网站(撞库)1.2防御严禁明文存储单向变换变换复杂度要求密码复杂度要求加盐(防止拆解)1.3哈希算法明文-密文一一对应彩虹表记录明文密文一一对应表,容易破解两次md5加密也容易破解所以密码必须复杂加盐加盐可以使密码更加难破解加盐+字符串+密码雪崩效应-明文:明文小幅度变化,密文加剧变化密文:明文无法反推密文固定长度:md5sh
最新出炉的java后端学习路线
java进阶程序员xx
在写这个文章之前,我花了点时间,自己臆想了一个电商系统,基本上算是麻雀虽小五脏俱全,我今天就用它开刀,一步步剖析,我会讲一下我们可能会接触的技术栈可能不全,但是够用,最后给个学习路线。Tip:请多欣赏一会,每个点看一下,看看什么地方是你接触过的,什么技术栈是你不太熟悉的,我觉得还算是比较全的,有什么建议也可以留言给我。不知道大家都看了一下没,现在我们就要庖丁解牛了,我从上到下依次分析。前端你可能会
前端引入ffmepg 对视频画矩形贴图
全赣州最老实的男人guoy
前端 音视频 ffmpeg vue
业务场景:和后端联调中视频监控需要把人员位置框出,返回的后端只给视频和框选位置先上效果图成功给视频添加了两个框demo技术框架vue3+vite+typeScript引入ffmepgnpmi@ffmpeg/ffmpeg2.项目中引入import{createFFmpeg,fetchFile}from'@ffmpeg/ffmpeg/dist/ffmpeg.min.js'3.可能会出现的报错Share
python项目实战之基于深度学习的电影评论情感分析系统
什么任性
python 深度学习 开发语言 django flask html5 javascript
一、引言在信息爆炸的时代,用户生成的内容(UGC)如社交媒体、博客和论坛上的评论等,已经成为产品或服务口碑的重要来源。情感分析是一种自然语言处理(NLP)技术,用于识别和提取文本中的情感信息,从而理解大众对特定话题的态度。基于深度学习的电影评论情感分析系统能够自动分类评论的情感倾向,如正面、负面或中性,为电影制片人、营销人员和观众提供有价值的见解。二、技术栈和框架前端HTML/CSS:用于构建静态
python subprocess popen 多次重定向_python subprocess.Popen系列问题
hill ca
python subprocess popen 多次重定向
最近在项目中遇到一个需求,前端发来一个命令,这个命令是去执行传递过来的一个脚本(shell或者python),并返回脚本的标准输出和标准出错,如果执行超过设定时间还没结束就超时,然后终止脚本的执行。实现这个功能,自然而然先想到的是subprocess这个库了。因此,在后端的一个脚本中调用python的subprocess去执行传递过来的脚本,通常情况下subprocess都能运行的很好,完成脚本的
chapter01 Java语言概述 知识点Note
月下绯烟
Java java 开发语言
JavaSEJavaEEJavaME大数据Java基础常用技术栈mysqlJDBCSSMspring+springmvc+mybatisLinuxnacosHadoopFlinkJAVAEE消息队列rabbitMQdocker数据库redisspringbootspringcloudsshstruts+spring+hibernate过时技术栈很少用JAVA虚拟机jvm分布式微服务高并发常见dos
JavaScript - Api学习 Day1(WebApi、操作DOM对象)
你会魔法吗✧(≖ ◡ ≖✿)
HTML+CSS+JS javascript 学习 开发语言
应用编程接口(API)是编程语言中提供的结构,允许开发者更轻松地创建复杂的功能。、webapi是一套操作网页内容(DOM)与浏览器窗口(BOM)的对象Js由ECMAScript、DOM、BOM三个部分组成。文章目录零、前言0.1变量声明壹、WebAPI的认识1.1作用1.2什么是DOM1.3什么是DOM对象主要概念:示例代码:二、获取DOM对象2.1根据CSS选择器获取DOM元素2.1.1`que
2020-12-05
幸福大黑鸭
IT1.LeetCode:存在重复元素Java编写2020-12-05(217.存在重复元素)2.《Java从入门到精通》明日科技:P331~335阅读记xmind笔记,并自己实现实例。知识点之前确实都学过,但还是再系统复习一下吧。3.《Semantic-awareWorkflowConstructionandAnalysisforDistributedDataAnalyticsSystems》:
探索 Fabric.js:前端开发的轻量级图形编辑框架
滑辰煦Marc
探索Fabric.js:前端开发的轻量级图形编辑框架是一个强大的、基于WebGL和SVG的JavaScript图形库,专为构建交互式图形界面而设计。它提供了一种简单的方式来在网页上创建和操纵矢量对象,包括文本、形状、图像等,并且具有丰富的可定制性和性能优化。项目简介Fabric.js提供了一个统一的对象模型,使得处理HTML5canvas上的元素变得异常简单。无论是创建复杂的绘图应用,还是实现动态
图片地址携带blob:的原因
J不A秃V头A
前端 前端
图片地址携带blob:的原因与Blob对象(BinaryLargeObject)的使用有关。Blob对象代表了一个不可变的、原始数据的类文件对象,通常用于处理二进制数据,如图片、视频或音频文件等。在计算机中,Blob常用于数据库中存储二进制文件,但在Web开发中,Blob对象也被广泛用于前端处理二进制数据。具体来说,当图片地址携带blob:时,这通常意味着图片数据是以Blob对象的形式存储在浏览器
前端处理后端传的10w条数据
孟儿
前端
1.这道题在考什么?对于性能优化的处理方案对于前端渲染机制的了解极端情况下的处理及知识领域的广度常规处理constrenderList=async()=>{console.time('列表时间')constlist=awaitgetList();list.forEach(item=>{constdiv=document.createElement('div')div.className='flex
iview前端向后端传数据一直转圈_记一次开发过程当中,iview遇到的一些坑以及解决办法...
weixin_39641450
写在开头:本次项目采用的是vue2.0+iview3.0,最近公司没啥事,来总结一下开发过程当中遇到的问题。前端一、Modal关闭问题vue需求背景:modal框里面是个form表单,点击肯定以后,先验证form表单,验证经过则关闭modal框,验证不成功则提示用户,不关闭。ajax问题描述:原本刚开始想经过modal框v-model绑定的值(true或false)来进行控制,手动改以后,报错。后
iview前端向后端传数据一直转圈_记一次开发过程中,iview遇到的一些坑以及解决办法...
weixin_39959482
写在开头:本次项目采用的是vue2.0+iview3.0,最近公司没啥事,来总结一下开发过程中遇到的问题。1、Modal关闭问题需求背景:modal框里面是个form表单,点击确定之后,先验证form表单,验证通过则关闭modal框,验证不成功则提示用户,不关闭。问题描述:本来刚开始想通过modal框v-model绑定的值(true或false)来进行控制,手动改之后,报错。解决办法:官方ivie
怎样才算一个计算机知识体系完整的毕业生
X呜呼啦呼
为什么突然想写这个话题呢?最近有不少新关注的读者,在后台问:大学学Java和C++哪个好找工作,学前端好还是后端好,该学Vue还是React。。。仿佛看到了自己当年的模样,所以觉得有必要单独写一篇文章,单纯以一个计算机应届毕业生的身份聊聊,我认为大学四年,计算机科班学生应该学些什么,哪些才是重点。同样大学四年,为什么有些同学毕业就能成为大厂Offer收割机,各种SP、SSP拿到手软,有的同学明明在
控制台报错Access to XMLHttpRequest at ‘http://‘ from origin ‘http://‘ has been blocked by CORS policy
Peter-Lu
# 前端报错合集 http 网络协议 网络 axios
具体错误信息AccesstoXMLHttpRequestat'http://'fromorigin'http://'hasbeenblockedbyCORSpolicy:No'Access-Control-Allow-Origin'headerispresentontherequestedresource.问题缘由这个问题,纠缠了我很久期初我是在写前端代码进行调试,其中用到了axios,打开控制台
CSS设置背景图片的透明度
HWL5679
css 前端
在CSS中,直接设置背景图片的透明度是不可能的,但可以通过设置背景图片的容器的透明度来间接实现这一效果。然而,这样做会导致容器内的所有元素(包括文本和其他子元素)都变得透明。以下是几种方法来实现背景图片的透明度:方法1:使用伪元素(::before或::after)你可以使用伪元素来放置背景图片,并设置其透明度,而不影响其他元素。.container{position:relative;/*确保伪
用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码
天眼查
用html写出生日蛋糕
.birthday.container{width:600px;height:600px;margin:0pxauto;background:#fafafa;border-radius:5px;position:relative;}/****顶层的**/.birthday.top-one{position:absolute;width:280px;height:280px;bottom:200px
前端vue项目服务器部署(docker)
Think-killer
前端 vue.js 服务器
前端vue项目服务器部署(docker)步骤1:导入NginxDocker镜像1、上传NginxDocker镜像将你的nginx-alpine.tar包上传到服务器上。假设路径为/var/v3-admin-vite/nginx-alpine.tar。scp-r"C:\Users\86184\Desktop\v3-admin-vite"
[email protected] :/var/2、导入Ngi
HTML5生日祝福蛋糕页面(生日蛋糕树) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心
@秋天的笔记
生日祝福网页html 520情人节告白网页制作 七夕情人节表白网页源代码 HTML5七夕情人节动画网页 HTML生日快乐代码 3D旋转电子相册
HTML5七夕情人节表白网页❤生日蛋糕(蛋糕树)❤HTML+CSS+JS求婚html生日快乐祝福代码网页520情人节告白代码程序员表白源码抖音3D旋转相册js烟花代码css爱心表白这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站,可以任意修改和使用,源码已上传,演示网址如下。文章末尾-已经附上源码下载地址作者主页-更多源码1
JavaScript前端面试题——JS 中 Map 和 WeakMap 有什么区别 ?
早八睡不醒午觉睡不够的程序猿
开发语言 javascript 前端
刷了面试题之后才知道自己的知识是多么薄弱,这题我连Map和WeakMap是什么都不知道参考答案在JavaScript中,Map和WeakMap都是键值对的集合,但它们有几个重要的区别:1.键类型:Map对象的键可以是任何类型,包括基本数据类型和对象类型,而WeakMap对象的键必须是对象类型。2.垃圾回收:Map对象中的键和值都会被常规垃圾回收机制回收,而WeakMap中的键是弱引用,即在对象被垃
新手小白VUE整理(8)——EsLint,axios优化,拦截器,Proxy
crazy程序猿丶
新手小白初识vue vue.js 前端
VUE2.X1.Eslint1)作用约束程序猿的代码风格2)VSCode设置快捷搜索tabsize将缩减设置为2搜索format勾选"Editor:FormatOnSave"3)官网https://eslint.bootcss.com/docs/rules/4)工具安装EslintVSCode中settings.json添加配置项:"editor.codeActionsOnSave":{"sour
前端技术演进与未来发展趋势探究
科技语者
前端
该论文为AI生成,请勿运用到正式的论文上,以下仅供参考一、引言1.1研究背景在当今数字化时代,前端领域呈现出蓬勃发展的态势。随着互联网的普及和技术的不断进步,前端技术在构建用户界面、提升用户体验方面发挥着至关重要的作用。从早期的静态网页到如今的动态交互界面,前端技术经历了巨大的变革。在过去的几十年里,前端技术的发展可谓日新月异。从1990年第一个Web浏览器的诞生,到如今各种先进的前端框架和工具的
HTML生日蛋糕
Want595
一只有趣的兔子 css3 css 前端
目录写在前面完整代码代码分析系列文章写在最后写在前面HTML实现的生日蛋糕来喽,小编亲测,发给好友可以直接打开哦。在代码的第183行可以写下对朋友的祝福,快拿去送给你的好朋友吧!完整代码HappyBirthday!@importurl("https://fonts.googleapis.com/css?family=Concert+One|Pacifico");.mobile{position:f
花十分钟将vue3前端项目一步一步自动化部署到linux的docker上
东方睡衣
自动化 运维
要编写与ASM兼容的代码,开发人员需要使用UserIdService中的takeUserId()函数来确定OCC调用中使用的userId。这通常在一个服务中完成,该服务调度一个在有效负载中包含userId的Action.在Spartacus官方支持ASM场景之前,在代表经过身份验证的用户发送的请求中,OCCuserId是特殊的currentOCC用户,由OCC_USER_ID_CURRENT常量表
回顾vue开发spa(踩坑记录)
Just do it
使用vueJS开发前端页面差不多也有大半多年了。由于项目后台管理页面最早都是使用JQ进行开发的,刚开始使用vue的时候,只能是直接在页面里面引入vueJS框架进行开发,期间把项目后台的编辑页面和其他复杂页面全部改用vueJS的了(没有用到组件,只是增强了一下交互,开发更简单便捷)。由于工期和个人习惯问题,期间也留下了很多坑和隐患,比如不少页面是JQ和vue混用,导致后来改功能的时候痛不欲生……所以
Linux的Initrd机制
被触发
linux
Linux 的 initrd 技术是一个非常普遍使用的机制,linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式,变化不仅反映在文件格式上, linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术,然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
maven本地仓库路径修改
bitcarter
maven
默认maven本地仓库路径:C:\Users\Administrator\.m2
修改maven本地仓库路径方法:
1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml
2.找到
 
XSD和XML中的命名空间
darrenzhu
xml xsd schema namespace 命名空间
http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml
http://blog.csdn.net/wanghuan203/article/details/9203621
http://blog.csdn.net/wanghuan203/article/details/9204337
http://www.cn
Java 求素数运算
周凡杨
java 算法 素数
网络上对求素数之解数不胜数,我在此总结归纳一下,同时对一些编码,加以改进,效率有成倍热提高。
第一种:
原理: 6N(+-)1法 任何一个自然数,总可以表示成为如下的形式之一: 6N,6N+1,6N+2,6N+3,6N+4,6N+5 (N=0,1,2,…)
java 单例模式
g21121
java
想必单例模式大家都不会陌生,有如下两种方式来实现单例模式:
class Singleton {
private static Singleton instance=new Singleton();
private Singleton(){}
static Singleton getInstance() {
return instance;
}
Linux下Mysql源码安装
510888780
mysql
1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz
(1)创建mysql的安装目录及数据库存放目录
解压缩下载的源码包,目录结构,特殊指定的目录除外:
32位和64位操作系统
墙头上一根草
32位和64位操作系统
32位和64位操作系统是指:CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的,但是这些CPU并不是真正意义上的64 位CPU,里面依然保留了大部分32位的技术,只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面,32位系统的最大寻址空间是2 的32次方= 4294967296(bit)= 4(GB)左右,而64位系统的最大寻址空间的寻址空间则达到了
我的spring学习笔记10-轻量级_Spring框架
aijuans
Spring 3
一、问题提问:
→ 请简单介绍一下什么是轻量级?
轻量级(Leightweight)是相对于一些重量级的容器来说的,比如Spring的核心是一个轻量级的容器,Spring的核心包在文件容量上只有不到1M大小,使用Spring核心包所需要的资源也是很少的,您甚至可以在小型设备中使用Spring。
 
mongodb 环境搭建及简单CURD
antlove
Web Install curd NoSQL mongo
一 搭建mongodb环境
1. 在mongo官网下载mongodb
2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db"
3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
数据字典和动态视图
百合不是茶
oracle 数据字典 动态视图 系统和对象权限
数据字典(data dictionary)是 Oracle 数据库的一个重要组成部分,这是一组用于记录数据库信息的只读(read-only)表。随着数据库的启动而启动,数据库关闭时数据字典也关闭 数据字典中包含
数据库中所有方案对象(schema object)的定义(包括表,视图,索引,簇,同义词,序列,过程,函数,包,触发器等等)
数据库为一
多线程编程一般规则
bijian1013
java thread 多线程 java多线程
如果两个工两个以上的线程都修改一个对象,那么把执行修改的方法定义为被同步的,如果对象更新影响到只读方法,那么只读方法也要定义成同步的。
不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据,就不要将方法设置为synchronized的。
将文件或目录拷贝到另一个Linux系统的命令scp
bijian1013
linux unix scp
一.功能说明 scp就是security copy,用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议,保证了数据传输的安全,其格式如下: scp 远程用户名@IP地址:文件的绝对路径
【持久化框架MyBatis3五】MyBatis3一对多关联查询
bit1129
Mybatis3
以教员和课程为例介绍一对多关联关系,在这里认为一个教员可以叫多门课程,而一门课程只有1个教员教,这种关系在实际中不太常见,通过教员和课程是多对多的关系。
示例数据:
地址表:
CREATE TABLE ADDRESSES
(
ADDR_ID INT(11) NOT NULL AUTO_INCREMENT,
STREET VAR
cookie状态判断引发的查找问题
bitcarter
form cgi
先说一下我们的业务背景:
1.前台将图片和文本通过form表单提交到后台,图片我们都做了base64的编码,并且前台图片进行了压缩
2.form中action是一个cgi服务
3.后台cgi服务同时供PC,H5,APP
4.后台cgi中调用公共的cookie状态判断方法(公共的,大家都用,几年了没有问题)
问题:(折腾两天。。。。)
1.PC端cgi服务正常调用,cookie判断没
通过Nginx,Tomcat访问日志(access log)记录请求耗时
ronin47
一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间
nginx.conf使用配置方式:
log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
java-67- n个骰子的点数。 把n个骰子扔在地上,所有骰子朝上一面的点数之和为S。输入n,打印出S的所有可能的值出现的概率。
bylijinnan
java
public class ProbabilityOfDice {
/**
* Q67 n个骰子的点数
* 把n个骰子扔在地上,所有骰子朝上一面的点数之和为S。输入n,打印出S的所有可能的值出现的概率。
* 在以下求解过程中,我们把骰子看作是有序的。
* 例如当n=2时,我们认为(1,2)和(2,1)是两种不同的情况
*/
private stati
看别人的博客,觉得心情很好
Cb123456
博客 心情
以为写博客,就是总结,就和日记一样吧,同时也在督促自己。今天看了好长时间博客:
职业规划:
http://www.iteye.com/blogs/subjects/zhiyeguihua
android学习:
1.http://byandby.i
[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析
comsci
工作流
我们已经不满足于仅仅跳跃一次,通过对引擎的升级,今天我测试了一下循环反馈模式,大概跑了200圈,引擎报一个溢出错误
在一个流程图的结束节点中嵌入一段方程,每次引擎运行到这个节点的时候,通过实时编译器GM模块,计算这个方程,计算结果与预设值进行比较,符合条件则跳跃到开始节点,继续新一轮拓扑分析,直到遇到
JS常用的事件及方法
cwqcwqmax9
js
事件 描述
onactivate 当对象设置为活动元素时触发。
onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。
onbeforeactivate 对象要被设置为当前元素前立即触发。
onbeforecut 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
正则表达式验证日期格式
dashuaifu
正则表达式 IT其它 java其它
正则表达式验证日期格式
function isDate(d){
var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i);
if(!v) {
this.focus();
return false;
}
}
<input value="2000-8-8" onblu
Yii CModel.rules() 方法 、validate预定义完整列表、以及说说验证
dcj3sjt126com
yii
public array rules () {return} array 要调用 validate() 时应用的有效性规则。 返回属性的有效性规则。声明验证规则,应重写此方法。 每个规则是数组具有以下结构:array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
UITextAttributeTextColor = deprecated in iOS 7.0
dcj3sjt126com
ios
In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0."
Ins
判断一个数是质数的几种方法
EmmaZhao
Math python
质数也叫素数,是只能被1和它本身整除的正整数,最小的质数是2,目前发现的最大的质数是p=2^57885161-1【注1】。
判断一个数是质数的最简单的方法如下:
def isPrime1(n):
for i in range(2, n):
if n % i == 0:
return False
return True
但是在上面的方法中有一些冗余的计算,所以
SpringSecurity工作原理小解读
坏我一锅粥
SpringSecurity
SecurityContextPersistenceFilter
ConcurrentSessionFilter
WebAsyncManagerIntegrationFilter
HeaderWriterFilter
CsrfFilter
LogoutFilter
Use
JS实现自适应宽度的Tag切换
ini
JavaScript html Web css html5
效果体验:http://hovertree.com/texiao/js/3.htm
该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页。
HTML文件代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
Hbase Rest API : 数据查询
kane_xie
REST hbase
hbase(hadoop)是用java编写的,有些语言(例如python)能够对它提供良好的支持,但也有很多语言使用起来并不是那么方便,比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口,它内嵌了jetty作为servlet容器。
启动命令:./bin/hbase rest s
JQuery实现鼠标拖动元素移动位置(源码+注释)
明子健
jquery js 源码 拖动 鼠标
欢迎讨论指正!
print.html代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>发票打印</title>
&l
Postgresql 连表更新字段语法 update
qifeifei
PostgreSQL
下面这段sql本来目的是想更新条件下的数据,可是这段sql却更新了整个表的数据。sql如下:
UPDATE tops_visa.visa_order
SET op_audit_abort_pass_date = now()
FROM
tops_visa.visa_order as t1
INNER JOIN tops_visa.visa_visitor as t2
ON t1.
将redis,memcache结合使用的方案?
tcrct
redis cache
公司架构上使用了阿里云的服务,由于阿里的kvstore收费相当高,打算自建,自建后就需要自己维护,所以就有了一个想法,针对kvstore(redis)及ocs(memcache)的特点,想自己开发一个cache层,将需要用到list,set,map等redis方法的继续使用redis来完成,将整条记录放在memcache下,即findbyid,save等时就memcache,其它就对应使用redi
开发中遇到的诡异的bug
wudixiaotie
bug
今天我们服务器组遇到个问题:
我们的服务是从Kafka里面取出数据,然后把offset存储到ssdb中,每个topic和partition都对应ssdb中不同的key,服务启动之后,每次kafka数据更新我们这边收到消息,然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了,最开始我们是在代码中打印存储的日志,发现没什么问题,后来去查看ssdb的日志,才发现里面每次set的时候都会对同一个key