电脑尺子(ScreenRuler) 中文绿色版

电脑尺子(ScreenRuler)是一款绿色小巧的电脑屏幕尺子软件,它的原理就是通过检测你的显示器的尺寸在屏幕上生成一把真实尺子的图片,使得你无须拥有真正的尺子就可以测量长度,具有设置单位为毫米或象素,设置透明度,设置横测或竖测。

为了适应不同电脑分辨率,配置了实物校准工具,可以使用身边的纸币,纸张,银行卡等校准实物进行校准

该软件对于常用电脑而身边没有尺子的网店店主,白领办公人员,美工界面设计师是一款非常方便的测试助手。

新版3.0有添加测量滑标,可以方便测量;添加有导入图像,可以在尺子内进行测量.同时支持多种单位.

可以自动获取屏幕像素尺寸,根据win系统数据加载.可进行微调整.

 

V1.0版打开软件会有个提示,应该是软件原作者添加的跳出广告功能,现广告URL估计挂掉了.才会有报错,不影响使用.

 

V1.0版网盘下载: https://72k.us/file/16922972-429120873

 

V3.0版网盘下载: https://72k.us/file/16922972-429122382

 

 

V4.3英文免费版网盘下载: https://72k.us/file/16922972-429124819

 

V4.3版本为官方exe安装程序,界面为英文.

最新版6.0收费.

 

网页栅格系统应该怎么用

概要

一、栅格系统的必要性

二、栅格系统的基本概念

三、栅格系统的分类及计算公式

四、栅格系统在响应式布局中的应用

五、网页栅格系统的使用步骤

 

一、网页栅格系统的必要性

更专业

使设计有迹可循,具有逻辑性,同时也更规范,减少设计中的尺寸计算和无效尝试,设计师可以将更多的精力放在设计本身。

 

更高效

统一设计规范,减少决策时间,使沟通更高效。

 

布局更方便

特别是对响应式布局,能够使不同设备上呈现的界面更具统一性。

 

二、栅格系统的基本概念

基本组成:

  1. 栅格总宽度(W)
  2. 列(a)
  3. 水槽(i)
  4. 外边距(M)

 

栅格总宽度(W)

网页栅格系统应该怎么用

栅格总宽度就是设计内容的宽度,一般来说网页的顶部和侧边导航、背景装饰元素、通栏banner和底栏(footer)可以不受栅格总宽度限制。

 

列(a)

网页栅格系统应该怎么用

栅格的单位,它们构成了内容宽度。最常用的12列、24列。列的宽度一般会计算得出,或直接自定义,首先要确定的是列的数目。

 

水槽(i)

网页栅格系统应该怎么用

水槽是列与列之间的间隔,水槽宽度越小内容越紧凑;越大留白越多,页面更有呼吸感,但水槽宽度不能比列宽大,否则不利于内容的展示。水槽内不可以放内容,不然的话使用栅格还有什么意义。

 

外边距(M)

网页栅格系统应该怎么用

是内容宽度之外的留白部分,会随着设备的宽度不同而变化。外边距一般有个安全距离,可以按照水槽宽度的(常用0.5、1.0、1.5、2.0)倍数来计算。

 

三、栅格系统的分类和计算公式

a、有边距的栅格:适合已知要设计的内容宽度(即W已知)

网页栅格系统应该怎么用

 

b、无边距的栅格:适合已知要适配的网页尺寸,使用最接近网页内容尺寸的栅格系统。

网页栅格系统应该怎么用

 

c、直接等分的网格:已知要设计的内容宽度和列宽及列的数目

网页栅格系统应该怎么用

 

四、栅格系统在响应式布局中的应用

栅格系统应用于响应式布局,有三种类型:

  1. 固定网格布局;
  2. 流动网格布局;
  3. 混合网格

在此之前有个断点的概念,需要了解一下

断点:是具有特定布局要求的预定屏幕尺寸的范围。在给定的断点范围内,布局会根据屏幕大小和方向进行调整。超出范围则相当于达到某个临界点,界面布局会发生变化。

 

a、固定网格布局

