-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
715 lines (427 loc) · 32.2 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
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
<!DOCTYPE html>
<html>
<head>
<!-- hexo-inject:begin --><!-- hexo-inject:end --><meta charset="utf-8">
<title>喵窝</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="前端, 设计, 用户体验, UX, UI, CSS">
<meta name="description" content="想要做UX的全栈设计师的部落格，涉猎广泛而内含大量技术文考据文还有游记请慢慢品尝。">
<meta property="og:type" content="website">
<meta property="og:title" content="喵窝">
<meta property="og:url" content="http://hikarievo.me/index.html">
<meta property="og:site_name" content="喵窝">
<meta property="og:description" content="想要做UX的全栈设计师的部落格，涉猎广泛而内含大量技术文考据文还有游记请慢慢品尝。">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="喵窝">
<meta name="twitter:description" content="想要做UX的全栈设计师的部落格，涉猎广泛而内含大量技术文考据文还有游记请慢慢品尝。">
<link rel="alternate" href="/atom.xml" title="喵窝" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-76857389-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics --><!-- hexo-inject:begin --><!-- hexo-inject:end -->
</head>
<body>
<!-- hexo-inject:begin --><!-- hexo-inject:end --><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">您在本站所读到的每一个字，都是我家猫在键盘上踩出来的</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="/">首页</a>
<a class="main-nav-link" href="/archives">过往文章</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="搜索"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://hikarievo.me"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-experience-required" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/05/13/experience-required/" class="article-date">
<time datetime="2017-05-13T13:54:12.000Z" itemprop="datePublished">2017-05-13</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/05/13/experience-required/">用户体验经验须知</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p><img src="http://7qnahw.com1.z0.glb.clouddn.com/IMG_20170510_193623_mix01.jpg" alt="用户体验设计 本质、策略与经验"><br>当编辑在群里问谁有兴趣翻译一本书的时候，我还没想过事情会变成这样。神坑腰斩何其多，更别提什么朝三暮四，或者昨天还是负责人，今天已经在英国喂鸽子的故事。所以这本书最终能到我手上的时候，我是有点不敢相信的…</p>
<p>但无论如何隆重介绍一下还是需要的：《用户体验设计 本质、策略与经验》现已上市，各大网店（大概）有售，买不到可以看<a href="http://www.epubit.com.cn/book/details/4317">这里</a>。这是一本<s>男默女泪</s>编辑不太想卖的书，因为看得人太多，那些什么经验分享教你做事的书就卖不出去了……<br>
<p class="article-more-link">
<a href="/2017/05/13/experience-required/#more">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hikarievo.me/2017/05/13/experience-required/" data-id="cj38edt67000xigxeiwtn83va" class="article-share-link">分享</a>
<a href="http://hikarievo.me/2017/05/13/experience-required/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/推荐/">推荐</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/看书/">看书</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/设计/">设计</a></li></ul>
</footer>
</div>
</article>
<article id="post-draw-pure-css-hexagon-radar-chart" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/02/02/draw-pure-css-hexagon-radar-chart/" class="article-date">
<time datetime="2017-02-02T08:05:50.000Z" itemprop="datePublished">2017-02-02</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/02/02/draw-pure-css-hexagon-radar-chart/">只用CSS绘制雷达图</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>最近做游戏资料经常要描述六围，现在比较流行的做法就是用六围图，但是资料库系统限制导致外挂JS库或者JS代码比较麻烦，何况秉承着能用CSS绝不用JS的思路，于是想着看能不能用CSS做六围图…</p>
<p><img src="http://www.nintendo.com.hk/pressrelease/images/20170124_pokemon_bank_update/vc_poke_transfer_ss4.jpg" alt="就不告诉你是什么游戏"></p>
<p>做出来差不多就是这样了：</p>
<p><p data-height="265" data-theme-id="light" data-slug-hash="KaowyW" data-default-tab="result" data-user="hikarievo" data-embed-version="2" data-pen-title="Pure CSS hexagon radar chart" class="codepen">在<a href="http://codepen.io">CodePen</a>上查看<a href="http://codepen.io/hikarievo/pen/KaowyW/">纯CSS六边形雷达图</a>(<a href="http://codepen.io/hikarievo">@hikarievo</a>)。</p></p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<p>顺带一提，这玩意儿的学名叫雷达图…我搜什么六边形图标啊六围图啊都搜不到快急死我了……<br>
<p class="article-more-link">
<a href="/2017/02/02/draw-pure-css-hexagon-radar-chart/#more">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hikarievo.me/2017/02/02/draw-pure-css-hexagon-radar-chart/" data-id="cj38edt66000vigxex92dlr32" class="article-share-link">分享</a>
<a href="http://hikarievo.me/2017/02/02/draw-pure-css-hexagon-radar-chart/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/心得/">心得</a></li></ul>
</footer>
</div>
</article>
<article id="post-changing-display-order-by-css" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/01/26/changing-display-order-by-css/" class="article-date">
<time datetime="2017-01-26T09:59:48.000Z" itemprop="datePublished">2017-01-26</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/01/26/changing-display-order-by-css/">使用CSS改变DOM元素顺序</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>时不时，偶尔，会有一些神奇的需求。在制作RWD页面的时候，偶尔会遇到元素重排序的问题。我之前遇到的情况，是PC版中，导航栏菜单横向排列，搜索框在最右侧；在移动版中，搜索栏跑到菜单的最上面，然后菜单纵向排列。非常典型的菜单处理策略。</p>
<p> | 菜单1 | 菜单2 | ··· | 菜单n | 搜索栏 |</p>
<p>变成</p>
<p> | 搜索栏 |<br> | 菜单1 |<br> | 菜单2 |<br> …</p>
<p>你准备怎么处理？<br>
<p class="article-more-link">
<a href="/2017/01/26/changing-display-order-by-css/#more">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hikarievo.me/2017/01/26/changing-display-order-by-css/" data-id="cj38edt62000tigxer3mvla3e" class="article-share-link">分享</a>
<a href="http://hikarievo.me/2017/01/26/changing-display-order-by-css/#disqus_thread" class="article-comment-link">留言</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>
<article id="post-learning-f2e-at-udacity" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/01/12/learning-f2e-at-udacity/" class="article-date">
<time datetime="2017-01-12T15:13:00.000Z" itemprop="datePublished">2017-01-12</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/01/12/learning-f2e-at-udacity/">如何快速学习前端</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>前阵子在找资料的时候，从Google Fundamental网站发现一个学习链接，点过去以后发现居然是一个中文网站，而且课程提供方居然是像Google、Facebook、Amazon这种级别的厂商。因为有免费试听，于是就开了一个前端学位，然后发现免费试听只有一周时间…于是就疯狂看了一周……</p>
<p>结论而言…这是我见过的网校（加上我听说过的培训班中）性价比最高的…这个名为<strong><a href="https://cn.udacity.com/">优达学城</a></strong>的网站，实际上是一个国际化的计算机技能培训（网校）……2017年的第一篇文，居然是没给广告费的网校广告（捂脸……），下面说一下这个网站的优点：<br>
<p class="article-more-link">
<a href="/2017/01/12/learning-f2e-at-udacity/#more">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hikarievo.me/2017/01/12/learning-f2e-at-udacity/" data-id="cj38edt61000rigxea4ailhry" class="article-share-link">分享</a>
<a href="http://hikarievo.me/2017/01/12/learning-f2e-at-udacity/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/初心者/">初心者</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/推荐/">推荐</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/杂谈/">杂谈</a></li></ul>
</footer>
</div>
</article>
<article id="post-detailed-introduction-of-background-properties" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/05/21/detailed-introduction-of-background-properties/" class="article-date">
<time datetime="2016-05-21T07:03:35.000Z" itemprop="datePublished">2016-05-21</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/05/21/detailed-introduction-of-background-properties/">CSS background 属性使用手册</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p><code>background</code> 属性是CSS中用于设置元素背景的属性，最简单的<code>background</code>属性名，是针对背景若干设定的合并简写，最早的CSS只能使用单一背景图片，而在现在却可以设置多个背景图片。而不用图片的话，最早的background只能使用纯色填充，现在却可以使用各种渐变效果。现在所用的模型来自于CSS Backgrounds and Borders Module Level 3所定义的规范，主要分成了8个子属性。<br>
<p class="article-more-link">
<a href="/2016/05/21/detailed-introduction-of-background-properties/#more">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hikarievo.me/2016/05/21/detailed-introduction-of-background-properties/" data-id="cj38edt5z000oigxew3erhyza" class="article-share-link">分享</a>
<a href="http://hikarievo.me/2016/05/21/detailed-introduction-of-background-properties/#disqus_thread" class="article-comment-link">留言</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>
<article id="post-from-newbie-to-veteran" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/02/from-newbie-to-veteran/" class="article-date">
<time datetime="2016-04-02T06:20:25.000Z" itemprop="datePublished">2016-04-02</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/02/from-newbie-to-veteran/">从菜鸟到行家，从面条说起</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>这几天在给公司页面加新功能，前前后后改了三四天。我司的代码混乱不堪的程度，让“找到需要改的部分”都成为了一项技能，对，我时不时就会收到帮忙找文件的请求……添功能本身不是件麻烦事，大部分的时间用来整理代码结构和逻辑。我把其中一部分面条截图给小伙伴，相顾无言，唯有泪千行。</p>
<p>花了一整天把功能整理好，重写了方法，回头想了想，我大概又 Level Up 了。如果说美工和设计师，打字工和程序员有什么质的区别，可能很多人都会说，学习和思考。学什么，想什么，如何判断哪些东西是自己要学的，如何判断哪些东西是自己该想的，却鲜少有人提及。我也只是想站在设计师与程序员的夹缝地带聊一聊这些事。</p>
<p class="article-more-link">
<a href="/2016/04/02/from-newbie-to-veteran/#more">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hikarievo.me/2016/04/02/from-newbie-to-veteran/" data-id="cj38edt5y000migxec7lb4buy" class="article-share-link">分享</a>
<a href="http://hikarievo.me/2016/04/02/from-newbie-to-veteran/#disqus_thread" class="article-comment-link">留言</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-leaner-responsive-images-with-client-hints" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/18/leaner-responsive-images-with-client-hints/" class="article-date">
<time datetime="2016-03-17T16:28:49.000Z" itemprop="datePublished">2016-03-18</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/18/leaner-responsive-images-with-client-hints/">【译】使用客户端查询托管响应式图片</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>很多人都对<strong>响应式图片</strong>略有耳闻，至少也从经验者那里学到过一二。毋庸置疑，<a href="https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/">响应式图片</a>标准是网络的伟大胜利。然而不少线报都表示响应式图片<strong>不怎么好看</strong>。<br>好消息是我们能解决这个问题！不用向JavaScript扔去挑战，只要请服务器伸出援手。输入<strong>Client Hints（客户端提示）</strong>，Google牵头的这项技术已经可以在浏览器（Chrome和Opera）上使用，而且非常好用。我们来看一下Client Hints是如何减少图像体积与冗长的响应式图片标记的。<br>
<p class="article-more-link">
<a href="/2016/03/18/leaner-responsive-images-with-client-hints/#more">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hikarievo.me/2016/03/18/leaner-responsive-images-with-client-hints/" data-id="cj38edt5w000jigxeg1p3t94g" class="article-share-link">分享</a>
<a href="http://hikarievo.me/2016/03/18/leaner-responsive-images-with-client-hints/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTML/">HTML</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/工具/">工具</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/翻译/">翻译</a></li></ul>
</footer>
</div>
</article>
<article id="post-online-diagram-and-flow-chart" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/10/11/online-diagram-and-flow-chart/" class="article-date">
<time datetime="2015-10-11T02:41:04.000Z" itemprop="datePublished">2015-10-11</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/10/11/online-diagram-and-flow-chart/">在线创建美图表、流程图</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>之前写<a href="/2015/06/14/i-dont-know-cheese/">醍醐灌奶酪</a>的时候，做了一张很大的图。可以说，当时写文查资料只占那篇文全部精力的一半，剩下一半则是作图 ><。</p>
<p><a href="http://7qnahw.com1.z0.glb.clouddn.com/screenshot/milk_products.png"><img src="http://7qnahw.com1.z0.glb.clouddn.com/screenshot/milk_products.png" title="点我看大" style="width: 100%;max-width:100%"></a></p>
<p>在我记忆里这种图用 Axure 或者 AI 也不是不能画，但是好死不死我电脑里并没有这两个软件也并不想装。我相信万能的互联网会给我答案！经过一番筛选，我也成功找到了心仪的它 XD，它就是——<strong><a href="https://www.gliffy.com/">Gliffy</a></strong>。<br>
<p class="article-more-link">
<a href="/2015/10/11/online-diagram-and-flow-chart/#more">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hikarievo.me/2015/10/11/online-diagram-and-flow-chart/" data-id="cj38edt5v000higxe9i9ltyb5" class="article-share-link">分享</a>
<a href="http://hikarievo.me/2015/10/11/online-diagram-and-flow-chart/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/工具/">工具</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/推荐/">推荐</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/设计/">设计</a></li></ul>
</footer>
</div>
</article>
<article id="post-lets-orienteering" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/09/03/lets-orienteering/" class="article-date">
<time datetime="2015-09-03T04:17:06.000Z" itemprop="datePublished">2015-09-03</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/09/03/lets-orienteering/">来一起玩定向吧 ><</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>7月底的时候去了一趟瑞典，参加了传说中的五日赛。早在第一次听说全世界最大的定向越野比赛的时候，就心驰而神往，之后每年都念叨着想要去，今年终于算是得偿所愿（下面这个是2016年五日赛的宣传视频）</p>
<embed src="http://player.youku.com/player.php/sid/XMTMxMDA3MzU2MA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
<p class="article-more-link">
<a href="/2015/09/03/lets-orienteering/#more">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hikarievo.me/2015/09/03/lets-orienteering/" data-id="cj38edt5u000figxe4kehpp9o" class="article-share-link">分享</a>
<a href="http://hikarievo.me/2015/09/03/lets-orienteering/#disqus_thread" class="article-comment-link">留言</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-which-is-my-dialog" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/08/26/which-is-my-dialog/" class="article-date">
<time datetime="2015-08-26T11:05:43.000Z" itemprop="datePublished">2015-08-26</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/08/26/which-is-my-dialog/">弹弹弹，弹出好多框框</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>我们有一个设计师吃货群，聚集了两岸三地海内外的华人吃货话唠设计师，设计师和吃货都是关键词。因为人员背景复杂，经常会出现常用名词都互相不了解的情况，曾经因为“意面”一个词热烈讨论了一个多小时，大抵结论就是台湾的意面并不像内地这样特指意大利面（当然也不是Pasta），是另外一种做法的鸡蛋面（虽然他们当地人也一直说不清2333）。光中文就搞成这样，英文就更不用说，之前群里聊起来 dialog 和 modal 到底哪里不同要怎么用的问题…虽然我觉得用弹出窗口、对话框、气泡提示之类的中文可能更好理解，但是群里很多人表示还是讲英语省得搞不清（虽然我觉得在这里中文反而讲得清…），所以我过来理理清~<br>
<p class="article-more-link">
<a href="/2015/08/26/which-is-my-dialog/#more">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hikarievo.me/2015/08/26/which-is-my-dialog/" data-id="cj38edt5s000eigxeqhp2nhii" class="article-share-link">分享</a>
<a href="http://hikarievo.me/2015/08/26/which-is-my-dialog/#disqus_thread" class="article-comment-link">留言</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>
<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><a class="extend next" rel="next" href="/page/2/">下一页 »</a>
</nav>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">标签云</h3>
<div class="widget tagcloud">
<a href="/tags/CSS/" style="font-size: 20px;">CSS</a> <a href="/tags/HTML/" style="font-size: 15px;">HTML</a> <a href="/tags/JS/" style="font-size: 10px;">JS</a> <a href="/tags/初心者/" style="font-size: 17.5px;">初心者</a> <a href="/tags/吃/" style="font-size: 10px;">吃</a> <a href="/tags/工具/" style="font-size: 17.5px;">工具</a> <a href="/tags/心得/" style="font-size: 10px;">心得</a> <a href="/tags/推荐/" style="font-size: 15px;">推荐</a> <a href="/tags/杂谈/" style="font-size: 20px;">杂谈</a> <a href="/tags/游记/" style="font-size: 10px;">游记</a> <a href="/tags/看书/" style="font-size: 12.5px;">看书</a> <a href="/tags/翻译/" style="font-size: 10px;">翻译</a> <a href="/tags/考据/" style="font-size: 12.5px;">考据</a> <a href="/tags/设计/" style="font-size: 17.5px;">设计</a>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">归档</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/05/">2017年 5月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/02/">2017年 2月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/01/">2017年 1月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/05/">2016年 5月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">2016年 4月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">2016年 3月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/10/">2015年 10月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/09/">2015年 9月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">2015年 8月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/06/">2015年 6月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">2015年 3月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/02/">2015年 2月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/01/">2015年 1月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">2014年 12月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">2014年 11月</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">2014年 10月</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">最新文章</h3>
<div class="widget recent-posts">
<ul>
<li>
<a href="/2017/05/13/experience-required/"> 用户体验经验须知</a>
<time datetime="2017-05-13T13:54:12.000Z" itemprop="datePublished">2017-05-13</time>
</li>
<li>
<a href="/2017/02/02/draw-pure-css-hexagon-radar-chart/"> 只用CSS绘制雷达图</a>
<time datetime="2017-02-02T08:05:50.000Z" itemprop="datePublished">2017-02-02</time>
</li>
<li>
<a href="/2017/01/26/changing-display-order-by-css/"> 使用CSS改变DOM元素顺序</a>
<time datetime="2017-01-26T09:59:48.000Z" itemprop="datePublished">2017-01-26</time>
</li>
<li>
<a href="/2017/01/12/learning-f2e-at-udacity/"> 如何快速学习前端</a>
<time datetime="2017-01-12T15:13:00.000Z" itemprop="datePublished">2017-01-12</time>
</li>
<li>
<a href="/2016/05/21/detailed-introduction-of-background-properties/"> CSS background 属性使用手册</a>
<time datetime="2016-05-21T07:03:35.000Z" itemprop="datePublished">2016-05-21</time>
</li>
<li>
<a href="/2016/04/02/from-newbie-to-veteran/"> 从菜鸟到行家，从面条说起</a>
<time datetime="2016-04-02T06:20:25.000Z" itemprop="datePublished">2016-04-02</time>
</li>
<li>
<a href="/2016/03/18/leaner-responsive-images-with-client-hints/"> 【译】使用客户端查询托管响应式图片</a>
<time datetime="2016-03-17T16:28:49.000Z" itemprop="datePublished">2016-03-18</time>
</li>
<li>
<a href="/2015/10/11/online-diagram-and-flow-chart/"> 在线创建美图表、流程图</a>
<time datetime="2015-10-11T02:41:04.000Z" itemprop="datePublished">2015-10-11</time>
</li>
<li>
<a href="/2015/09/03/lets-orienteering/"> 来一起玩定向吧 ><</a>
<time datetime="2015-09-03T04:17:06.000Z" itemprop="datePublished">2015-09-03</time>
</li>
<li>
<a href="/2015/08/26/which-is-my-dialog/"> 弹弹弹，弹出好多框框</a>
<time datetime="2015-08-26T11:05:43.000Z" itemprop="datePublished">2015-08-26</time>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="創用 CC 授權條款" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br />本内容由<a xmlns:cc="http://creativecommons.org/ns#" href="http://hikarievo.me" property="cc:attributionName" rel="cc:attributionURL">阿布evo</a>创作，基于<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"> 署名-非商业使用-相同方式分享 3.0 许可协议</a>© 2017 阿布<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">首页</a>
<a href="/archives" class="mobile-nav-link">过往文章</a>
</nav>
<script>
var disqus_config = function () {
this.page.url = 'undefined'
//this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://hikarievo.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<script id="dsq-count-scr" src="//hikarievo.disqus.com/count.js" async></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div><!-- hexo-inject:begin --><!-- hexo-inject:end -->
</body>
</html>