diff --git a/404.html b/404.html index 51ef805f..266d4be3 100644 --- a/404.html +++ b/404.html @@ -62,16 +62,13 @@ - - - + - diff --git a/about/index.html b/about/index.html index d2167c3e..43df4ca6 100644 --- a/about/index.html +++ b/about/index.html @@ -66,7 +66,7 @@ - + @@ -261,7 +261,7 @@

联系作者

GitHub：xovel
E-mail：xovel@vip.qq.com

-
  1. Lua为接触了太阳神三国杀的开源代码之后参与了部分界面的实现，采用Lua设计了部分技能效果。 ↩
  2. 按键精灵为大学期间接触地下城与勇士（DNF）游戏时自学并设计完成了的一键换装工具使用的脚本语言，参考了大量脚本大师的代码。 ↩
  3. VBScript为为采用VB6.0设计软件而学习的网页脚本语言，这也为以后的一款基于asp的CMS的二次开发奠定了坚实的基础。 ↩
  4. Javascript，目前最流行的网页脚本语言，拥抱开源，展望未来！ ↩
+
  1. 1.Lua为接触了太阳神三国杀的开源代码之后参与了部分界面的实现，采用Lua设计了部分技能效果。 ↩
  2. 2.按键精灵为大学期间接触地下城与勇士（DNF）游戏时自学并设计完成了的一键换装工具使用的脚本语言，参考了大量脚本大师的代码。 ↩
  3. 3.VBScript为为采用VB6.0设计软件而学习的网页脚本语言，这也为以后的一款基于asp的CMS的二次开发奠定了坚实的基础。 ↩
  4. 4.Javascript，目前最流行的网页脚本语言，拥抱开源，展望未来！ ↩
diff --git a/article/a-business-trip-to-shenzhen.html b/article/a-business-trip-to-shenzhen.html index 99cdbf4a..461b1407 100644 --- a/article/a-business-trip-to-shenzhen.html +++ b/article/a-business-trip-to-shenzhen.html @@ -66,7 +66,7 @@ - + diff --git a/article/a-fragment-code-of-multi-line-string-trim.html b/article/a-fragment-code-of-multi-line-string-trim.html index 0061d51a..cf25cbaf 100644 --- a/article/a-fragment-code-of-multi-line-string-trim.html +++ b/article/a-fragment-code-of-multi-line-string-trim.html @@ -66,7 +66,7 @@ - + @@ -304,18 +304,18 @@

概述

因为一些事情，本人搁置了zmd.js的开发。今天查阅资料时，发现一段代码，针对多行文本进行处理的。

-

代码片段

1
2
3
4
5
function rTrimInputText(text) {
  var rsp = text.match(/^\s*/)[0].length,
  rgx = new RegExp('^\\s{0,' + rsp + '}', 'gm');
  return text.replace(rgx, '');
}
+

代码片段

1
2
3
4
5
function rTrimInputText(text) {
  var rsp = text.match(/^\s*/)[0].length,
  rgx = new RegExp('^\\s{0,' + rsp + '}', 'gm');
  return text.replace(rgx, '');
}

代码来自：https://github.com/showdownjs/showdown/blob/master/dist/showdown.js#L884

代码的功能

去除多行文本中的前置空格。

示例

以下的文本：

-
1
2
3
4
code:
  aaa
    bbb
   ccc
+
1
2
3
4
code:
  aaa
    bbb
   ccc

在使用上面的一段代码处理后得到的结果为：

-
1
2
3
4
result:
aaa
  bbb
 ccc
+
1
2
3
4
result:
aaa
  bbb
 ccc

即去除了每一行前面的两个空格。

应用场景

在针对嵌套的语法中，比如嵌套列表，在针对被嵌套的列表进行的解析的时候，就需要先去掉前面的缩进。这一段代码正好可以满足这个需求。

-
1
2
3
4
5
6
7
8
- list1
  * list1-1
  * list1-2
  * list1-3