固定网格,列宽和水槽宽不会改变,只是改变列的数目,当窗口缩放时,排版布局不会发生任何改变,只有当达到一个临界值(开发那边设置好的固定的值),界面才会发生改变。在此之前界面排版都是不变的,就像一部分被切掉了。

网页栅格系统应该怎么用

 

b、流动网格布局

内容宽度会随着窗口的缩放而发生改变,例如图片会缩小,文本会换行。水槽的宽度不一定是固定的,可以随着页面宽度变化。

网页栅格系统应该怎么用

 

c、混合网格

即固定网格和流动网格组合的形式,常用于后台系统设计、工具型界面设计等。

网页栅格系统应该怎么用

例如上面的后台管理系统(dashboard)侧边栏是固定网格,右侧内容是流动网格。水槽宽度保持不变。

 

五、栅格系统的使用步骤

  1. 确定内容的总宽度W(常用的1180px、1190px、1200px、1400px)
  2. 确定栅格数目n(如果你的网页结构相对简单,则n=12即可,如果网页结构比较复杂或者具有排版的不确定性,则用n=24。)
  3. 确定水槽的宽度i(水槽宽度常用的6、8、10、15、20px)
  4. 在sketch/ps里设置上面的参数即可得到一套栅格系统

Sketch非常方便,在「视图」-「画布」-「布局设置」即可得到如下界面设置栅格系统(中文和英文对照)

网页栅格系统应该怎么用

Ps中「视图」-「新建参考线版面」,虽然没有Sketch那么方便,但依然能够很方便设置出栅格系统,如图。

网页栅格系统应该怎么用

 

本文总结

  1. 栅格系统组成:总宽度(W)、列(a)、水槽(i)、外边距(M)
  2. 计算公式:有边距网格:W=(a i)*n;无边距网格:W=(a i)*n-i;确定总宽度,确定列宽和数目直接等分
  3. 响应式布局三种类型:固定网格布局;流动网格布局;混合网格
  4. 栅格使用三步骤:第一步确定总宽度(W),第二步确定栅格的数目(n),③第三步确定水槽宽度(i)

 

其他的一些小技巧:

  1. 网页中常用100px栅格,也就是列宽与水槽的常见组合(90 10、80 20、70 30、85 15)px
  2. 网页中图片推荐使用常用比例(21:9、16:10、16:9、7:5、4:3、1:1)
  3. 栅格不是固定死的,可以自定义符合当前项目的栅格系统。

推荐一个智能生成栅格系统的网站:http://grid.guide/

网页栅格系统应该怎么用

有了这个省去了很多计算的过程,可以直接下载下来png格式,放到软件里面直接拉参考线,就有了一套网格系统,是不是很方便。

 

原文地址:UI设计进阶(公众号)

作者:阿倩

网页栅格系统应该怎么用

V2Ray和Project V简介

V2Ray是一个网络转发程序,支持 TCP、mKCP、WebSocket 这3种底层传输协议,支持HTTP、Socks、Shadowsocks、VMess这4种内容传输协议(HTTP只支持传入),并且有完整的TLS实现,是一个非常强大的平台。

 

如果个人无法搭建V2Ray服务器,可以使用ByWave的服务.(据说ByWave,是一家主打高端的V2ray机场。)

 

Github地址:https://github.com/v2ray/v2ray-core/releases

 

BifrostV(V2Ray客户端)是Android版V2Ray客户端,是一款多功能传输工具,软件支持Socks、HTTP、Shadowsocks、VMess等协议,可通过不同的传入和传出协议组合,灵活转换通讯格式,全面包含使用TLS、TCP、mKCP、WebSocket等传输方式进行传输,有效帮助用户更便捷的进行通讯,只需一键即可转换使用,非常的实用。同时,软件还内置的路由功能,可以灵活地实现选择性转发、直连或是阻止部分连接,让您轻松联系您所需对象,而且也可以让大家免费的观看国外的各种视频资源哦~

 

推荐JMS订阅购买:

官网 https://justmysocks.net/

国内镜像 https://justmysocks5.net/

Just My Socks是搬瓦工官方出品,支持支付宝付款,性价比很高且非常稳定,定期更新IP。

 

 

