-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
421 lines (266 loc) · 17.9 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
<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8">
<title>anjia</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1">
<meta name="author" content="anjia">
<meta name="description" content="Web前端开发工程师">
<link rel="alternate" href="http://anjia.github.io/" title="anjia" type="application/atom+xml">
<link rel="icon" href="/img/favicon.ico">
<link rel="apple-touch-icon" href="/img/pacman.jpg">
<link rel="apple-touch-icon-precomposed" href="/img/pacman.jpg">
<link rel="stylesheet" href="/css/style.css" type="text/css">
</head>
<body>
<header>
<div>
<div id="textlogo">
<h1 class="site-name"><a href="/" title="anjia">anjia</a></h1>
<h2 class="blog-motto">静下心，慢慢来</h2>
</div>
<div class="navbar"><a class="navbutton navmobile" href="#" title="菜单">
</a></div>
<nav class="animated">
<ul>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/categories">分类</a></li>
<li><a href="/archives">归档</a></li>
<li><a href="/tags">标签</a></li>
<li>
<form class="search" action="//google.com/search" method="get" accept-charset="utf-8">
<label>Search</label>
<input type="text" id="search" name="q" autocomplete="off" maxlength="20" placeholder="Search" />
<input type="hidden" name="q" value="site:anjia.github.io">
</form>
</li>
</ul>
</nav>
</div>
</header>
<div id="container">
<div id="main">
<section class="post" itemscope itemprop="blogPost">
<a href="/2016/06/24/tool_chrome_devtools_overview/" title="【译】Chrome DevTools 概况" itemprop="url" class="brief">
<h1 itemprop="name">【译】Chrome DevTools 概况</h1>
<p itemprop="description" >原文：https://developer.chrome.com/devtools
DevTools 是 Developer Tools 的简称，它是一套内置在谷歌 Chrome 里的网页制作（web authoring）和调试的工具。该 DevTools 可以让 web 开发者深</p>
<time datetime="2016-06-24T13:53:17.000Z" itemprop="datePublished">2016-06-24</time>
</a>
</section>
<section class="post" itemscope itemprop="blogPost">
<a href="/2016/06/24/tool_chromeDevelper/" title="【译】Chrome 开发者" itemprop="url" class="brief">
<h1 itemprop="name">【译】Chrome 开发者</h1>
<p itemprop="description" >原文：https://developer.chrome.com
开发工具
基本知识
概况
开发工作流
使用 Console
提示和技巧
扩展资源
使用工具
审查元素 &amp; 调整
调试 JavaScript
设备模式 &amp; 手机模拟
Android 远程调试
用 </p>
<time datetime="2016-06-24T13:35:01.000Z" itemprop="datePublished">2016-06-24</time>
</a>
</section>
<section class="post" itemscope itemprop="blogPost">
<a href="/2016/06/08/translate_img/" title="【译】img 标签" itemprop="url" class="brief">
<h1 itemprop="name">【译】img 标签</h1>
<p itemprop="description" >翻译于 2015.11.1
原文-英文：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
译文-中文：https://developer.mozilla.org/zh-CN/docs/Web/HTML/El</p>
<time datetime="2016-06-08T12:45:21.000Z" itemprop="datePublished">2016-06-08</time>
</a>
</section>
<section class="post" itemscope itemprop="blogPost">
<a href="/2016/05/28/css_base64/" title="base64" itemprop="url" class="brief">
<h1 itemprop="name">base64</h1>
<p itemprop="description" >博主声明：base64 是一个月前查的知识点，今日才得空整理，信息被遗忘的差不多了。之所以还要记录，是因为当时的心情依旧是记忆犹新啊，就是“我嘞个擦，原来这是一个2009-2010年间的话题，而我，却是6年后才来带着好奇查阅的。作为FE，简直太不合格了”。
所以，本篇就是来单纯扯</p>
<time datetime="2016-05-28T10:12:41.000Z" itemprop="datePublished">2016-05-28</time>
</a>
</section>
<section class="post" itemscope itemprop="blogPost">
<a href="/2016/05/28/tool_shell/" title="shell 编程" itemprop="url" class="brief">
<h1 itemprop="name">shell 编程</h1>
<p itemprop="description" >Linux 下有很多不同的 shell，但我们通常使用 bash (bourne again shell) 进行 shell 编程，因为 bash 是免费的，且易用。下面用到的例子，都是用 bash。
程序的第一行必须是 #!/bin/sh
1234567#!/bin/sh# #</p>
<time datetime="2016-05-28T10:10:41.000Z" itemprop="datePublished">2016-05-28</time>
</a>
</section>
<section class="post" itemscope itemprop="blogPost">
<a href="/2016/05/28/tool_git/" title="Git" itemprop="url" class="brief">
<h1 itemprop="name">Git</h1>
<p itemprop="description" >GitHub 的核心是一个开源的版本控制系统，即 Git，Git 负责你本地电脑和 GitHub 之间的所有相关事情。Git 允许多人同时操作一份代码，且不用担心相互覆盖，它是一个分布式的版本控制系统，每一个 Git commit 都是用邮件地址来标识一个用户。
资料
Git 的</p>
<time datetime="2016-05-28T07:57:01.000Z" itemprop="datePublished">2016-05-28</time>
</a>
</section>
<section class="post" itemscope itemprop="blogPost">
<a href="/2016/05/19/tool_github/" title="GitHub" itemprop="url" class="brief">
<h1 itemprop="name">GitHub</h1>
<p itemprop="description" >以前玩 GitHub，懵懵懂懂啊朦朦胧胧，就记得，中间环节但凡求助于他人，即便最后弄好了，自己其实还是有些稀里糊涂。本周有项任务：用脚本定期从 GitHub上下载最新代码。于是，就借此机会，把这里搞清楚些。
你是否有过这样的经历：某次，自己在某处瞎转悠了一个多小时死都没找到目的地</p>
<time datetime="2016-05-19T13:48:52.000Z" itemprop="datePublished">2016-05-19</time>
</a>
</section>
<section class="post" itemscope itemprop="blogPost">
<a href="/2016/02/04/webAscii/" title="ASCII 码对照表" itemprop="url" class="brief">
<h1 itemprop="name">ASCII 码对照表</h1>
<p itemprop="description" >ASCII 码：共1个字节，最高位是0共占7位，从0000 0000 到 0111 1111，共128个字符
第0~32号，共33个字符，是不可见的，是控制字符+通讯专用的。控制字符（换行、回车、换页、删除）、通讯专用（文头、文尾、确认）。第32个字符是空格，即x20第33~12</p>
<time datetime="2016-02-04T09:36:59.000Z" itemprop="datePublished">2016-02-04</time>
</a>
</section>
<section class="post" itemscope itemprop="blogPost">
<a href="/2015/12/31/css_selector_attr/" title="CSS 属性选择器" itemprop="url" class="brief">
<h1 itemprop="name">CSS 属性选择器</h1>
<p itemprop="description" >7个CSS属性选择器
CSS 的属性选择器：在 CSS 中，用指定的属性去选择 HTML 元素。
12345678910[href] //带有指定属性的元素[type=text] //指定属性=指定值 [id*=mohe] //包含指定值，字符串的包含[class~=g-moh</p>
<time datetime="2015-12-31T12:37:52.000Z" itemprop="datePublished">2015-12-31</time>
</a>
</section>
<section class="post" itemscope itemprop="blogPost">
<a href="/2015/12/30/jq_selector/" title="jQuery 中的选择器" itemprop="url" class="brief">
<h1 itemprop="name">jQuery 中的选择器</h1>
<p itemprop="description" >基础选择器
1234567$('*') //通配符 $('.class')$('#id')$('tag') $('selector1, selector2, selector2') //多个选择器
属性选择器
首先，在 jQuery 中使用属性选择器（attribute</p>
<time datetime="2015-12-30T02:57:57.000Z" itemprop="datePublished">2015-12-30</time>
</a>
</section>
<nav id="page-nav" class="clearfix">
<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/8/">8</a><a class="extend next" rel="next" href="/page/2/">Next »</a>
</nav>
</div>
<div class="openaside"><a class="navbutton" href="#" title="显示侧边栏"></a></div>
<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="隐藏侧边栏"></a></div>
<aside class="clearfix">
<div class="categorieslist">
<p class="asidetitle">分类目录</p>
<ul>
<li>
<a href="/categories/CSS/" title="CSS">CSS (11)</a></li>
<li>
<a href="/categories/FE/" title="FE">FE (3)</a></li>
<li>
<a href="/categories/HTML/" title="HTML">HTML (9)</a></li>
<li>
<a href="/categories/Web/" title="Web">Web (4)</a></li>
<li>
<a href="/categories/blog/" title="blog">blog (4)</a></li>
<li>
<a href="/categories/jQuery/" title="jQuery">jQuery (5)</a></li>
<li>
<a href="/categories/javascript/" title="javascript">javascript (17)</a></li>
<li>
<a href="/categories/node/" title="node">node (4)</a></li>
<li>
<a href="/categories/tool/" title="tool">tool (11)</a></li>
<li>
<a href="/categories/后端/" title="后端">后端 (3)</a></li>
<li>
<a href="/categories/实战/" title="实战">实战 (3)</a></li>
<li>
<a href="/categories/实战知识点/" title="实战知识点">实战知识点 (3)</a></li>
<li>
<a href="/categories/插件/" title="插件">插件 (1)</a></li>
</ul>
</div>
<div class="archiveslist">
<p class="asidetitle"><a href="/archives">文章归档</a></p>
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/06">June 2016</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/05">May 2016</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/02">February 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/12">December 2015</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/11">November 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/10">October 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/09">September 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08">August 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/07">July 2015</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/06">June 2015</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/05">May 2015</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/04">April 2015</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03">March 2015</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/02">February 2015</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/01">January 2015</a><span class="archive-list-count">10</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11">November 2014</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/09">September 2014</a><span class="archive-list-count">8</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/08">August 2014</a><span class="archive-list-count">12</span></li></ul>
</div>
<div class="tagcloudlist">
<p class="asidetitle">标签云</p>
<div class="tagcloudlist clearfix">
<a href="/tags/CSS/" style="font-size: 18.89px;">CSS</a><a href="/tags/Chrome/" style="font-size: 11.11px;">Chrome</a><a href="/tags/Emmet/" style="font-size: 10.00px;">Emmet</a><a href="/tags/Git/" style="font-size: 11.11px;">Git</a><a href="/tags/GitHub/" style="font-size: 11.11px;">GitHub</a><a href="/tags/HTML/" style="font-size: 17.78px;">HTML</a><a href="/tags/HTML5/" style="font-size: 10.00px;">HTML5</a><a href="/tags/SSH-keys/" style="font-size: 10.00px;">SSH keys</a><a href="/tags/Sublime/" style="font-size: 10.00px;">Sublime</a><a href="/tags/bash/" style="font-size: 10.00px;">bash</a><a href="/tags/canvas/" style="font-size: 10.00px;">canvas</a><a href="/tags/chrome/" style="font-size: 10.00px;">chrome</a><a href="/tags/debug/" style="font-size: 10.00px;">debug</a><a href="/tags/fe/" style="font-size: 12.22px;">fe</a><a href="/tags/hexo/" style="font-size: 10.00px;">hexo</a><a href="/tags/jQuery/" style="font-size: 15.56px;">jQuery</a><a href="/tags/javascript/" style="font-size: 20.00px;">javascript</a><a href="/tags/js高级程序设计/" style="font-size: 12.22px;">js高级程序设计</a><a href="/tags/markdown/" style="font-size: 10.00px;">markdown</a><a href="/tags/node/" style="font-size: 10.00px;">node</a><a href="/tags/shell/" style="font-size: 10.00px;">shell</a><a href="/tags/shortcut-key/" style="font-size: 10.00px;">shortcut key</a><a href="/tags/svn/" style="font-size: 10.00px;">svn</a><a href="/tags/todo/" style="font-size: 14.44px;">todo</a><a href="/tags/web/" style="font-size: 12.22px;">web</a><a href="/tags/实战/" style="font-size: 15.56px;">实战</a><a href="/tags/对象/" style="font-size: 12.22px;">对象</a><a href="/tags/插件/" style="font-size: 13.33px;">插件</a><a href="/tags/杂谈/" style="font-size: 11.11px;">杂谈</a><a href="/tags/模块化/" style="font-size: 15.56px;">模块化</a><a href="/tags/模板/" style="font-size: 12.22px;">模板</a><a href="/tags/正则/" style="font-size: 10.00px;">正则</a><a href="/tags/笔记/" style="font-size: 12.22px;">笔记</a><a href="/tags/编码/" style="font-size: 12.22px;">编码</a><a href="/tags/翻译/" style="font-size: 16.67px;">翻译</a><a href="/tags/读书笔记/" style="font-size: 12.22px;">读书笔记</a><a href="/tags/跨域/" style="font-size: 12.22px;">跨域</a><a href="/tags/转义/" style="font-size: 10.00px;">转义</a>
</div>
</div>
<div class="linkslist">
<p class="asidetitle">友情链接</p>
<a href="http://www.75team.com/" target="_blank">奇舞团</a>
<a href="https://www.imququ.com/" target="_blank">JerryQu 的小站</a>
<a href="http://www.welefen.com/" target="_blank">welefen的随笔</a>
<a href="http://chevion.github.io/" target="_blank">chevionlu</a>
<a href="http://www.cnblogs.com/jkisjk/" target="_blank">JKisJK</a>
<a href="http://www.ivershuo.com/2014/04/fastcgi_on_nodejs/" target="_blank">阿肆</a>
<a href="http://hszy00232.blog.163.com/blog" target="_blank">冰果</a>
<a href="http://www.cnblogs.com/snadn/category/485724.html" target="_blank">snadn</a>
<a href="http://jiaolonghuang.github.io/" target="_blank">JiaoLong_H</a>
<a href="http://hujunil.github.io/" target="_blank">Hujun</a>
<a href="http://my.oschina.net/u/1589874/blog?catalog=472902" target="_blank">Sunny_lyy</a>
<a href="http://blog.justoffline.com/index.html" target="_blank">少说绝对</a>
<a href="http://www.zhangxinxu.com/wordpress/" target="_blank">张鑫旭</a>
<a href="http://www.aoao.org.cn/blog/" target="_blank">嗷嗷</a>
<a href="http://hikejun.com/blog/" target="_blank">Kejun</a>
<a href="http://www.ruanyifeng.com/blog/archives.html" target="_blank">阮一峰</a>
<a href="http://melonh.com/" target="_blank">Melon瓜瓜</a>
</div>
</aside>
</div>
</div>
<footer><div id="footer" >
<p class="copyright">© 2016 -
<a href="http://anjia.github.io" target="_blank" title="anjia">anjia</a>
- Powered by hexo and Theme by Pacman
</p>
</div>
</footer>
<script src="/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.navbar').click(function(){
$('header nav').toggleClass('shownav');
});
var myWidth = 0;
function getSize(){
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
} else if( document.documentElement && document.documentElement.clientWidth) {
myWidth = document.documentElement.clientWidth;
};
};
var m = $('#main'),
a = $('#asidepart'),
c = $('.closeaside'),
o = $('.openaside');
$(window).resize(function(){
getSize();
if (myWidth >= 1024) {
$('header nav').removeClass('shownav');
}else
{
m.removeClass('moveMain');
a.css('display', 'block').removeClass('fadeOut');
o.css('display', 'none');
}
});
c.click(function(){
a.addClass('fadeOut').css('display', 'none');
o.css('display', 'block').addClass('fadeIn');
m.addClass('moveMain');
});
o.click(function(){
o.css('display', 'none').removeClass('beforeFadeIn');
a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');
m.removeClass('moveMain');
});
$(window).scroll(function(){
o.css("top",Math.max(80,260-$(this).scrollTop()));
});
});
</script>
</body>
</html>