- list2
- list3
  + list3-1
  + list3-2
+
1
2
3
4
5
6
7
8
- list1
  * list1-1
  * list1-2
  * list1-3
- list2
- list3
  + list3-1
  + list3-2
diff --git a/article/a-logo-note-for-zte-fpga-design-department.html b/article/a-logo-note-for-zte-fpga-design-department.html index ebd5535a..cc91e45e 100644 --- a/article/a-logo-note-for-zte-fpga-design-department.html +++ b/article/a-logo-note-for-zte-fpga-design-department.html @@ -67,7 +67,7 @@ - + diff --git a/article/a-responsive-menu.html b/article/a-responsive-menu.html index be041b7a..aa0c2b3e 100644 --- a/article/a-responsive-menu.html +++ b/article/a-responsive-menu.html @@ -66,7 +66,7 @@ - + @@ -307,7 +307,7 @@

乍一看这个需求，显得有点奇特瑰丽，但作为一个前端工程师，是可以想出各种方案来进行实现的。下面就详细讲述一下实现的过程。

首先，我们搭建一个菜单的结构代码如下：

-
1
2
3
4
5
6
7
8
9
10
<div class="nav-menu">
  <div class="nav-item">菜单1</div>
  <div class="nav-item">菜单2</div>
  <div class="nav-item">菜单3</div>
  <div class="nav-item">菜单4</div>
  <div class="nav-item">菜单5</div>
  <div class="nav-item">菜单6</div>
  <div class="nav-item">菜单7</div>
  <div class="nav-item">菜单8</div>
</div>
+
1
2
3
4
5
6
7
8
9
10
<div class="nav-menu">
  <div class="nav-item">菜单1</div>
  <div class="nav-item">菜单2</div>
  <div class="nav-item">菜单3</div>
  <div class="nav-item">菜单4</div>
  <div class="nav-item">菜单5</div>
  <div class="nav-item">菜单6</div>
  <div class="nav-item">菜单7</div>
  <div class="nav-item">菜单8</div>
</div>

当然，也可以使用<ul><li>...</li></ul>的方式。这里我们采用div实现子菜单，避免ul/li的自带的样式影响效果。

接着，横向滚动效果的设计与实现。这里分为横向和滚动效果两个。

关于横向布局，网络上有大量的示例参考，使用float，绝对定位，inline，inline-block。如果直接使用的子元素就是行内元素，则无须考虑横向的问题。

@@ -321,17 +321,17 @@

根据需求，在屏幕较小时，菜单为横向滚动，屏幕较大则自适应拉伸。这里就有一个临界值了，那么到底是多大的屏幕才去应用自适应布局呢？这个值是事先预定的。比如这里我们设计了8个菜单项目，经过计算，这8个菜单的长度约摸为440px，我们就用440px作为划分临界值进行自适应布局的设计实现。

CSS3提供了一个叫做Media Query——翻译过来叫做媒体查询——的高级功能。关于媒体查询的详细资料，请参考Media queries - CSS | MDN。

css代码中我们于是就将自适应效果的代码写成这个样子：

-
1
2
3
@media (min-width: 440px) {
  ...
}
+
1
2
3
@media (min-width: 440px) {
  ...
}

里面的min-width: 440px表示花括号里面的代码将在屏幕宽度最小值超过440px时生效。于是，接下来就只剩下一件事情了：拉伸的自适应效果实现。

参考了一下CSS自适应布局，关于自动拉伸的方式，方法众多，比如table、百分比、弹性布局等等。这里我们就使用弹性布局进行实现。关于弹性布局的说明，近期本人会整理一篇文章专门进行解读。

2016.7.28，文章整理完成，敬请参阅：初识Flex布局。

具体代码如下：

-
1
2
3
@media (min-width: 440px) {
  .nav-menu{ display: -webkit-flex; display: flex; justify-content: space-around; }
}
+
1
2
3
@media (min-width: 440px) {
  .nav-menu{ display: -webkit-flex; display: flex; justify-content: space-around; }
}