Project V 是一个工具集合,它可以帮助你打造专属的基础通信网络。Project V 的核心工具称为V2Ray,其主要负责网络协议和功能的实现,与其它 Project V 通信。V2Ray 可以单独运行,也可以和其它工具配合,以提供简便的操作流程。

主要特性
多入口多出口: 一个 V2Ray 进程可并发支持多个入站和出站协议,每个协议可独立工作。
可定制化路由: 入站流量可按配置由不同的出口发出。轻松实现按区域或按域名分流,以达到最优的网络性能。
多协议支持: V2Ray 可同时开启多个协议支持,包括 Socks、HTTP、Shadowsocks、VMess 等。每个协议可单独设置传输载体,比如 TCP、mKCP、WebSocket 等。
隐蔽性: V2Ray 的节点可以伪装成正常的网站(HTTPS),将其流量与正常的网页流量混淆,以避开第三方干扰。
反向代理: 通用的反向代理支持,可实现内网穿透功能。
多平台支持: 原生支持所有常见平台,如 Windows、Mac OS、Linux,并已有第三方支持移动平台。

OBS推流工具

 

简介

什么是OBS?

Open Broadcaster Software(简称OBS)是一款好用的直播流媒体内容制作软件。

OBS使用是否收费?

不收费,这个程序和其源代码都是免费的。

OBS都支持哪些操作系统?

支持 OS X、Windows、Linux操作系统,适用于多种直播场景,满足大部分直播行为的操作需求。

下载OBS

请您到OBS官网下载最新软件 OBS官方下载

设置OBS

  1. 通用设置。

    如果您有直播录制需求,由于直播时网络环境较复杂,建议您进行直播时,在本地进行录制备份。

  2. 流设置。

    注意:将鉴权后的推流地址分两部分输入 URL 与 流名称 中。URL 部分填写包含AppName前的地址,流名称 部分填写包含StreamName后的地址。实际使用时,将整个推流地址粘贴到URL内也是可以播放的,但是为了安全最好将StreamName后的地址写入流名称内,隐藏auth_key

    实际Mac版OBS的流密钥与Windows版OBS的流秘钥中的内容默认不显示明文。

    以上面的推流地址为例,参数设置为:

    FMS URL / URL: rtmp://video-center.alivecdn.com/AppName

    流秘钥: StreamName?vhost=live.aliyuntest.club&auth_key=1519372875-0-0-5a571e7e3398ca3fc7dcd65ee21616c0

    开启了鉴权后,鉴权参数也一并放在Mac版OBS的流密钥与Windows版OBS流秘钥中。

  3. 分辨率设置。

    输出分辨率就是您想让观众看到的画面分辨率,分辨率决定着画面的清晰程度,越高画面越清晰。

    FPS是视频帧率,它控制视频观看视频流畅,普通视频帧率有24-30帧,低于16帧画面看起来有卡顿感。而游戏对帧率要求比较高,一般小于30帧游戏会显得不连贯。

    常见视频分辨率与比例对照表

     
    比例 分辨率 比例 分辨率 比例 分辨率
    4:03 2048x1536 1600x1200 1400x1050 1152×864 1024x768 800x600 640x480 16:09 1920x1080 1600×900 280x720 16:10 2560x1600 1920x1200 1680x1050 1440x900 1280x800 1366x768 960x600 800x480
  4. 输出设置。

    注意:视频或音频比特率越大,所需的带宽越大。

  5. 减少直播延迟设置。

常见操作设置介绍

直播来源设置介绍

