-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
499 lines (333 loc) · 20.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>色拉油的技术博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="靡不有初，鲜克有终">
<meta property="og:type" content="website">
<meta property="og:title" content="色拉油的技术博客">
<meta property="og:url" content="https://github.com/selayou9527/">
<meta property="og:site_name" content="色拉油的技术博客">
<meta property="og:description" content="靡不有初，鲜克有终">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="色拉油的技术博客">
<meta name="twitter:description" content="靡不有初，鲜克有终">
<link rel="icon" href="/favicon.png">
<link rel="stylesheet" href="/css/style.css" type="text/css">
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">色拉油的技术博客</a>
</h1>
<h2 id="subtitle-wrap">
<a href="/" id="subtitle">It always seems impossible until it's done.</a>
</h2>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>
<div id="search-form-wrap">
<form action="http://www.baidu.com/baidu" method="get" accept-charset="utf-8" class="search-form">
<input type="search" name="word" maxlength="20" class="search-form-input" placeholder="Search">
<input type="submit" value="" class="search-form-submit">
<input name=tn type=hidden value="bds">
<input name=cl type=hidden value="3">
<input name=ct type=hidden value="2097152">
<input type="hidden" name="si" value="github.com/selayou9527">
</form>
</div>
</div>
</div>
</header>
<script src="/js/jquery.min.js"></script>
<div class="outer">
<section id="main">
<article id="post-HTML特殊字符" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/11/15/HTML特殊字符/" class="article-date">
<time datetime="2014-11-15T11:15:14.000Z" itemprop="datePublished">Nov 15 2014</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/html/">html</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/11/15/HTML特殊字符/">HTML特殊字符</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>写网页的时候经常为特殊字符头疼，查好久，看到神飞的博客<a href="http://www.qianduan.net/html-special-characters-daquan.html" target="_blank" rel="external">HTML特殊字符大全</a>实在忍不住做一次复制粘贴君</p>
<p>因为可能会出现乱码的原因，特殊字符我们更习惯于使用<em>实体字符</em>表示</p>
<h1 id="注意事项">注意事项</h1>
<ol>
<li>这些字符属于<code>unicode</code>字符集，所以文档要使用<code>utf-8</code></li>
<li>第一列用于HTML使用，需要格式<code>&#8672;</code></li>
<li>第二列用于CSS，需要格式<code>'\21E0'</code></li>
<li>第二列也可以用在JavaScript中，需要格式<code>\u21E0</code></li>
<li>不同的浏览器、不同的终端可能表现不一致，多测试</li>
</ol>
<p class="article-more-link">
<a href="/2014/11/15/HTML特殊字符/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="https://github.com/selayou9527/2014/11/15/HTML特殊字符/" data-id="fzdf9u9c8uxh51sh" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html/">html</a></li></ul>
</footer>
</div>
</article>
<article id="post-EDM响应式" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/11/15/EDM响应式/" class="article-date">
<time datetime="2014-11-15T10:28:26.000Z" itemprop="datePublished">Nov 15 2014</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/css/">css</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/11/15/EDM响应式/">响应式EDM制作</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="客户端支持">客户端支持</h1>
<ol>
<li>响应式本身只有IOS和OS X 的mail客户端支持</li>
<li>Gmail、Yahoo!、outllok.com 不支持引用的外联样式</li>
<li>Gmail及Android Mail客户端对<code>style</code>标签head、body内的都会删除</li>
<li>QQ邮箱会把head中的style标签保存到body，然后删除body外内容，但是同时会删除<code>media query</code>的style内容</li>
</ol>
<p class="article-more-link">
<a href="/2014/11/15/EDM响应式/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="https://github.com/selayou9527/2014/11/15/EDM响应式/" data-id="q2n7x0eoohlezw6g" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/EDM/">EDM</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/css/">css</a></li></ul>
</footer>
</div>
</article>
<article id="post-Sublime打开加入右键菜单" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/11/14/Sublime打开加入右键菜单/" class="article-date">
<time datetime="2014-11-14T08:20:18.000Z" itemprop="datePublished">Nov 14 2014</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/配置/">配置</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/11/14/Sublime打开加入右键菜单/">Sublime打开加入右键菜单</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="windows">windows</h1>
<p>Window比较简单，网上各种方法，基本原理就是往注册表里写入</p>
<pre><code>Windows Registry Editor Version 5.00
<span class="special">[</span>HKEY_CLASSES_ROOT<span class="command">\*</span><span class="command">\shell</span><span class="command">\SubLime</span><span class="special">]</span>
@="edit with Sublime Text"
<span class="special">[</span>HKEY_CLASSES_ROOT<span class="command">\*</span><span class="command">\shell</span><span class="command">\SubLime</span><span class="command">\Command</span><span class="special">]</span>
@="C:<span class="command">\\</span>Program Files<span class="command">\\</span>Sublime Text 3<span class="command">\\</span>sublime_text.exe <span class="command">\"</span><span class="comment">%1\""</span>
<span class="special">[</span>HKEY_CLASSES_ROOT<span class="command">\Directory</span><span class="command">\shell</span><span class="command">\SubLime</span><span class="special">]</span>
@="edit with Sublime Text"
<span class="special">[</span>HKEY_CLASSES_ROOT<span class="command">\Directory</span><span class="command">\shell</span><span class="command">\SubLime</span><span class="command">\Command</span><span class="special">]</span>
@="C:<span class="command">\\</span>Program Files<span class="command">\\</span>Sublime Text 3<span class="command">\\</span>sublime_text.exe -a <span class="command">\"</span><span class="comment">%1\""</span>
</code></pre><p>把安装路径改成自己机器的，然后把文件保存为<code>.reg</code>，双击就可以了</p>
<p class="article-more-link">
<a href="/2014/11/14/Sublime打开加入右键菜单/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="https://github.com/selayou9527/2014/11/14/Sublime打开加入右键菜单/" data-id="thoe16ku6d1hc0iu" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/配置/">配置</a></li></ul>
</footer>
</div>
</article>
<article id="post-七个你可能没注意的CSS单位" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/11/14/七个你可能没注意的CSS单位/" class="article-date">
<time datetime="2014-11-14T01:54:12.000Z" itemprop="datePublished">Nov 14 2014</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/css3/">css3</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/11/14/七个你可能没注意的CSS单位/">你可能没注意的CSS单位</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="扶今追昔">扶今追昔</h1>
<p>CSS中的单位我们经常用到<code>px</code>、<code>pt</code>、<code>em</code>、<code>百分比</code>，px和pt不用多说</p>
<h2 id="em">em</h2>
<p>em是相对单位，参考物是父元素的<code>font-size</code>，具有继承的特点</p>
<p>如果字体大小是16px（浏览器的默认值），那么 <code>1em = 16px</code></p>
<p>这样使用换算很复杂，尤其是和px对应，大家总结出了经验</p>
<pre><code><span class="tag">body</span> <span class="rules">{
<span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">62.5%</span></span></span>;
<span class="rule">}</span></span>
</code></pre><p>这样之后 <code>1em = 10px</code> 在布局等使用的时候好换算了很多</p>
<p class="article-more-link">
<a href="/2014/11/14/七个你可能没注意的CSS单位/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="https://github.com/selayou9527/2014/11/14/七个你可能没注意的CSS单位/" data-id="71qwmxz1qrph9t6g" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/css3/">css3</a></li></ul>
</footer>
</div>
</article>
<article id="post-unicode-bidi" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/11/12/unicode-bidi/" class="article-date">
<time datetime="2014-11-12T04:00:53.000Z" itemprop="datePublished">Nov 12 2014</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/css/">css</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/11/12/unicode-bidi/">direction和unicode-bidi</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>在做多语言页面，接触过阿利伯语、希伯来语的同学肯定了解书写方向的重要性，包括我们五四运动前的书写顺序也是从右到左的。css中 <code>unicode-bidi</code>和<code>direction</code>属性决定了HTML或XML文字渲染方向，两个属性结合使用可以改变文字书写顺序</p>
<p class="article-more-link">
<a href="/2014/11/12/unicode-bidi/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="https://github.com/selayou9527/2014/11/12/unicode-bidi/" data-id="ts0473gj82fvwb7v" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/css/">css</a></li></ul>
</footer>
</div>
</article>
<nav id="page-nav">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="space">…</span><a class="page-number" href="/page/10/">10</a><a class="extend next" rel="next" href="/page/2/">Next »</a>
</nav>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div class="widget tagcloud">
<a href="/tags/EDM/" style="font-size: 12.50px;">EDM</a><a href="/tags/Go/" style="font-size: 11.25px;">Go</a><a href="/tags/MySQL/" style="font-size: 10.00px;">MySQL</a><a href="/tags/Velocity/" style="font-size: 10.00px;">Velocity</a><a href="/tags/apache/" style="font-size: 10.00px;">apache</a><a href="/tags/canvas/" style="font-size: 11.25px;">canvas</a><a href="/tags/css/" style="font-size: 17.50px;">css</a><a href="/tags/css3/" style="font-size: 18.75px;">css3</a><a href="/tags/es6/" style="font-size: 10.00px;">es6</a><a href="/tags/html/" style="font-size: 12.50px;">html</a><a href="/tags/html5/" style="font-size: 11.25px;">html5</a><a href="/tags/jQuery/" style="font-size: 11.25px;">jQuery</a><a href="/tags/javascript/" style="font-size: 20.00px;">javascript</a><a href="/tags/linux/" style="font-size: 10.00px;">linux</a><a href="/tags/nginx/" style="font-size: 12.50px;">nginx</a><a href="/tags/node/" style="font-size: 11.25px;">node</a><a href="/tags/php/" style="font-size: 10.00px;">php</a><a href="/tags/postMessage/" style="font-size: 10.00px;">postMessage</a><a href="/tags/shell/" style="font-size: 10.00px;">shell</a><a href="/tags/动画/" style="font-size: 16.25px;">动画</a><a href="/tags/布局/" style="font-size: 10.00px;">布局</a><a href="/tags/模版引擎/" style="font-size: 13.75px;">模版引擎</a><a href="/tags/正则表达式/" style="font-size: 11.25px;">正则表达式</a><a href="/tags/浏览器/" style="font-size: 10.00px;">浏览器</a><a href="/tags/源码/" style="font-size: 10.00px;">源码</a><a href="/tags/配置/" style="font-size: 15.00px;">配置</a>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Categories</h3>
<div class="widget">
<ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Go/">Go</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Velocity/">Velocity</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/css/">css</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/css3/">css3</a><span class="category-list-count">9</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/es6/">es6</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/html/">html</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/html5/">html5</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/jQuery/">jQuery</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript/">javascript</a><span class="category-list-count">9</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/node/">node</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/shell/">shell</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/源码分析/">源码分析</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/综合/">综合</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/配置/">配置</a><span class="category-list-count">5</span></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Recent Posts</h3>
<div class="widget">
<ul>
<li>
<a href="/2014/11/15/HTML特殊字符/">HTML特殊字符</a>
</li>
<li>
<a href="/2014/11/15/EDM响应式/">响应式EDM制作</a>
</li>
<li>
<a href="/2014/11/14/Sublime打开加入右键菜单/">Sublime打开加入右键菜单</a>
</li>
<li>
<a href="/2014/11/14/七个你可能没注意的CSS单位/">你可能没注意的CSS单位</a>
</li>
<li>
<a href="/2014/11/12/unicode-bidi/">direction和unicode-bidi</a>
</li>
<li>
<a href="/2014/11/11/CSS3 filter/">CSS3 滤镜</a>
</li>
<li>
<a href="/2014/11/10/CSS打字效果/">CSS 实现打字效果</a>
</li>
<li>
<a href="/2014/11/10/CSS3 timing方法/">Transition Timing Functions</a>
</li>
<li>
<a href="/2014/11/07/Outlook HTML渲染引擎/">Outlook HTML渲染引擎</a>
</li>
<li>
<a href="/2014/11/07/CSS will-change 属性/">CSS will-change 属性</a>
</li>
<li>
<a href="/2014/11/02/EDM制作要点/">EDM制作要点</a>
</li>
<li>
<a href="/2014/10/28/Go (2)：关键字、变量、类型/">Go (2)：关键字、变量、类型</a>
</li>
<li>
<a href="/2014/10/26/前nginx后Apache＋Node反向代理/">前nginx后Apache＋Node反向代理</a>
</li>
<li>
<a href="/2014/10/26/Mac下nginx配置PHP/">Mac nginx PHP支持</a>
</li>
<li>
<a href="/2014/10/26/Mac MySQL使用/">Mac MySQL使用</a>
</li>
<li>
<a href="/2014/10/26/Mac下nginx监听80端口开机自启/">Mac nginx 80端口开机自启</a>
</li>
<li>
<a href="/2014/10/22/handlebars语法/">handlebars语法</a>
</li>
<li>
<a href="/2014/10/21/Velocity语法/">Velocity语法</a>
</li>
<li>
<a href="/2014/10/20/GO(1):hello world!/">Go (1)：Hello World!</a>
</li>
<li>
<a href="/2014/10/19/负边距在布局中的使用/">负边距在布局中的使用</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2014 色拉油<br>
Powered by <a href="http://zespia.tw/hexo/" target="_blank">Hexo</a>
.
Theme by <a href="https://github.com/xiangming/landscape-plus" target="_blank">Landscape+</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="/js/script.js" type="text/javascript"></script>
</div>
</body>
</html>