确定
取消
×
仅自己可见
返回回到顶部了,差评,欢迎来小花站
(0) (0)
welcome to creative6
(0) (0)
1111
1
(0) (0)
西弗勒斯`斯内普
1
(0) (0)
rgba()和hsla()的区别
576

在css中我们想实现透明颜色,首先就会想到rgba()和hsla()这2个属性。这篇文章就简单介绍下使用这2种方式来实现半透明边框。

1、使用rgba方式:border: 10px solid rgba(255,255,255,.5);说明:rgba分别对应红绿蓝和透明值,其中rgb区间为0(纯黑)至255(纯色)透明度a区间为0(完全透明)至1不透明。

2、使用hsla方式:background: white;border: 10px solid hsla(0, 0%, 100%, .5);background-clip: padding-box;说明:默认情况下,背景的颜色会延伸至边框下层,在css3中,我们可以通过设置background-clip:padding-box来改变背景的默认行为,达到我们想要的效果。

HSLA(H,S,L,A) 的参数说明:H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360S:Saturation(饱和度)。取值为:0.0% - 100.0%L:Lightness(亮度)。取值为:0.0% - 100.0%A:Alpha透明度。取值0~1之间。注:此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度

(0) (0)
css flex弹性布局学习总结
576
12

一、简要介绍

      flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁、快速弹性布局的属性。

      主要思想是给予容器控制内部元素高度和宽度的能力   

      其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀

  采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。

  它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

  下图为flex的相关概念的示意图

  使用flex布局的容器(flex container),它内部的元素自动成为flex项目(flex item)。

  容器拥有两根隐形的轴,水平的主轴(main axis),和竖直的交叉轴。

  主轴开始的位置,即主轴与右边框的交点,称为main start;主轴结束的位置称为main end;

  交叉轴开始的位置称为cross start;交叉轴结束的位置称为cross end。

  item按主轴或交叉轴排列,item在主轴方向上占据的宽度称为main size,在交叉轴方向上占据的宽度称为cross size。

  此外,需注意使用flex容器内元素,即flex item的float,clear、vertical-align属性将失效。

二、容器的属性

  以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

2.1 flex-direction属性

  flex-direction属性决定主轴的方向(即项目的排列方向)。

  

  flex-direction: row | row-reverse | column | column-reverse;

 

 

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。
(0) (1)
【JS】元素高度
576

网页可见区域宽: document.documentElement.clientWidth;

网页可见区域高: document.documentElement.clientHeight;  

网页正文全文宽: document.documentElement.scrollWidth;

网页正文全文高: document.documentElement.scrollHeight;

网页被卷去的高(ff):document.body.scrollTop; 

网页被卷去的高(ie): document.documentElement.scrollTop; 

网页被卷去的左:document.body.scrollLeft; 

网页正文部分上:window.screenTop; 

网页正文部分左:window.screenLeft; 

某个元素的宽度:obj.offsetWidth;

(0) (0)
1111
1
(0) (0)
WM
比比
1
(2) (1)
color-X 3D
576

  

(0) (0)
$.ajax 中的contentType
576

 http 还可以自定义数据类型,于是就定义一种叫 application/json 的类型。这种类型是 text , 我们 ajax 的复杂JSON数据,用 JSON.stringify序列化后,然后发送,在服务器端接到然后用 JSON.parse 进行还原就行了,这样就能处理复杂的对象了。 

$.ajax({    dataType: 'json',    contentType: 'application/json',    data: JSON.stringify({a: [{b:1, a:1}]})})

这样你就可以发送复杂JSON的对象了。像现在的 restclient 都是这样处理的。  

 

(0) (0)
嚯嚯~
576

  

呆猫子video

(1) (0)
nginx image_filter
576
(0) (0)
nginx 常见正则匹配符号表示
576

1、^: 匹配字符串的开始位置; 2、 $:匹配字符串的结束位置; 3、.*: .匹配任意字符,*匹配数量0到正无穷; 4、\. 斜杠用来转义,\.匹配 . 特殊使用方法,记住记性了; 5、(值1|值2|值3|值4):或匹配模式,例:(jpg|gif|png|bmp)匹配jpg或gif或png或bmp 6、i不区分大小写

一.正则表达式匹配,其中:* ~ 为区分大小写匹配* ~* 为不区分大小写匹配* !~和!~*分别为区分大小写不匹配及不区分大小写不匹配二.文件及目录匹配,其中:* -f和!-f用来判断是否存在文件* -d和!-d用来判断是否存在目录* -e和!-e用来判断是否存在文件或目录* -x和!-x用来判断文件是否可执行三.rewrite指令的最后一项参数为flag标记,flag标记有:1.last    相当于apache里面的[L]标记,表示rewrite。2.break本条规则匹配完成后,终止匹配,不再匹配后面的规则。3.redirect  返回302临时重定向,浏览器地址会显示跳转后的URL地址。4.permanent  返回301永久重定向,浏览器地址会显示跳转后的URL地址。

使用last和break实现URI重写,浏览器地址栏不变。而且两者有细微差别,使用alias指令必须用last标记;使用proxy_pass指令时,需要使用break标记。Last标记在本条rewrite规则执行完毕后,会对其所在server{......}标签重新发起请求,而break标记则在本条规则匹配完成后,终止匹配。例如:如果我们将类似URL/photo/123456 重定向到/path/to/photo/12/1234/123456.pngrewrite "/photo/([0-9]{2})([0-9]{2})([0-9]{2})"/path/to/photo/$1/$1$2/$1$2$3.png ;

四.NginxRewrite 规则相关指令

1.break指令使用环境:server,location,if;该指令的作用是完成当前的规则集,不再处理rewrite指令。

2.if指令使用环境:server,location该指令用于检查一个条件是否符合,如果条件符合,则执行大括号内的语句。If指令不支持嵌套,不支持多个条件&&和||处理。

3.return指令语法:returncode ;使用环境:server,location,if;该指令用于结束规则的执行并返回状态码给客户端。示例:如果访问的URL以".sh"或".bash"结尾,则返回403状态码location ~ .*\.(sh|bash)?${return 403;}

4.rewrite 指令语法:rewriteregex replacement flag使用环境:server,location,if该指令根据表达式来重定向URI,或者修改字符串。指令根据配置文件中的顺序来执行。注意重写表达式只对相对路径有效。如果你想配对主机名,你应该使用if语句,示例如下:if( $host ~* www\.(.*) ){set $host_without_www $1;rewrite ^(.*)$  http://$host_without_www$1permanent;}

5.Set指令语法:setvariable value ; 默认值:none; 使用环境:server,location,if;该指令用于定义一个变量,并给变量赋值。变量的值可以为文本、变量以及文本变量的联合。示例:set$varname "hello world";

(0) (0)
nginx location配置详细解释
576

语法规则: location [=|~|~*|^~] /uri/ { … }

  • = 开头表示精确匹配

  • ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可。nginx不对url做编码,因此请求为/static/20%/aa,可以被规则^~ /static/ /aa匹配到(注意是空格)。

  • ~ 开头表示区分大小写的正则匹配

  • ~* 开头表示不区分大小写的正则匹配

  • !~!~*分别为区分大小写不匹配及不区分大小写不匹配 的正则

  • / 通用匹配,任何请求都会匹配到。

多个location配置的情况下匹配顺序为(参考资料而来,还未实际验证,试试就知道了,不必拘泥,仅供参考):

首先匹配 =,其次匹配^~, 其次是按文件中顺序的正则匹配,最后是交给 / 通用匹配。当有匹配成功时候,停止匹配,按当前匹配规则处理请求。

例子,有如下匹配规则:

location = / {
#规则A
}
location = /login {
#规则B
}
location ^~ /static/ {
#规则C
}
location ~ \.(gif|jpg|png|js|css)$ {
#规则D
}
location ~* \.png$ {
#规则E
}
location !~ \.xhtml$ {
#规则F
}
location !~* \.xhtml$ {
#规则G
}
location / {
#规则H
}

那么产生的效果如下:

访问根目录/, 比如http://localhost/ 将匹配规则A

访问 http://localhost/login 将匹配规则B,http://localhost/register 则匹配规则H

访问 http://localhost/static/a.html 将匹配规则C

(0) (0)
1 / 15
Bio:{{user.bio== undefined?'(→_→)Nothing':user.bio}}
发帖
个人中心
消息
{{noticeNum}}
登出