OBS工具支持简单的内容快速编辑、剪辑、场景、来源素材快速切换的操作,可以对直播活动进行快速简单的内容编辑。

  • BrowserSource:可实时展示一个网络页面。

  • 图像:适用于单张图像直播。

  • 图像幻灯片放映:可循环或者顺序多张播放图片,适用于会议、教育类课件直播。

  • 场景:实现各种强大的直播效果。此时,另一个场景是作为来源被添加进当前场景的,可以实现整个场景的插入。

  • 媒体源:可上传本地视频,并本地点播视频文件进行直播化处理。

  • 文本:实时添加文字在直播窗口中。

  • 显示器捕获:可实时动态捕捉您电脑桌面的操作,电脑桌面中所有的操作均执行直播。

  • 游戏捕获:允许对指定来源的游戏进行直播。适用于大小游戏的实况直播。

  • 窗口捕获:可根据您选择的窗口进行实时动态捕获,使用窗口捕获的好处是直播仅显示您当前窗口的内容,其他窗口不会进行直播捕获。适用于软件讲解或操作指引类的直播。

  • 色源:使用这个来源可以添加一个色块到你的场景中,作为一个背景色。该色块可以调节透明度,成为全屏透明色彩。

  • 视频捕获设备:实时动态捕捉摄像设备,可将摄像后的画面进行直播。常见场景有娱乐秀场,视频会议等。

  • 音频输入捕获:用于音频直播活动(音频输入设备)。

  • 音频输出捕获:用于音频直播活动(音频输出设备)。

    场景与来源内容可根据实际需要进行切换,叠加展示。

工作室模式介绍

工作室模式提供给用户可对当前直播的内容进行实时编辑的操作的界面。

  • 左边画面为素材准备界面,右侧画面为直播显示画面。

  • 先设置画面转换模式。

  • 画面需要进行切换时,分别执行过渡动画设置。

  • 快速过渡动画可在场景过渡中设置。

常见问题

  • 为什么使用OBS做直播推流有卡顿,丢帧的现象?

    • OBS有丢帧监测数据,发现有丢帧现象时,请您首先检查带宽资源是否够用,上传速度是否满足直播需求。同时尝试适当降低视频分辨率。

    • 查看您的CPU是否耗费较高。电脑配置过低,电脑资源被占满,也会影响视频的流畅度。

 

来源:https://help.aliyun.com/document_detail/45212.html

Proxmox VE强大的开源服务器解决方案

Proxmox VE(英语:Proxmox Virtual Environment,通常简称为PVE),是一个开源的服务器虚拟化环境Linux发行版。Proxmox VE基于Debian,使用基于Ubuntu的定制内核,包含安装程序、网页控制台和命令行工具,并且向第三方工具提供了REST API,在Affero通用公共许可证第三版下发行。

ColorImpact取色软件网页配色方案生成软件

ColorImpact 是一个应用于 Windows 平台上获得多项大奖的颜色方案设计工具。兼具易用性和高级功能,ColorImpact 在众多设计、多媒体、WEB 开发程序中提供出众的整合。主要功能有:单击即可建立漂亮的颜色方案;通过内置的高级工具探索颜色语言的强大之处;全新颜色混合;高级颜色公式;全新的高级颜色方案分析;自定义调色板;导出颜色方案到其他设计程序;全新颜色设计!
ColorImpact 是一个非常好的色彩选取工具,程序提供的非常友好的界面,提供了多种色彩选取方式,支持屏幕直接取色,非常方便易用!

 

网盘下载: https://72k.us/file656/16922972-427594374

 

1 使用ColorImpact选择颜色

启动ColorImpact后,在软件窗口的左侧区域是用来选择颜色的,在默认状态下是以一个色环的方式来帮助我们选择颜色,同样也可以使用类似于Fireworks CS3的“混色器”面板方式和网络安全色方式来选择颜色,如图6.58所示。


图6.58 三种不同的选择颜色方式

除此以外,在软件窗口的左下方,还可以按照RGB和HSB的颜色模式来选取颜色,并且控制颜色的明度和饱和度,如图6.59所示。


图6.59 按照颜色模式来选择颜色

通过使用ColorImpact选择好的颜色,会在软件窗口的左上角显示,并且能够显示其详细的颜色值等参数。很多时候,我们需要从屏幕上直接吸取颜色,使用ColorImpact来实现同样很方便。我们可以点击窗口左上角的“滴管”工具按钮,这时会弹出一个“滴管工具设置”对话框,如图6.60所示。


图6.60 “滴管工具设置”对话框

在这个对话框中可以设置所吸取颜色的范围和是否隐藏主窗口,设置完毕,点击“确定”按钮,就可以从屏幕的任意位置吸取所需要的色彩了。

2 使用ColorImpact进行网页配色