justify-content: space-around;指定了元素之间的留白方式为等距离并且两边有留白。

那么，这个菜单我们就设计实现完毕了。完整代码如下：

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
body{ background: #282828; margin:0; font-family:'San Francisco','Noto SansCJK','Microsoft Yahei';}

.nav-menu{ height: 40px; line-height: 40px;overflow: hidden; overflow-x: scroll;white-space: nowrap; background: #333; margin-top: 10px;}
.nav-menu::-webkit-scrollbar{display:none;}
.nav-item{display: inline-block; height: 38px; margin:0 5px; overflow: hidden;text-align: center;color: white;}

@media (min-width: 440px) {
  .nav-menu{ display: -webkit-flex; display: flex; justify-content: space-around; }
}
</style>

<div class="nav-menu">
  <div class="nav-item">菜单1</div>
  <div class="nav-item">菜单2</div>
  <div class="nav-item">菜单3</div>
  <div class="nav-item">菜单4</div>
  <div class="nav-item">菜单5</div>
  <div class="nav-item">菜单6</div>
  <div class="nav-item">菜单7</div>
  <div class="nav-item">菜单8</div>
</div>
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
body{ background: #282828; margin:0; font-family:'San Francisco','Noto SansCJK','Microsoft Yahei';}
.nav-menu{ height: 40px; line-height: 40px;overflow: hidden; overflow-x: scroll;white-space: nowrap; background: #333; margin-top: 10px;}
.nav-menu::-webkit-scrollbar{display:none;}
.nav-item{display: inline-block; height: 38px; margin:0 5px; overflow: hidden;text-align: center;color: white;}
@media (min-width: 440px) {
  .nav-menu{ display: -webkit-flex; display: flex; justify-content: space-around; }
}
</style>
<div class="nav-menu">
  <div class="nav-item">菜单1</div>
  <div class="nav-item">菜单2</div>
  <div class="nav-item">菜单3</div>
  <div class="nav-item">菜单4</div>
  <div class="nav-item">菜单5</div>
  <div class="nav-item">菜单6</div>
  <div class="nav-item">菜单7</div>
  <div class="nav-item">菜单8</div>
</div>

演示：一个自适应菜单导航页面

打完收工

diff --git a/article/audit-time-of-beian.html b/article/audit-time-of-beian.html index 089c1d87..f4f1c54a 100644 --- a/article/audit-time-of-beian.html +++ b/article/audit-time-of-beian.html @@ -66,7 +66,7 @@ - + diff --git a/article/book-review-about-the-bio-of-du-yue-sheng.html b/article/book-review-about-the-bio-of-du-yue-sheng.html index b6ae6b5d..4b0f32cc 100644 --- a/article/book-review-about-the-bio-of-du-yue-sheng.html +++ b/article/book-review-about-the-bio-of-du-yue-sheng.html @@ -67,7 +67,7 @@ - + diff --git a/article/code-golf-output-fit-numbers.html b/article/code-golf-output-fit-numbers.html index 883640d9..c2b0932f 100644 --- a/article/code-golf-output-fit-numbers.html +++ b/article/code-golf-output-fit-numbers.html @@ -66,7 +66,7 @@ - + @@ -310,65 +310,65 @@

题目

现有这个一个需求，编程实现OEIS数列A090078。

这里简单介绍一下数列A090078，从基数开始，将序号转为二进制，再将二进制中的连在一起的0进行合并，得到的新的二进制再转换为十进制，便就是该数列的值。

-

示例：

1
2
3
4
5
6
7
8
1 -> 1 -> 1 -> 1
9 -> 1001 -> 101 -> 5
15 ->1111 -> 1111 -> 15
13 ->1101 -> 1101 -> 13
16 -> 10000 -> 10 -> 2
17 -> 10001 -> 101 -> 5
65535 -> 1111111111111111 -> 1111111111111111 -> 65535
65000 -> 1111110111101000 -> 11111101111010 -> 16250

+

示例：

1
2
3
4
5
6
7
8
1 -> 1 -> 1 -> 1
9 -> 1001 -> 101 -> 5
15 ->1111 -> 1111 -> 15
13 ->1101 -> 1101 -> 13
16 -> 10000 -> 10 -> 2
17 -> 10001 -> 101 -> 5
65535 -> 1111111111111111 -> 1111111111111111 -> 65535
65000 -> 1111110111101000 -> 11111101111010 -> 16250

我们姑且把这种转换称之为fit，得到的数值叫做fit number。那么上面提到的需求就可以描述为：

给定一个值，求该值的fit number。

下面就来看看各路大牛各显神通吧！

-

代码实现

Bash + GNU utilities

1
dc -e2o?p|tr -s 0|dc -e2i?p
+

代码实现

Bash + GNU utilities

1
dc -e2o?p|tr -s 0|dc -e2i?p

仅27字节。

-

05AB1E

1
b00¬:C
+

05AB1E

1
b00¬:C

这简直黑科技中的黑科技，仅仅8个字节就实现了。在线测试。

05AB1E这门编程语言，本身也是娱乐品，有兴趣的可以点击访问其项目主页。

-

Jellyfish

1
2
3
4
5
6
7
p
d
# S
,1
*
\dbi
 2
+

Jellyfish

1
2
3
4
5
6
7
p
d
# S
,1
*
\dbi
 2

仅20个字节。又是一款黑魔法，Jellyfish是一款来自于J语言的用Python 3编写的编程语言。

-

JavaScript

1
n=>+`0b${n.toString(2).replace(/0+/g,0)}`
-
1
n=>'0b'+n.toString(2).replace(/0+/g,0)-0
+

JavaScript

1
n=>+`0b${n.toString(2).replace(/0+/g,0)}`
+
1
n=>'0b'+n.toString(2).replace(/0+/g,0)-0

这是ES6的语法，走了个捷径，不能算作是正确答案，因为没有输出语句，看不到结果，不过这里也贴出来。

-

Bash (sed + bc)

1
echo $[2#`bc<<<obase=2\;$1|sed s/00\*/0/g`]
+

Bash (sed + bc)

1
echo $[2#`bc<<<obase=2\;$1|sed s/00\*/0/g`]

MATL

传说中的MATLAB，看看：

-
1
BFFOZtXB
+
1
BFFOZtXB

仅仅只有8个字节

难以置信吧？看看其解读：

-
1
2
3
4
5
6
7
    % Implicitly grab input
B   % Convert decimal to binary
FF  % Create the array [0 0]
O   % Number literal
Zt  % Replaces all [0 0] with [0] (will replace any number of 0's with 0)
XB  % Convert binary to decimal
    % Implicitly display
+
1
2
3
4
5
6
7
    % Implicitly grab input
B   % Convert decimal to binary
FF  % Create the array [0 0]
O   % Number literal
Zt  % Replaces all [0 0] with [0] (will replace any number of 0's with 0)
XB  % Convert binary to decimal
    % Implicitly display

可能你不信，那么请访问在线测试页面。

BoFFOZtXB

o % Convert from logical to double (due to a bug)…有个双精度的BUG

-

Python 3

1
2
import re
f=lambda x:eval(re.sub('0+','0',bin(x)))
+

Python 3

1
2
import re
f=lambda x:eval(re.sub('0+','0',bin(x)))

简单直接并粗暴，50字节的Python解决方案奉上。

-

Perl 6

1
{:2(.base(2)~~{S:g/0+/0/})}
-

解释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-> $_ {
  # convert from base 2
  :2(

    # convert to base 2
    $_.base(2)

    # substitute
    .subst(
      :global,
      / 0+ /,  # all substrings made of 0s
      '0'      # with one 0
    )
  )
}

-

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
my &fit-compress = {:2(.base(2)~~{S:g/0+/0/})}
say fit-compress 1;     # 1
say fit-compress 9;     # 5
say fit-compress 15;    # 15
say fit-compress 13;    # 13
say fit-compress 16;    # 2
say fit-compress 17;    # 5
say fit-compress 65535; # 65535
say fit-compress 65000; # 16250

# number created with ｢:2( [~] <0 1>.roll: 256 )｣
say fit-compress 80794946326210692074631955353531749442835289622757526957697718534769445507500
# 4240335298301026395935723255481812004519990428936918

-

Ruby

1
->n{eval ("0b%b"%n).squeeze ?0}
+

Perl 6

1
{:2(.base(2)~~{S:g/0+/0/})}
+

解释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-> $_ {
  # convert from base 2
  :2(
    # convert to base 2
    $_.base(2)
    # substitute
    .subst(
      :global,
      / 0+ /,  # all substrings made of 0s
      '0'      # with one 0
    )
  )
}

+

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
my &fit-compress = {:2(.base(2)~~{S:g/0+/0/})}
say fit-compress 1;     # 1
say fit-compress 9;     # 5
say fit-compress 15;    # 15
say fit-compress 13;    # 13
say fit-compress 16;    # 2
say fit-compress 17;    # 5
say fit-compress 65535; # 65535
say fit-compress 65000; # 16250
# number created with ｢:2( [~] <0 1>.roll: 256 )｣
say fit-compress 80794946326210692074631955353531749442835289622757526957697718534769445507500
# 4240335298301026395935723255481812004519990428936918

+

Ruby

1
->n{eval ("0b%b"%n).squeeze ?0}

Ruby的解决方案，31字节实现，在线测试。

-

Jelly

1
BŒgḄBFḄ
+

Jelly

1
BŒgḄBFḄ

黑科技无疑，代码里面有叫不出名字的字母。在线测试。

这个Jelly是个什么鬼？请参阅其项目主页：DennisMitchell/jelly。

-

PHP

1
<?=bindec(preg_replace("/0+/",0,decbin($argv[1])));
+

PHP

1
<?=bindec(preg_replace("/0+/",0,decbin($argv[1])));

PHP作为一个有逼格的编程语言，自然不能示弱，51字节实现，虽然跟Javascript一样很尴尬。

-

C

1
int x(int x)=>Convert.ToInt32(Regex.Replace(Convert.ToString(x,2),"0+","0"),2);
-

Java

1
int f(Integer x){return x.valueOf(x.toString(x,2).replaceAll("0+","0"),2);}
+

C

1
int x(int x)=>Convert.ToInt32(Regex.Replace(Convert.ToString(x,2),"0+","0"),2);
+

Java

1
int f(Integer x){return x.valueOf(x.toString(x,2).replaceAll("0+","0"),2);}

java不甘寂寞，也来一份，但也只有语法实现，并不能愉快的直接测试。

-

测试代码：

1
2
3
4
5
6
7
8
public class Fit {
    int f(Integer x){return x.valueOf(x.toString(x,2).replaceAll("0+","0"),2);}

    public static void main(final String... args) {
        final Fit x = new Fit();
        System.out.println(x.f(65000));
    }
}

-

这里还有一份很短的Java代码：

1
interface C{static void main(String[]b){Integer i=0;System.out.print(i.parseInt(i.toString(i.parseInt(b[0]),2).replaceAll("0+","0"),2));}}

-

PowerShell v2+

1
[convert]::ToInt32(([convert]::ToString($args[0],2)-replace'0+',0),2)
+

测试代码：

1
2
3
4
5
6
7
8
public class Fit {
    int f(Integer x){return x.valueOf(x.toString(x,2).replaceAll("0+","0"),2);}
    public static void main(final String... args) {
        final Fit x = new Fit();
        System.out.println(x.f(65000));
    }
}

+

这里还有一份很短的Java代码：

1
interface C{static void main(String[]b){Integer i=0;System.out.print(i.parseInt(i.toString(i.parseInt(b[0]),2).replaceAll("0+","0"),2));}}

+

PowerShell v2+

1
[convert]::ToInt32(([convert]::ToString($args[0],2)-replace'0+',0),2)

年长的PowerShell同样的不敢寂寞，然而这测试过程也是有点无奈：

-
1
2
3
4
5
6
7
8
9
PS C:\Tools\Scripts\golfing> 1,9,15,13,16,17,65535,65000|%{"$_ -> " +(.\output-fit-number.ps1 $_)}
1 -> 1
9 -> 5
15 -> 15
13 -> 13
16 -> 2
17 -> 5
65535 -> 65535
65000 -> 16250
-

Pyth

1
i:.BQ"0+"\02
+
1
2
3
4
5
6
7
8
9
PS C:\Tools\Scripts\golfing> 1,9,15,13,16,17,65535,65000|%{"$_ -> " +(.\output-fit-number.ps1 $_)}
1 -> 1
9 -> 5
15 -> 15
13 -> 13
16 -> 2
17 -> 5
65535 -> 65535
65000 -> 16250
+

Pyth

1
i:.BQ"0+"\02

这什么语言瞅着眼熟的很，然而这并不是Python，该语言的项目主页：Pyth。

-

代码解释：

1
2
3
  .BQ            # Convert input from base 10 to base 2
 :   "0+"\0      # Replace multiple zeroes with single zero
i          2     # Convert back from base 2 to base 10

+

代码解释：

1
2
3
  .BQ            # Convert input from base 10 to base 2
 :   "0+"\0      # Replace multiple zeroes with single zero
i          2     # Convert back from base 2 to base 10

在线测试。

-

Retina

1
2
3
4
5
6
7
8
.+
$*1;
+`(1+)\1
$1;
1;
1
;+
0
+

Retina

1
2
3
4
5
6
7
8
.+
$*1;
+`(1+)\1
$1;
1;
1
;+
0

讲真，我已经目瞪口呆。Retina似乎又是一款自编编程语言。在线测试。

Dyalog APL

Dyalog APL来露个脸，19字节：

-
1
{2⊥⍵/⍨~0 0⍷⍵}2∘⊥⍣¯1
+
1
{2⊥⍵/⍨~0 0⍷⍵}2∘⊥⍣¯1

明显黑科技

-

CJam

1
q~2b1+0a%0a*);2b
+

CJam

1
q~2b1+0a%0a*);2b

CJam，在线测试。

-

代码解释：

1
2
3
4
5
6
7
q~     read and evaluate the input number
2b     convert to base 2 (array of 1s and 0s)
1+     append a 1 to deal with trailing zeros
0a%    split by [0], dropping empty pieces; only chunks of 1s are left
0a*    join by [0]
);     discard the 1 we appended before
2b     convert back from base 2

+

代码解释：

1
2
3
4
5
6
7
q~     read and evaluate the input number
2b     convert to base 2 (array of 1s and 0s)
1+     append a 1 to deal with trailing zeros
0a%    split by [0], dropping empty pieces; only chunks of 1s are left
0a*    join by [0]
);     discard the 1 we appended before
2b     convert back from base 2

后记

抄了这么多的编程语言的实现之后，颇有一种井底之蛙的感觉。还有很多编程语言也可以很简洁的实现该需求，这里就不再继续贴出了，有兴趣的可自行访问该页面的源地址。

全文完~

diff --git a/article/css-animation.html b/article/css-animation.html index 5de479a6..f97f1848 100644 --- a/article/css-animation.html +++ b/article/css-animation.html @@ -66,7 +66,7 @@ - + @@ -348,15 +348,15 @@

selector可以使用多个进行组合，以逗号,分隔。
存在多个百分比一样的声明时，以最后一个为准，前面不论设置了什么都将被忽略最新版规范没有对此进行说明，但有部分浏览器已经考虑对其实现了。
使用!important声明样式时，该声明将被忽略。

格式化语法：

-
1
2
3
@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}
+
1
2
3
@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

兼容性

animation是CSS3中的新特性，浏览器对其的实现并不统一。具体兼容性情形请参阅Can I use

添加浏览器的特定前缀可以使其达到兼容性要求。

诸如-khtml-、-icab-诸君可自行搜索。

在上述提到的所有属性以及@keyframes，可在有必要的情况下添加对应浏览器的私有前缀以实现兼容。

-

示例

1
2
3
4
5
6
7
8
9
/* @keyframes duration | timing-function | delay | 
   iteration-count | direction | fill-mode | play-state | name */
  animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
  animation: 3s linear 1s slidein;

/* @keyframes duration | name */
  animation: 3s slidein;
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p {
  animation-duration: 3s;
  animation-name: slidein;
}      
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
+

示例

1
2
3
4
5
6
7
8
9
/* @keyframes duration | timing-function | delay | 
   iteration-count | direction | fill-mode | play-state | name */
  animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
  animation: 3s linear 1s slidein;
/* @keyframes duration | name */
  animation: 3s slidein;
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p {
  animation-duration: 3s;
  animation-name: slidein;
}      
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

本人制作的一个错视动画:错视动画演示

diff --git a/article/css-flex.html b/article/css-flex.html index 24ed7a06..9134d7ef 100644 --- a/article/css-flex.html +++ b/article/css-flex.html @@ -75,7 +75,7 @@ - + @@ -338,7 +338,7 @@

容器的属性

display

决定容器是否为Flex布局元素的定义属性。

-
1
2
3
.container{
  display: flex; /* or inline-flex */
}
+
1
2
3
.container{
  display: flex; /* or inline-flex */
}

由于浏览器对该规范的实现并不统一，部分浏览器需要添加相应的私有前缀。比如Webkit内核浏览器，加上-webkit-前缀（display: -webkit-flex）。其他类似。

CSS多列属性将在Flex布局中失效。

@@ -346,56 +346,56 @@

flex-direction

决定主轴的方向。

flex-direction

-
1
2
3
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
+
1
2
3
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

指定项目排列换行的方式。

flex-wrap

-
1
2
3
.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
+
1
2
3
.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow

flex-direction和flex-wrap的简写。默认值为row nowrap。

-
1
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
+
1
flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

指定项目在主轴上的对齐方式。

justify-content

-
1
2
3
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
+
1
2
3
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items

指定项目在纵轴上的对齐方式。

align-items

-
1
2
3
.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
+
1
2
3
.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content

定义多根主轴线时的轴线的对齐方式，如果只有一根主轴线，则忽略该值。

align-content

-
1
2
3
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
+
1
2
3
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

项目的属性

order

指定项目的序号。

order

-
1
2
3
.item {
  order: <integer>;
}
+
1
2
3
.item {
  order: <integer>;
}

项目默认按照书写顺序排序。指定序号后按照序号大小从小到大排列。

序号默认值为0，可以设置为负值。

flex-grow

指定项目的放大比例。

flex-grow

-
1
2
3
.item {
  flex-grow: <number>; /* default 0 */
}
+
1
2
3
.item {
  flex-grow: <number>; /* default 0 */
}

默认值为0，表示即使存在剩余空间，也不放大。可以设置为小数，但负值视为无效值。

如果所有项目的flex-grow都为1，则它们将平分剩余空间（如果有的话）。如果一个项目的flex-grow为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink

指定项目的缩小比例。默认值为1。表示在空间不足时，项目进行缩小的程度。设置为0表示在空间不足时不进行缩小。可以设置小数，但负值视为无效值。

flex-basis

指定有剩余空间时项目占据的主轴空间。

-
1
2
3
.item {
  flex-basis: <length> | auto; /* default auto */
}
+
1
2
3
.item {
  flex-basis: <length> | auto; /* default auto */
}

浏览器将根据这个值计算主轴是否有剩余空间。默认值为auto，即项目本来的大小。

flex

flex-grow、flex-shrink、flex-basis三个属性的简写。

-
1
2
3
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
+
1
2
3
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

默认为0 1 auto。该属性有两个快捷值：auto(1 1 auto)和none(0 0 auto)。

建议使用该合并写法。

align-self

单独指定项目的对齐方式。

align-self

-
1
2
3
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
+
1
2
3
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

除了auto表示继承容器的对齐方式，其他值与align-items中的解释一样。

参考资料

diff --git a/article/css-specificity.html b/article/css-specificity.html index 7edda612..f9fc337f 100644 --- a/article/css-specificity.html +++ b/article/css-specificity.html @@ -66,7 +66,7 @@ - + @@ -390,7 +390,7 @@

内联样式的权重值是1000，ID选择器的权重值是100，class选择器的权重值是10，标签选择器的权重值是1。整条规则中的所有选择器权重值相加得到整个样式规则的权重值，数字越大权重值越高。

虽然总结的很不错，但是如果遇到以下的情形，岂不是就懵逼了？

-
1
2
html body article div table tr td p a span i{ color: black; }
.icon-text{ color: white; }
+
1
2
html body article div table tr td p a span i{ color: black; }
.icon-text{ color: white; }

那么问题来了：如果以上两条选择器对应着同一个元素，那么它的颜色到底是什么呢？

@@ -405,8 +405,8 @@

!important CSS Declarations: How and When to Use Them

继承inherite

关于CSS样式继承，由于并非元素本身的样式定义，所以连个优先级都谈不上，其优先级将被直接忽略。

-

“诡异”的伪元素

我们先来看一下一段CSS代码：

1
p:first-letter{color:red;}

-

对应的HTML代码：

1
<p><span style="color:cyan;">A</span>BCDEFG</p>

+

“诡异”的伪元素

我们先来看一下一段CSS代码：

1
p:first-letter{color:red;}

+

对应的HTML代码：

1
<p><span style="color:cyan;">A</span>BCDEFG</p>

那么，这个字母A到底会是什么颜色呢？

伪元素测试：Test 4

diff --git a/article/dom-nodetype.html b/article/dom-nodetype.html index ce8129a0..8a3e249a 100644 --- a/article/dom-nodetype.html +++ b/article/dom-nodetype.html @@ -66,7 +66,7 @@ - + @@ -326,9 +326,9 @@

常量

在DOM4的规范草案中，nodeType属性值2、4、5、6、12均已废弃不再使用。

-

示例

1
2
3
4
5
6
7
8
9
10
11
document.nodeType === Node.DOCUMENT_NODE; // true
document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true

var fragment = document.createDocumentFragment();
fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true

var p = document.createElement("p");
p.textContent = "Once upon a time...";

p.nodeType === Node.ELEMENT_NODE; // true
p.firstChild.nodeType === Node.TEXT_NODE; // true
+

示例

1
2
3
4
5
6
7
8
9
10
11
document.nodeType === Node.DOCUMENT_NODE; // true
document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
var fragment = document.createDocumentFragment();
fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
var p = document.createElement("p");
p.textContent = "Once upon a time...";
p.nodeType === Node.ELEMENT_NODE; // true
p.firstChild.nodeType === Node.TEXT_NODE; // true

以下示例代码检查文档的第一个节点是否为注释；如果不是，则进行一个提示。

-
1
2
3
var node = document.documentElement.firstChild;
if (node.nodeType != Node.COMMENT_NODE)
  console.log("You should comment your code well!");
+
1
2
3
var node = document.documentElement.firstChild;
if (node.nodeType != Node.COMMENT_NODE)
  console.log("You should comment your code well!");

参考文档：