css之linear-gradient

2017年4月4日 · 阅读需 3 分钟

语法: -浏览器前缀-linear-gradient(方向(可选),颜色结点1,颜色结点2,颜色结点3,...)

浏览器前缀 -webkit -o -moz 不加浏览器前缀则需在方向前加to 如to top，注意to top等同与bottom表示从下往上,当然，可以使用角度
方向可以为角度，或是to top,to right,to bottom,to left 中的一个，默认从上往下=to bottom=180deg top即方向由上往下按顺序依次画出颜色结点的颜色，left由左往右方向，right和bottom同理若方向为角度，0deg等同于to top，随着角度增加，方向向量顺时针旋转，90deg=to right，180deg=to bottom，270deg=to left，并且角度可为负值使用角度的优点在于灵活，角度可任意
颜色结点可设置支持俗名，#，rgba等等，并且可额外附加百分比（注意颜色与百分比之间要加一个空格），表示该颜色所在的位置，中间部分为渐变色
比如linear-gradient(red 20%，blue 80%); 则从上往下前20%区域为红色，20%-80%区域为红色到蓝色的渐变色，80%-100%区域为蓝色
当然linear-gradient(red 20%，green 70%，blue 80%);表示0-20%区域为红色，20%-70%区域为红色到绿色的渐变色，70%-80%区域为绿色到蓝色的渐变色，80%-100%区域为蓝色
linear-gradient(red 20%，green，blue 80%);如果中间的green不标注百分比，则默认百分比为（20%+80%）/2=50%，表示0-20%区域为红色，20%-50%区域为红色到绿色的渐变色，50%-80%区域为绿色到蓝色的渐变色，80%-100%区域为蓝色小应用：
产生条纹状背景
非渐变：
background: -webkit-linear-gradient(top,#fb3 50%,#58a 50%); background-size: 100% 30%;
渐变：
background: -webkit-linear-gradient(top,white 0%,#fb3 30%,#58a 60%,white 100%); background-size: 100% 30%;

border-image-source 用在边框的图片的路径。

border-image-source: url(border.png);

border-image-slice 图片边框向内偏移。

设置切割线的位置，最多可设4个值，长度百分比均可，同margin，
fill为可选属性值，假如指定，那么中间第九块不是透明块，假如不指定，那么为透明图片处理

border-image-width 图片边框的宽度。

设置边框的宽度，最多可设4个值，长度百分比均可，同margin，还可设auto，如果规定该属性，则宽度为对应的图像切片的固有宽度。

border-image-outset 边框图像区域超出边框的量。

设置边框偏移量，最多可设4个值，长度百分比均可，同margin。

border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

语法：
radial-gradient(类型大小 at 圆心位置，颜色1 边界位置,颜色2 边界位置,颜色3 边界位置,...)
类型：可选，ellipse（椭圆）|circle 默认ellipse
大小：可选， extent-keyword|circle-size|ellipse-size
extent-keyword：closest-side|closest-corner|farthest-side|farthest-corner
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角
circle-size: 只接受长度单位如px，em
ellipse-size: 水平大小垂直大小，可接受长度单位或百分比
圆心位置：水平位置垂直位置，都接收长度，百分比，left，top，center等关键词，也可混合使用，若只设定了一个位置，则水平位置为该位置，垂直位置默认为center
颜色：rgba，hsla，关键词皆可
边界位置：接受长度和百分比

举例：
radial-gradient(ellipse 200px 100px at left 100px top 50px,blue 30%,green 60%,yellow 80%); 表示以距上边界50px,下边界100px的点为圆心，作水平半径200px，垂直半径100px的椭圆，其中在圆心到椭圆边界的路径上，0%-30%为蓝色，30%-50%为由蓝到绿的渐变色，50%-80%为由绿到黄的渐变色，80%-100%为黄色

github的创建

2017年4月2日 · 阅读需 2 分钟

进入github帐号后，点击右上角+号，点击new repository，库的名称可任意，但是只有名称为“用户名.github.com”的名称创建的git可以通过外部网络访问

安装Git，从官网下载适合自己电脑的Git，点击安装，一路“Next”就可以了。安装完成，打开Console开始设置Git参数。

    git config --global user.name "xxx"  
    git config --global user.email "[email protected]"
    //在上面的两个引号中分别填写你的名字和邮箱。
    //由于Git是分布式的版本控制系统，可能会有很多用户，每个用户需要有自己的名字和邮箱来互相区分。

设置完毕后，可以通过命令行git config -l查看全局配置信息

cmd进入选择作为版本库的文件夹

输入命令

git init
git add .//会把该目录内的所有文件复制到暂存区
git commit -m "备注"
git remote add origin https://github.com/用户名/版本库名.git
git push -u origin master

再进入github中你的版本库，发现东西都已经上传了

github的创建

2017年4月2日 · 阅读需 18 分钟

Ctrl

快捷键介绍
Ctrl + F 在当前文件进行文本查找（必备）
Ctrl + R 在当前文件进行文本替换（必备）
Ctrl + Z 撤销（必备）
Ctrl + Y 删除光标所在行或删除选中的行（必备）
Ctrl + X 剪切光标所在行或剪切选择内容
Ctrl + C 复制光标所在行或复制选择内容
Ctrl + D 复制光标所在行或复制选择内容，并把复制内容插入光标位置下面（必备）
Ctrl + W 递进式选择代码块。可选中光标所在的单词或段落，连续按会在原有选中的基础上再扩展选中范围（必备）
Ctrl + E 显示最近打开的文件记录列表（必备）
Ctrl + N 根据输入的类名查找类文件（必备）
Ctrl + G 在当前文件跳转到指定行处
Ctrl + J 插入自定义动态代码模板（必备）
Ctrl + P 方法参数提示显示（必备）
Ctrl + Q 光标所在的变量 / 类名 / 方法名等上面（也可以在提示补充的时候按），显示文档内容
Ctrl + U 前往当前光标所在的方法的父类的方法 / 接口定义（必备）
Ctrl + B 进入光标所在的方法/变量的接口或是定义处，等效于 Ctrl + 左键单击（必备）
Ctrl + K 版本控制提交项目，需要此项目有加入到版本控制才可用
Ctrl + T 版本控制更新项目，需要此项目有加入到版本控制才可用
Ctrl + H 显示当前类的层次结构
Ctrl + O 选择可重写的方法
Ctrl + I 选择可继承的方法
Ctrl + + 展开代码
Ctrl + - 折叠代码
Ctrl + / 注释光标所在行代码，会根据当前不同文件类型使用不同的注释符号（必备）
Ctrl + [ 移动光标到当前所在代码的花括号开始位置 Ctrl + ] 移动光标到当前所在代码的花括号结束位置
Ctrl + F1 在光标所在的错误代码处显示错误信息（必备）
Ctrl + F3 调转到所选中的词的下一个引用位置（必备）
Ctrl + F4 关闭当前编辑文件
Ctrl + F8 在 Debug 模式下，设置光标当前行为断点，如果当前已经是断点则去掉断点
Ctrl + F9 执行 Make Project 操作
Ctrl + F11 选中文件 / 文件夹，使用助记符设定 / 取消书签（必备）
Ctrl + F12 弹出当前文件结构层，可以在弹出的层上直接输入，进行筛选
Ctrl + Tab 编辑窗口切换，如果在切换的过程又加按上 delete，则是关闭对应选中的窗口
Ctrl + End 跳到文件尾 Ctrl + Space 基础代码补全，默认在 Windows 系统上被输入法占用，需要进行修改，建议修改为 Ctrl + 逗号（必备）
Ctrl + Delete 删除光标后面的单词或是中文句（必备）
Ctrl + BackSpace 删除光标前面的单词或是中文句（必备）
Ctrl + 1,2,3...9 定位到对应数值的书签位置（必备）
Ctrl + 左键单击在打开的文件标题上，弹出该文件路径（必备）
Ctrl + 光标定位按 Ctrl 不要松开，会显示光标所在的类信息摘要
Ctrl + 左方向键光标跳转到当前单词 / 中文句的左侧开头位置（必备）
Ctrl + 右方向键光标跳转到当前单词 / 中文句的右侧开头位置（必备）
Ctrl + 前方向键等效于鼠标滚轮向前效果（必备）
Ctrl + 后方向键等效于鼠标滚轮向后效果（必备）

Alt

快捷键介绍
Alt + ` 显示版本控制常用操作菜单弹出层（必备）
Alt + Q 弹出一个提示，显示当前类的声明 / 上下文信息
Alt + F1 显示当前文件选择目标弹出层，弹出层中有很多目标可以进行选择（必备）
Alt + F2 对于前面页面，显示各类浏览器打开目标选择弹出层
Alt + F3 选中文本，逐个往下查找相同文本，并高亮显示
Alt + F7 查找光标所在的方法 / 变量 / 类被调用的地方
Alt + F8 在 Debug 的状态下，选中对象，弹出可输入计算表达式调试框，查看该输入内容的调试结果
Alt + Home 定位 / 显示到当前文件的 Navigation Bar
Alt + Enter IntelliJ IDEA 根据光标所在问题，提供快速修复选择，光标放在的位置不同提示的结果也不同（必备）
Alt + Insert 代码自动生成，如生成对象的 set / get 方法，构造函数，toString() 等（必备）
Alt + 左方向键切换当前已打开的窗口中的子视图，比如 Debug 窗口中有 Output、Debugger 等子视图，用此快捷键就可以在子视图中切换（必备）
Alt + 右方向键按切换当前已打开的窗口中的子视图，比如 Debug 窗口中有 Output、Debugger 等子视图，用此快捷键就可以在子视图中切换（必备）
Alt + 前方向键当前光标跳转到当前文件的前一个方法名位置（必备）
Alt + 后方向键当前光标跳转到当前文件的后一个方法名位置（必备）
Alt + 1,2,3...9 显示对应数值的选项卡，其中 1 是 Project 用得最多（必备）

Shift

快捷键介绍
Shift + F1 如果有外部文档可以连接外部文档
Shift + F2 跳转到上一个高亮错误或警告位置
Shift + F3 在查找模式下，查找匹配上一个
Shift + F4 对当前打开的文件，使用新 Windows 窗口打开，旧窗口保留 Shift + F6 对文件 / 文件夹重命名
Shift + F7 在 Debug 模式下，智能步入。断点所在行上有多个方法调用，会弹出进入哪个方法 Shift + F8 在 Debug 模式下，跳出，表现出来的效果跟 F9 一样
Shift + F9 等效于点击工具栏的 Debug 按钮
Shift + F10 等效于点击工具栏的 Run 按钮
Shift + F11 弹出书签显示层（必备）
Shift + Tab 取消缩进（必备）
Shift + ESC 隐藏当前或最后一个激活的工具窗口
Shift + End 选中光标到当前行尾位置
Shift + Home 选中光标到当前行头位置
Shift + Enter 开始新一行。光标所在行下空出一行，光标定位到新行位置（必备） Shift + 左键单击在打开的文件名上按此快捷键，可以关闭当前打开文件（必备） Shift + 滚轮前后滚动当前文件的横向滚动轴滚动（必备）

Ctrl + Alt

快捷键介绍
Ctrl + Alt + L 格式化代码，可以对当前文件和整个包目录使用（必备）
Ctrl + Alt + O 优化导入的类，可以对当前文件和整个包目录使用（必备）
Ctrl + Alt + I 光标所在行或选中部分进行自动代码缩进，有点类似格式化
Ctrl + Alt + T 对选中的代码弹出环绕选项弹出层（必备）
Ctrl + Alt + J 弹出模板选择窗口，将选定的代码加入动态模板中
Ctrl + Alt + H 调用层次
Ctrl + Alt + B 在某个调用的方法名上使用会跳到具体的实现处，可以跳过接口
Ctrl + Alt + V 快速引进变量
Ctrl + Alt + Y 同步、刷新
Ctrl + Alt + S 打开 IntelliJ IDEA 系统设置（必备）
Ctrl + Alt + F7 显示使用的地方。寻找被该类或是变量被调用的地方，用弹出框的方式找出来 Ctrl + Alt + F11 切换全屏模式
Ctrl + Alt + Enter 光标所在行上空出一行，光标定位到新行（必备）
Ctrl + Alt + Home 弹出跟当前文件有关联的文件弹出层
Ctrl + Alt + Space 类名自动完成
Ctrl + Alt + 左方向键退回到上一个操作的地方（必备）
Ctrl + Alt + 右方向键前进到上一个操作的地方（必备）
Ctrl + Alt + 前方向键在查找模式下，跳到上个查找的文件
Ctrl + Alt + 后方向键在查找模式下，跳到下个查找的文件

Ctrl + Shift

快捷键介绍
Ctrl + Shift + F 根据输入内容查找整个项目或指定目录内文件（必备）
Ctrl + Shift + R 根据输入内容替换对应内容，范围为整个项目或指定目录内文件（必备）
Ctrl + Shift + J 自动将下一行合并到当前行末尾（必备）
Ctrl + Shift + Z 取消撤销（必备）
Ctrl + Shift + W 递进式取消选择代码块。可选中光标所在的单词或段落，连续按会在原有选中的基础上再扩展取
消选中范围（必备）
Ctrl + Shift + N 通过文件名定位 / 打开文件 / 目录，打开目录需要在输入的内容后面多加一个正斜杠（必
备）
Ctrl + Shift + U 对选中的代码进行大 / 小写轮流转换（必备）
Ctrl + Shift + T 对当前类生成单元测试类，如果已经存在的单元测试类则可以进行选择（必备）
Ctrl + Shift + C 复制当前文件磁盘路径到剪贴板（必备）
Ctrl + Shift + V 弹出缓存的最近拷贝的内容管理器弹出层
Ctrl + Shift + E 显示最近修改的文件列表的弹出层
Ctrl + Shift + H 显示方法层次结构
Ctrl + Shift + B 跳转到类型声明处（必备）
Ctrl + Shift + I 快速查看光标所在的方法或类的定义
Ctrl + Shift + A 查找动作 / 设置
Ctrl + Shift + / 代码块注释（必备）
Ctrl + Shift + [ 选中从光标所在位置到它的顶部中括号位置（必备） Ctrl + Shift + ] 选中从光标所在位置到它的底部中括号位置（必备）
Ctrl + Shift + + 展开所有代码（必备）
Ctrl + Shift + - 折叠所有代码（必备）
Ctrl + Shift + F7 高亮显示所有该选中文本，按 Esc 高亮消失（必备）
Ctrl + Shift + F8 在 Debug 模式下，指定断点进入条件
Ctrl + Shift + F9 编译选中的文件 / 包 / Module
Ctrl + Shift + F12 编辑器最大化（必备）
Ctrl + Shift + Space 智能代码提示
Ctrl + Shift + Enter 自动结束代码，行末自动添加分号（必备）
Ctrl + Shift + Backspace 退回到上次修改的地方（必备）
Ctrl + Shift + 1,2,3...9 快速添加指定数值的书签（必备）
Ctrl + Shift + 左键单击把光标放在某个类变量上，按此快捷键可以直接定位到该类中（必备）
Ctrl + Shift + 左方向键在代码文件上，光标跳转到当前单词 / 中文句的左侧开头位置，同时选中该单词 / 中文句
（必备）
Ctrl + Shift + 右方向键在代码文件上，光标跳转到当前单词 / 中文句的右侧开头位置，同时选中该单词 / 中文句
（必备）
Ctrl + Shift + 前方向快捷键介绍
Ctrl + Shift + 后方向键光标放在方法名上，将方法移动到下一个方法前面，调整方法排序（必备）

Alt + Shift

快捷键介绍
Alt + Shift + N 选择 / 添加 task （必备）
Alt + Shift + F 显示添加到收藏夹弹出层 / 添加到收藏夹
Alt + Shift + C 查看最近操作项目的变化情况列表
Alt + Shift + I 查看项目当前文件
Alt + Shift + F7 在 Debug 模式下，下一步，进入当前方法体内，如果方法体还有方法，则会进入该内嵌的方法中，
依此循环进入
Alt + Shift + F9 弹出 Debug 的可选择菜单
Alt + Shift + F10 弹出 Run 的可选择菜单
Alt + Shift + 左键双击选择被双击的单词 / 中文句，按住不放，可以同时选择其他单词 / 中文句（必备）
Alt + Shift + 前方向键移动光标所在行向上移动（必备）
Alt + Shift + 后方向键移动光标所在行向下移动（必备）
Ctrl + Shift + Alt
Ctrl + Shift + Alt + V 无格式黏贴（必备）
Ctrl + Shift + Alt + N 前往指定的变量 / 方法
Ctrl + Shift + Alt + S 打开当前项目设置（必备）
Ctrl + Shift + Alt + C 复制参考信息

其他

快捷键介绍
F2 跳转到下一个高亮错误或警告位置（必备）
F3 在查找模式下，定位到下一个匹配处
F4 编辑源（必备）
F7 在 Debug 模式下，进入下一步，如果当前行断点是一个方法，则进入当前方法体内，如果该方法体还有方法，则不会进入该内嵌的方法中
F8 在 Debug 模式下，进入下一步，如果当前行断点是一个方法，则不进入当前方法体内
F9 在 Debug 模式下，恢复程序运行，但是如果该断点下面代码还有断点则停在下一个断点上
F11 添加书签（必备）
快捷键介绍 Tab 缩进（必备）
ESC 从工具窗口进入代码文件窗口（必备）
连按两次 Shift 弹出 Search Everywhere 弹出层

JavaScript事件冒泡与事件捕获

2017年3月19日 · 阅读需 1 分钟

事件冒泡是自下而上的去触发事件

<div id="parent">
  <div id="child" class="child"></div>
</div>

document.getElementById("parent").addEventListener("click", function(e) {
  alert("parent 事件被触发，" + this.id);
});
document.getElementById("child").addEventListener("click", function(e) {
  alert("child 事件被触发，" + this.id);
});

child事件被触发，child
parent事件被触发，parent

事件捕获

事件捕获指的是从 document 到触发事件的那个节点，即自上而下的去触发事件

现在改变第三个参数的值为 true

document.getElementById("parent").addEventListener(
  "click",
  function(e) {
    alert("parent事件被触发，" + e.target.id);
  },
  true
);
document.getElementById("child").addEventListener(
  "click",
  function(e) {
    alert("child事件被触发，" + e.target.id);
  },
  true
);

parent 事件被触发，parent child 事件被触发，child

other

需要记忆的是 blur、focus、load、unload、media 相关事件是不会冒泡的

事件冒泡的应用：事件委托

border-image-source 用在边框的图片的路径。​

border-image-slice 图片边框向内偏移。​

border-image-width 图片边框的宽度。​

border-image-outset 边框图像区域超出边框的量。​

border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。​

Ctrl​

Alt​

Shift​

Ctrl + Alt​

Ctrl + Shift​

Alt + Shift​

其他​