在ColorImpact软件主界面的上方,有一行快速选择按钮,通过选择这些不同的按钮,我们可以以不同的方式来浏览色彩。当我们在软件窗口左侧的区域选择了颜色以后,软件会自动给出所选择的颜色的搭配方案,并且在软件窗口的中间部分显示出来。

1.色彩调和

选择色彩调和按钮,即可以色环的方式来浏览色彩,如图6.61所示。


图6.61 色彩调和

2.高级色环

选择高级色环按钮,可以显示更为复杂的色环效果,并且可以对色环进行详细的设置,如图1-15所示


图6.62 高级色环

3.色彩方案

选择色彩方案按钮,ColorImpact会自动给出相应的颜色配色方案,需要选择不同的配色方案,可以在“属性”面板中进行设置,如图6.63所示。


图6.63 色彩方案

4.色彩变化

选择色彩变化按钮,可以把选定的颜色拖拽到窗口中间的虚线矩形上,这时可以根据“属性”面板中的不同设置来改变颜色的变化过程,如图6.64所示。


图6.64 色彩变化

5.色彩混合

选择色彩混合按钮,可以设置起始颜色和结束颜色,ColorImpact会生成中间的颜色变化过程,并且这个变化过程是可以调整的,如图6.65所示。


图6.65 色彩混合

3 将选定的颜色导入到Fireworks CS3

接下来最重要的部分,就是如何把在ColorImpact软件中调好的颜色导入到Fireworks CS3中了,其实这个软件支持很多种格式的颜色输出,是可以很方便地导入到Adobe系列软件中去的。

首先,我们需要把选定的颜色添加到软件界面右侧的“调色板”中,添加的方法很多,可以直接把选择的颜色拖拽到“调色板”的空白区域,也可以点击“属性”面板的“复制到调色板”按钮,点击这个按钮可以把色环上的所有颜色都添加到调色板中,如图6.66所示。


图6.66 把选定的颜色添加到“调色板”

接下来可以选择“文件”→“导出”命令,打开ColorImpact软件的“导出”对话框,在这个对话框中可以选择导出的颜色格式,如果我们希望导出的颜色能够在Fireworks CS3中调用的话,可以选择导出为ACT的颜色表,如3-67所示。


图6.67 “导出”对话框

导出完毕后,启动Fireworks CS3,打开Fireworks CS3的“样本”面板,选择“样本”面板选项菜单中的“添加样本”命令,然后找到刚刚导出的ACT颜色表文件,这样就可以把所有的颜色都添加到Fireworks CS3的“样本”面板中来了,如图6.68所示。


图6.68 “样本”面板中添加的颜色

js中的匿名函数

来源:https://www.cnblogs.com/ranyonsue/p/10181035.html

收藏主要用于学习.如有侵权请联系,必删.

 

匿名函数顾名思义指的是没有名字的函数,在实际开发中使用的频率非常高!也是学好JS的重点。

匿名函数:没有实际名字的函数。

首先我们声明一个普通函数:

//声明一个普通函数,函数的名字叫fn

function fn(){

console.log("张培跃");

}

然后将函数的名字去掉即是匿名函数:

 

//匿名函数,咦,运行时,你会发现报错啦!

function (){

console.log("张培跃");

}

到此,你会发现单独运行一个匿名函数,由于不符合语法要求,报错啦!解决方法只需要给匿名函数包裹一个括号即可:

//匿名函数在其它应用场景括号可以省略

(function (){

//由于没有执行该匿名函数,所以不会执行匿名函数体内的语句。

console.log("张培跃");

})

如果需要执行匿名函数,在匿名函数后面加上一个括号即可立即执行!

(function (){

//此时会输出张培跃

console.log("张培跃");

})()

倘若需要传值,直接将参数写到括号内即可:

(function (str){

//此时会输出张培跃好帅!

console.log("张培跃"+str);

})("好帅!")

 

匿名函数的应用场景

1、事件

<input type="button" value="点我啊!" id="sub">

<script>

//获得按钮元素

var sub=document.querySelector("#sub");

//给按钮增加点击事件。

sub.onclick=function(){

alert("当点击按钮时会执行到我哦!");

}

</script>

 

