]) `,第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。同样是以元素中心为基点，我们也可以通过`transform-origin`来改变元素的基点位置。
39 |
40 | 如：transform:skew(30deg,10deg):
41 |
42 | 
43 |
44 | 如 transform:skewX(30deg):
45 |
46 | 
47 |
48 | 如：transform:skewY（10deg):
49 |
50 | 
51 |
52 |
53 | - 元素基点transform-origin
54 |
55 | `transform-origin(X,Y)`:用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；
56 |
57 |
58 | 1、top left | left top 等价于 0 0 | 0% 0%
59 |
60 | 2、top | top center | center top 等价于 50% 0
61 |
62 | 3、right top | top right 等价于 100% 0
63 |
64 | 4、left | left center | center left 等价于 0 50% | 0% 50%
65 |
66 | 5、center | center center 等价于 50% 50%（默认值）
67 |
68 | 6、right | right center | center right 等价于 100% 50%
69 |
70 | 7、bottom left | left bottom 等价于 0 100% | 0% 100%
71 |
72 | 8、bottom | bottom center | center bottom 等价于 50% 100%
73 |
74 | 9、bottom right | right bottom 等价于 100% 100%
75 |
--------------------------------------------------------------------------------
/2015/12/2015年12月17日.markdown:
--------------------------------------------------------------------------------
1 | #2015年12月17日
2 | ##配色
3 |
4 | 描述一个色彩有三种途径，按色彩的**色相**，**饱和度**，**亮度**。
5 |
6 | - 彩度
7 |
8 | 下图显示的是彩度（Chroma）或者称为饱和度（saturation）：反应的是色彩相对于灰度的纯度
9 |
10 | 
11 |
12 | - 亮度
13 |
14 | 下图显示的是彩度（Chroma）或者称为饱和度（saturation）：反应的是色彩相对于灰度的纯度。
15 |
16 | 
17 |
18 | - 减色
19 |
20 | 当使用颜料或者使用涂料等方式时候，我们使用减色法。减色法意味着由白色开始，随色色彩的叠加，直到黑色。
21 |
22 | 
23 | >CMYK 色彩模型用于减色法
24 |
25 | 
26 | >这个色轮用于颜料色彩搭配--减色法
27 |
28 | - 加色
29 |
30 | 如果你使用电脑来处理色彩，那么电脑上的色彩是由加色法呈现的。加色法意味着色彩是从黑色开始，随着色彩的叠加，逐渐变亮，最后成为白色。
31 |
32 | 
33 | >这是RGB色彩模型表示加色法，白色由R红色，G绿色,蓝色叠加而成。
34 |
35 | 
36 | >这个色轮用于加色。
37 |
38 | - 色环
39 |
40 | 
41 | >色环中根据亮度又分为积极色（ Active colors，也可以称为暖色）和消极色（ Passive colors也可以叫做冷色），积极色表现出活跃，积极的一面，消极色则相反。
42 | 此外还有**原色**、**间色（次色）**、**三级色**、**互补色**、**类似色**。
43 | 参考：链接；
44 |
45 |
46 |
--------------------------------------------------------------------------------
/2015/12/2015年12月18日.markdown:
--------------------------------------------------------------------------------
1 | #2015年12月18日
2 | ##javascript
3 | ###面向对象
4 |
5 | ```js
6 | oDiv.onclick=function(){
7 | alert(this);
8 | }
9 | ```
10 |
11 | >给一对象添加**事件**（click事件），等于给一个对象添加**方法**（function）；
12 |
13 | **this**
14 |
15 | - 当前发生事件的对象
16 | - 当前的方法属于谁，this就是谁。
17 |
18 | **对象的组成**
19 |
20 | - 方法——函数：过程、动态的
21 | - 属性——变量：状态、静态的
22 |
23 | **类与对象**
24 |
25 | 类：模子
26 | 对象：产品
27 |
28 | var arr=new Array(1,2,3,4,5)
29 |
30 | Array----- 类
31 | arr ----- 对象
32 |
33 | 用构造函数加属性
34 | 用原型加方法
35 |
36 | **继承**
37 |
38 | ```javascript
39 | A.prototype.show=function ()
40 | {
41 | alert(this.abc);
42 | };
43 | for(var i in A.prototype)
44 | {
45 | B.prototype[i]=A.prototype[i];
46 |
47 | }
48 | B.prototype.fn=function(){
49 | alert('abc');
50 | }
51 | var objA=new A();
52 | var objB=new B();
53 |
54 | objA.fn();//error.
55 |
56 | ```
57 |
58 | `call()`:可以改变函数`this`的指向。
59 |
60 | ```javascript
61 | function A(){
62 | this.abc=12;
63 | }
64 |
65 | function B(){
66 | //这里的this指-->new B(),把A的this指向了B的this，本来给A加的属性，变成给B加的属性。
67 | A.call(this);
68 | }
69 | ```
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/2015/12/2015年12月26日.markdown:
--------------------------------------------------------------------------------
1 | #2015年12月26日
2 | ##HTML
3 |
4 | - base
5 |
6 | ``标签为页面上的所有链接规定默认地址或默认目标。
7 | 使浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。
8 |
9 | ```html5
10 |
11 |
12 |
13 |
14 |
15 |
16 | 
17 | 请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：
18 | "http://www.w3school.com.cn/i/eg_smile.gif"
19 |
20 |
21 | W3School
22 | 请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。
23 |
24 |
25 |
26 | ```
27 |
28 | - 文本格式化标签
29 |
30 | |标签| 描述|效果|
31 | |:--:|--|--|
32 | |< b>| 定义粗体文本。|This text is bold|
33 | |< big>| 定义大号字。|This text is big|
34 | |< em>| 定义着重文字。|This text is emphasized|
35 | |< i>| 定义斜体字。|This text is italic|
36 | |< small>| 定义小号字。|This text is small|
37 | |< strong>| 定义加重语气。|This text is strong|
38 | |< sub> | 定义下标字。|subscriptThis text contains|
39 | |< sup> | 定义上标字。|This text containssuperscript|
40 | |< ins> | 定义插入字。|ins|
41 | |< del>| 定义删除字。|del|
42 |
43 | - 计算机输出标签
44 |
45 | |标签| 描述|效果|
46 | |--|--|--|
47 | |< code>| 定义计算机代码。|Computer code
48 | |< kbd> | 定义键盘码。|Keyboard input
49 | |< samp>| 定义计算机代码样本。|Sample text
50 | |< tt> | 定义打字机代码。|Teletype text
51 | |< var> | 定义变量。|Computer variable
52 | |< pre> | 定义预格式文本。||
53 |
54 | ** < pre>**
55 | ```html5
56 |
57 | Text in a pre element
58 | is displayed in a fixed-width
59 | font, and it preserves
60 | both spaces and
61 | line breaks
62 |
63 | ```
64 | **效果**
65 |
66 |
67 | Text in a pre element
68 | is displayed in a fixed-width
69 | font, and it preserves
70 | both spaces and
71 | line breaks
72 |
73 |
74 | >pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
75 | 可以导致段落断开的标签（例如标题、< p> 和 < address> 标签）**绝不能**包含在 < pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
76 |
77 | - 面向对象的编程:关于对象的 属性、方法和事件 的理解
78 |
79 | 把 **属性** 看作是对象的 性质 。
80 | 把 **方法** 看作是对象的 动作 。
81 | 把 **事件** 看作是对象的 响应 。
--------------------------------------------------------------------------------
/2015/12/2015年12月27日.markdown:
--------------------------------------------------------------------------------
1 | #2015年12月27日
2 | ##bootstrap
3 |
4 | ```html5
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
14 |
15 |
16 | Bootstrap 101 Template
17 |
18 |
19 |
20 |
21 |
22 |
23 |
27 |
28 |
29 |
30 | 你好，世界！
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | ```
--------------------------------------------------------------------------------
/2015/12/2015年12月29日.markdown:
--------------------------------------------------------------------------------
1 | #2015年12月29日
2 | ##bootstrap
3 | ###表单控件
4 |
5 | 这两个类名是：
6 |
7 | `input-sm`:让控件比正常大小更小
8 |
9 | `input-lg`:让控件比正常大小更大
10 |
11 | 在Bootstrap框架中同样提供这几种效果。
12 |
13 | - `.has-warning`:警告状态（黄色）
14 |
15 |
16 | - `.has-error`：错误状态（红色）
17 |
18 |
19 | - `.has-success`：成功状态（绿色）
20 |
21 | - `.has-feedback`：添加状态符号的类名，对应不同的状态会自动出现不同的符号。
22 |
23 | - `.help-block`:提示信息以块状显示，并且显示在控件底部。
24 |
25 |
26 | ###按钮
27 |
28 | ```html5
29 |
30 |
31 |
32 | span标签按钮
33 | div标签按钮
34 | ```
35 |
36 | 效果如下：
37 | 
38 |
39 | >建议使用button或a标签来制作按钮。
40 |
41 | 
42 |
43 | - `btn-block`:这个类名可以让按钮充满整个容器。
44 |
45 | **在Bootstrap框架中，要禁用按钮有两种实现方式：**
46 |
47 | 方法1：在标签中添加disabled属性
48 |
49 | 方法2：在元素标签中添加类名“disabled”
50 |
51 | **区别：**
52 |
53 | `.disabled`样式不会禁止按钮的默认行为,而在元素标签中添加`disabled`属性的方法是可以禁止元素的默认行为的。
54 |
55 | ###图像
56 |
57 | - **img-responsive**：响应式图片，主要针对于响应式设计
58 | - **img-rounded**：圆角图片
59 | - **img-circle**：圆形图片
60 | - **img-thumbnail**：缩略图片
61 |
62 | ###图标
63 |
64 | 图标都是使用CSS3的`@font-face`属性配合字体来实现的icon效果。
65 |
66 | 
67 |
68 | 需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加`glyphicon`类名来实现，然后通过伪元素`:before`的`content`属性调取对应的icon编码：
69 |
70 | ```html
71 | .glyphicon {
72 | position: relative;
73 | top: 1px;
74 | display: inline-block;
75 | font-family: 'Glyphicons Halflings';
76 | font-style: normal;
77 | font-weight: normal;
78 | line-height: 1;
79 | -webkit-font-smoothing: antialiased;
80 | -moz-osx-font-smoothing: grayscale;
81 | }
82 |
83 | //伪类
84 | .glyphicon-asterisk:before {
85 | content: "\2a";
86 | }
87 |
88 |
89 | //代码写法
90 |
91 | ```
--------------------------------------------------------------------------------
/2015/12/2015年12月3日.markdown:
--------------------------------------------------------------------------------
1 | #2015年12月3日
2 | ##javascript
3 | 面向对象：不了解原理的情况下，会使用功能。
4 |
5 | 对象：不了解内部结构，知道表面的各种操作。
6 |
7 | Date、getFullYear、Array、sort（）
8 |
9 | 变量：自由的，不属于任何对象
10 |
11 | 属性：属于一个对象
12 |
13 | ```javascript
14 | var arr-[1,2,3,4];
15 | arr.a=12;
16 | arr.show=function(){//添加事件
17 | //方法
18 | alert(arr.a);//12
19 | }
20 |
21 | arr.show();
22 | ```
23 |
24 |
25 | 不能在系统对象中随意添加方法、属性，否则会覆盖已有的方法、属性。
26 |
27 | this:当前发生事件的对象，当前的方法属于谁。
28 |
29 | window.show=function(){};>>>>function show(){};
30 |
31 | ```javascript
32 | var obj=new Object();
33 |
34 | obj.name='blue';
35 | obj.qq='12345'
36 |
37 | obj.showName=function(){
38 | alert(this.name);
39 | }
40 |
41 | obj.showName();
42 |
43 | ```
44 |
45 |
46 | **添加`new`**
47 |
48 | ```javascript
49 | function createPerson(name, qq) //构造函数
50 | {
51 | //系统偷偷替咱们做：
52 | //var this=new Object();
53 |
54 | //加工
55 | this.name=name;
56 | this.qq=qq;
57 |
58 | this.showName=function ()
59 | {
60 | alert('我的名字叫：'+this.name);
61 | };
62 | this.showQQ=function ()
63 | {
64 | alert('我的QQ号：'+this.qq);
65 | };
66 |
67 | //也会偷偷做一些：
68 | //return this;
69 | }
70 |
71 | var obj=new createPerson('blue', '258248832');
72 | var obj2=new createPerson('张三', '45648979879');
73 |
74 | obj.showName();
75 | obj.showQQ();
76 | ```
77 |
78 | 任何函数前面都可以加一个`new` ，系统会在里面自动创建一个新的空白对象`this`，最后会返回出去。
79 |
80 | **原型**
81 |
82 | ```javascript
83 | var arr1=new Array(12,55,34,78,676);
84 | var arr2=new Array(12,33, 1);
85 |
86 | Array.prototype.sum=function () //原型》》》类似CSS中的class
87 | //arr1.sum=function () //行间样式
88 | {
89 | var result=0;
90 |
91 | for(var i=0;i类似于`css`中的`class`方法。
109 |
110 | 类、对象
111 |
112 | 类：模子
113 | 对象：产品（成品）
114 |
115 | var arr=new Array(1,2,3,4);
116 |
117 | Array 类
118 | arr 对象
119 |
120 | 用构造函数加属性
121 | 用原型加方法
122 |
123 |
124 |
125 |
126 |
--------------------------------------------------------------------------------
/2015/12/2015年12月7日.markdown:
--------------------------------------------------------------------------------
1 | #2015年12月7日
2 | ##javascript
3 |
4 | **把面向过程的程序，改写成面向对象的形式**
5 |
6 | - 原则
7 | + 不能有函数套函数，但可以有全局 变量
8 | - 过程
9 | + onload >>>> 构造函数
10 | + 全局变量>>>> 属性
11 | + 函数 >>>> 方法
12 |
13 |
14 | ##json与面向对象
15 |
16 | ```js
17 | var json={
18 | name:'blue',
19 | qq:'23214323',
20 | showName:function(){
21 | alert('我的名字叫：'+this.name);
22 | },
23 | showQQ:function(){
24 | alert("我的QQ号是："+this.qq);
25 | }
26 | };
27 | json.showName();
28 | josn.showQQ();
29 | ```
30 |
31 | **call**
32 | `call`可以改变改变`this`的指向对象；
33 |
34 | ```js
35 | function a(){alert(this)};
36 | a();//object Window
37 | a.call(12);//12
38 | ```
39 |
40 | **原形的继承**
41 |
42 | ```js
43 | for(var i in A.prototype){
44 | B.prototype[i]=A.prototype[i];
45 | }
46 | B.prototype.fn=function(){
47 | alert("abc");
48 | }//函数B特有的方法。
49 | ```
50 |
51 | **本地对象**（非静态对象）
52 | 常用对象：`Object`,`Function`,`Array`,`String`,`Boolean`,`Number`,`Date`,`RegExp`,`Error`。
53 |
54 | **内置对象**（静态对象）
55 |
56 | `Math()`，直接使用它的方法就可以了（例如`Math.ceil()`)。
57 |
58 |
59 | ##BOM
60 | window.open("http://www.163.com");//打开一个窗口
61 |
62 | `write()`：可以识别**标签**。
63 |
64 | `window.navigator.userAgent`:可以显示浏览器信息。
65 |
66 | `window.lacation`:可以显示当前页面的地址，或者可以赋值转到某地址。
67 |
68 | `document.documentElement.clientWidth`:可视区的宽；
69 | `document.documentElement.clientHeight`:可视区的高
70 |
71 | IE:`document.documentElement.scrollTop`:滚动距离（上面隐藏的距离）；
72 |
73 | Chrome:`document.body.scrollTop`:滚动距离（上面隐藏的距离）；
74 |
75 | **系统对话框**
76 |
77 | - 警告框：alert（"内容"),没有返回值。
78 | - 选择框：confirm("提问的内容")，返回`boolean`;
79 | - 输入框：prompt(),返回字符串或null。
80 |
81 |
82 | **widow对象常用事件**
83 |
84 | - onload
85 | - onscroll（滚动事件）
86 | - onresize（调节窗口大小事件）
87 |
--------------------------------------------------------------------------------
/2015/12/img/20100513052116804.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/20100513052116804.jpg
--------------------------------------------------------------------------------
/2015/12/img/20100513052913196.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/20100513052913196.jpg
--------------------------------------------------------------------------------
/2015/12/img/20100513071353897.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/20100513071353897.gif
--------------------------------------------------------------------------------
/2015/12/img/20100513071354656.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/20100513071354656.gif
--------------------------------------------------------------------------------
/2015/12/img/20100513071356624.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/20100513071356624.gif
--------------------------------------------------------------------------------
/2015/12/img/20100513071356825.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/20100513071356825.gif
--------------------------------------------------------------------------------
/2015/12/img/20100515092156201.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/20100515092156201.gif
--------------------------------------------------------------------------------
/2015/12/img/animation-pro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/animation-pro.png
--------------------------------------------------------------------------------
/2015/12/img/bs-btn.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-btn.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-code.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-code.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-form-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-form-1.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-form-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-form-2.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-form-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-form-3.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-form-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-form-4.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-form.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-form.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-hor-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-hor-2.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-hor.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-hor.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-text.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-text.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-title.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-title.jpg
--------------------------------------------------------------------------------
/2015/12/img/bs-tr.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/bs-tr.jpg
--------------------------------------------------------------------------------
/2015/12/img/btn-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/btn-2.jpg
--------------------------------------------------------------------------------
/2015/12/img/btn.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/btn.jpg
--------------------------------------------------------------------------------
/2015/12/img/icon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/icon.jpg
--------------------------------------------------------------------------------
/2015/12/img/repeating-linear-gradient.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/repeating-linear-gradient.png
--------------------------------------------------------------------------------
/2015/12/img/scale-x-y.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/scale-x-y.png
--------------------------------------------------------------------------------
/2015/12/img/scale-x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/scale-x.png
--------------------------------------------------------------------------------
/2015/12/img/scale-y.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/scale-y.png
--------------------------------------------------------------------------------
/2015/12/img/skew-x-y.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/skew-x-y.png
--------------------------------------------------------------------------------
/2015/12/img/skew-x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/skew-x.png
--------------------------------------------------------------------------------
/2015/12/img/skew-y.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/skew-y.png
--------------------------------------------------------------------------------
/2015/12/img/transition-suji.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/transition-suji.png
--------------------------------------------------------------------------------
/2015/12/img/transition-timing-function.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Niefee/My-study-records/61c3f9cab93ae3e0a26a83ef378fa7aeca62587f/2015/12/img/transition-timing-function.png
--------------------------------------------------------------------------------
/2015/8/2015年8月31日.markdown:
--------------------------------------------------------------------------------
1 | #2015年8月31日
2 |
3 | ##jQuery样式
4 |
5 | ```
6 | var myjq=$.noConflict();
7 | ```
8 | 可以为美元符号`$`重新定义一个命名。
9 |
10 | ```
11 | jQ操作css()的方法实例：
12 | 第一种
13 | $("div").css("width","100px");
14 | $("div").css("height","100px");
15 | $("div").css("background","#FF0000");
16 |
17 | 第二种
18 | $("div").css({
19 | width:"100px",
20 | height:"100px",
21 | backgroundColor:"#0f0"s
22 |
23 |
24 | //addClass()方法实例：
25 | $("div").addClass("style1");
26 |
27 | //去除效果
28 | $("dic").removeClass("style1");
29 |
30 | //toggle()是来回切换
31 | $("dic").toggleClass("style1");
32 | ```
33 |
34 | ```
35 | $("obj").height();//返回盒子模型的content.height；
36 | $("obj").innerHeight();//heigt+padding;
37 | $("obj").outHeight();height+padding+boeder;
38 | $("obj").outHeight(true);height+padding+boeder+maigin;
39 | ```
40 |
41 | ##元素遍历
42 |
43 | ###向下遍历
44 | ```
45 | $("#div1").children("a").css({border:"5px solid#FF00FF"});
46 | ```
47 | >遍历`div1`的子元素,加参数` "a" `表示是作用子元素`a `，只遍历一代。
48 |
49 | ---
50 |
51 | ###向上遍历
52 | ```
53 | $("#div1").find("a").css({border:"5px solid #FF00FF"});
54 | ```
55 | >寻找`#div1`后代元素，`find()`必须要参数。
56 |
57 | ---
58 |
59 |
60 | ```
61 | $("a").parent().css({border:"5px solid #0f0"});//父元素，只能一层。
62 | $("a").parents().css({border:"5px solid #0f0"});//所有祖先元素，
63 | $("a").parentsUntil("#div1").css({border:"5px solid #0f0"});//区间之间的元素
64 |
65 | ```
66 | ###同级遍历
67 | ```
68 | $("h4").siblings().css({border:"3px solid red"});
69 | //所有同级元素修改。
70 |
71 | $("h4").next().css({border:"3px solid red"});
72 | //下一个元素修改。
73 |
74 | $("h4").nextAll().css({border:"3px solid red"});
75 | //下面所有元素修改。
76 |
77 | $("h4").nextUntil("h6").css({border:"3px solid red"})
78 | //下面的元素的区间修改。
79 | ```
80 | >prev() 、preAll() 、preUntil()同上。
81 |
82 | ---
83 | ###元素过滤
84 | ```
85 | $("div p").first().css("background-color","red");
86 | //选择第一个。
87 |
88 | $("div p").last().css("background-color","red");
89 | //选择最后一个。
90 |
91 | $("div p").eq(n).css("background-color","red");
92 | //选择符合的第n个。
93 |
94 | $("div p").filter(".pclass").css("background-color","red");
95 | //选择符合要求而且类名是`.pclass`的元素。
96 |
97 | $("div p").not(".pclass").css("background-color","red");
98 | //除去符合要求而且类名是`.pclass`的元素。
99 | ```
100 |
101 |
--------------------------------------------------------------------------------
/2015/9/2015年9月10日.markdown:
--------------------------------------------------------------------------------
1 | #2015年9月10日
2 | ##Angularjs
3 | ###MVC框架
4 | **MVC**全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。
5 |
6 | AngularJS 模块（**Module**） 定义了 AngularJS 应用。
7 | AngularJS 控制器（**Controller**） 用于控制 AngularJS 应用。
8 | ng-app指令定义了应用, ng-controller 定义了控制器。
9 |
10 | ###双向绑定数据
11 | ```
12 |
13 |
14 |
15 | {{uName}}
16 | {{uName}}
17 | {{'UserName:'+uName}}
18 |
19 | {{uName}}
20 |
21 |
22 |
23 | ```
24 | 效果图：
25 | 
26 |
27 | ###Controllers 的使用
28 | ```
29 |
30 |
31 |
32 |
33 |
34 |
35 | angular.module("app",[])
36 | .controller('FirstCtrl',function($scope){
37 | $scope.msg="hello world";
38 | })
39 | ```
40 |
41 | - 定义controller
42 | - 在controller中声明变量
43 | - 使用ng-bind绑定数据并显示controller的作用域
44 |
45 | ### $scope 上声明变量和方法
46 | 示例代码：
47 | ```
48 |
49 |
50 |
51 |
login up
52 |
{{errormsg}}
53 |
8 |
{{realname}}
9 | {{http}}
10 | {{data.msg}}
11 | {{uName}}
12 |
13 |
14 |
15 |
16 |
46 | ```
47 | value的值可以改变。
48 |
49 | ###常用指令
50 |
51 | **ng-show/hide，ng-if**
52 | ```
53 | ![]()
54 | ![]()
55 | ![]()
56 | ```
57 | 显示与否取决于 `inShowImg` 的值是`true`或者`false`。
58 |
59 | **ng-dissbled**
60 | ```
61 |
62 | ```
63 | `.$invalid`是内置表单验证方法。可以在前面的标签中加上`required`为必填项，没有的时候提交会置回。
64 |
65 | **ng-submit**
66 | 可以使用在表单提交时运行函数。
67 |
68 | ###常用指令 ng-repeat 的使用
69 | ```
70 |
71 | {{a.address}}
72 |
73 | ```
74 | 遍历元素。
75 |
--------------------------------------------------------------------------------
/2015/9/2015年9月12日.markdown:
--------------------------------------------------------------------------------
1 | #2015年9月12日
2 | ##Directive 的使用
3 | restrict 的取值可以有三种：
4 |
5 | - A 用于元素的 Attribute，这是默认值
6 | - E 用于元素的名称
7 | - C 用于 CSS 中的 class
8 |
9 | 我们这样定义指令。
10 | ```javascript
11 | var app = angular.module("app", [])
12 | .directive("hello", function () {
13 | var option = {
14 | restrict: "AEC",
15 | template: "Hello, Directive",
16 | };
17 | return option;
18 | })
19 | ```
20 | 由于我们指定了可以用于三种情况下，那么，就可以如下三种形式来使用这个指令
21 |
22 | ```HTML
23 |
24 |
25 |
26 |
27 |
28 |
31 |
32 |
35 | ```
36 |
37 | 查看元素的结果如下：
38 | ```
39 |
40 |
41 | Hello, Directive
42 |
43 |
44 |
45 |
Hello, Directive
46 |
49 |
Hello, Directive
50 |
12 | - Menu One
13 | - Menu two
14 | - Menu Three
15 |
16 |
21 |
22 | jQuery:
23 |
24 | $("#tabsecond li").each(function(index) {
25 | $(this).click(function(){
26 | $("#tabsecond li.tabin").removeClass("tabin");
27 | $(this).addClass("tabin");
28 | })
29 | })
30 | ```
31 |
32 | ---
33 |
34 | - `
`是更长远的使用方式。
35 | - HTML 标签对大小写不敏感。
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/2015/9/2015年9月4日.markdown:
--------------------------------------------------------------------------------
1 | # 2015年9月4日
2 |
3 |
4 | ##jQuery UI
5 |
6 | ###应用
7 |
8 | ```
9 |
10 |
11 | ```
12 | >应用注意顺序。
13 |
14 | ---
15 |
16 | ###交互
17 |
18 | - `draggable()`：拖动；
19 | - `droppable()`：被放置；
20 |
21 | ```
22 | $("#div3").on("drop",function(event,ui){
23 | $("#div3").css("background","rgba(99,288,118,0.7)").text("color change");
24 | })
25 |
26 | ```
27 |
28 |
29 | >绑定放置后的触发函数。
30 |
31 | - `resizable()`：调整大小；
32 |
33 | - `selectable()`:选择某项，然后会添加一个类名`.ui-selected()`。
34 |
35 | - `sortable()`：自动添加类名`.ui-sortable-handle`,可以拖动列表选项的位置。
36 |
37 | ---
38 |
39 | ###HTML框架
40 | ####页面框架
41 | ```
42 |
43 |
51 |
52 | ```
53 | > `` **不能**与标签一起使用 `` 标签。
54 |
55 | ####内联框架
56 |
57 | ```
58 |
76 | ```
77 | >框架内会显示`src`所指引的页面。
78 |
79 | ###URL
80 |
81 | **URL - Uniform Resource Locator**
82 | 当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。
83 | 统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
84 | 网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
85 | ```
86 | scheme://host.domain:port/path/filename
87 | ```
88 | >scheme - 定义因特网服务的类型。最常见的类型是 http
89 | >host - 定义域主机（http 的默认主机是 www）
90 | >domain - 定义因特网域名，比如 w3school.com.cn
91 | >:port - 定义主机上的端口号（http 的默认端口号是 80）
92 | >path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
93 | >filename - 定义文档/资源的名称
94 |
95 | >编者注：URL 的英文全称是 Uniform Resource >Locator，中文也译为“统一资源定位符”。
--------------------------------------------------------------------------------
/2015/9/2015年9月6日.markdown:
--------------------------------------------------------------------------------
1 | # 2015年9月6日
2 |
3 | ##列表
4 | 无序列表符号：
5 | `disc`：实心原点；
6 | `circle`：空心原点；
7 | `square`：方形点；
8 |
9 | 有序列表符号：
10 | `A`:大写字母；
11 | `a`：小写字母；
12 | `I`:大小罗马字母；
13 | `i`：小写罗马字母；
14 |
15 | 自定义列表：
16 | 自定义列表以` ` 标签开始。每个自定义列表项以 `- `开始。每个自定义列表项的定义以`
- `开始。
17 | ```
18 |
19 | - Coffee
20 | - Black hot drink
21 | - Milk
22 | - White cold drink
23 |
24 | ```
25 |
26 | ---
27 | ##表单
28 |
29 | ```
30 |
36 | ```
37 |
38 | ---
39 | ##图片映射
40 | `