2、对象

var obj={

name:"张培跃",

age:18,

fn:function(){

return "我叫"+this.name+"今年"+this.age+"岁了!";

}

};

console.log(obj.fn());//我叫张培跃今年18岁了!

 

3、函数表达式

//将匿名函数赋值给变量fn。

var fn=function(){

return "我是一只小小小小留下,怎么飞也飞不高!"

}

//调用方式与调用普通函数一样

console.log(fn());//我是一只小小小小留下,怎么飞也飞不高!

 

4、回调函数

setInterval(function(){

console.log("我其实是一个回调函数,每次1秒钟会被执行一次");

},1000);

 

5、返回值

//将匿名函数作为返回值

function fn(){

//返回匿名函数

return function(){

return "张培跃";

}

}

//调用匿名函数

console.log(fn()());//张培跃

//或

var box=fn();

console.log(box());//张培跃

 

模仿块级作用域

块级作用域,有的地方称为私有作用域。JavaScript中是没有块级作用域的,例如:

if(1==1){//条件成立,执行if代码块语句。

var a=12;//a为全局变量

}

console.log(a);//12

 

for(var i=0;i<3;i++){

console.log(i);

}

console.log(i);//4

if(){}for(){}等没有自己的作用域。如果有,出了自己的作用域,声明的变量就会立即被销毁了。但是咱们可以通过匿名函数来模拟块级作用域:

 

(function(){

//这里是我们的块级作用域(私有作用域)

})();

 

尝试块级作用域:

function fn(){

(function(){

var la="啦啦啦!";

})();

console.log(la);//报错---la is not defined

}

fn();

 

匿名函数的作用:

1、通过匿名函数可以实现闭包,关于闭包在后面的文章中会重点讲解。在这里简单介绍一下:闭包是可以访问在函数作用域内定义的变量的函数。若要创建一个闭包,往往都需要用到匿名函数。

2、模拟块级作用域,减少全局变量。执行完匿名函数,存储在内存中相对应的变量会被销毁,从而节省内存。再者,在大型多人开发的项目中,使用块级作用域,会大大降低命名冲突的问题,从而避免产生灾难性的后果。自此开发者再也不必担心搞乱全局作用域了。

C盘ESD文件夹说明

C盘ESD文件夹是升级win10时,安装使用的win10安装文件.

通常在使用微软的升级工具或其它介质进行系统升级到win10时生成的.

如果你安装好win10就可以把ESD文件删除.

当然也可以拷贝到其它盘,留着以后或许会能用到.

一个页面同时使用多个TinyMCE编辑器

来源:

http://tinymce.ax-z.cn/general/multiple-editors.php

一个配置共享多个编辑器实例

该官方提供的例子,将页面分成两个单独的可编辑区域。每个区域共享一个编辑器。每个区域的div使用了相同的class(.myeditablediv)。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script>
  tinymce.init({
    selector: '.myeditablediv',
    inline: true
  });
  </script>
</head>

<body>
  <h1>Multple editors on a page: Section 1</h1>
  <form method="post">
    <div class="myeditablediv">Click here to edit the first section of content!</div>
  </form>

  <h1>Multple editors on a page: Section 2</h1>
  <form method="post">
      <div class="myeditablediv">Click here to edit the second section of content!</div>
  </form>
</body>
</html>

多个实例,每个具有唯一配置

简单说就是init两次,每次selector不一样就是了,不废话直接上官方示例代码。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script">
  tinymce.init({
    selector: '#myeditable-h1',
    inline: true,
    menubar: false,
    toolbar: 'undo redo'
  });
  </script>
  <script>
  tinymce.init({
    selector: '#myeditable-div',
    inline: true
  });
  </script>
</head>

<body>
  <form method="post">
    <h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1>
  </form>

  <form method="post">
    <div id="myeditable-div">
      <p>This section of content can be edited. Click here to see how.</p>
    </div>
  </form>
</body>
</html>
            

 

说明:

在做网页开发时,有时会遇到一个表单使用多个编辑器,通常编辑器的配置是一样的,这时我们只需要统一给编辑器一个class即可简单实现一个页面同时使用多个TinyMCE编辑器.