<commit_before>[3 Web Designs in 3 Weeks](http://juntao.gitbooks.io/3-web-designs-in-3-weeks/content/index.html)

https://github.com/abruzzi/3-pages-in-3-weeks

http://sass-lang.com/
http://sass.bootcss.com/


emmet

section>h2+p*3
ul>li*10>.item>h2+img[src="image-$.jpg"]

css基础
http://www.w3school.com.cn/cssref/index.asp

https://dribbble.com/shots
http://dribbble.cn/

目前已经有很多字体图标，其中有收费的，也有很多免费的。我们这里会使用免费的icomoon，同类型的还有fontawesome等。

此处应该注意的是对于.hero这个section，我们将其背景设置为灰色，并将position设置为relative。然后为其添加了一个伪元素，这个伪元素上包含了实际的图片，并为图片设置了透明度.2。这样做的原因是如果直接设置.hero的透明度的话，其子元素h2和p都会被这个透明度影响。通过引入一个伪元素，我们就可以分别为文字和图片设置不同的透明度了。








[现代、简单的前端工作流-3-](http://894mayo.cc/modern-front-end-workflow/)<commit_msg>add a blog's link<commit_after>[3 Web Designs in 3 Weeks](http://juntao.gitbooks.io/3-web-designs-in-3-weeks/content/index.html)

https://github.com/abruzzi/3-pages-in-3-weeks

http://sass-lang.com/
http://sass.bootcss.com/


emmet

section>h2+p*3
ul>li*10>.item>h2+img[src="image-$.jpg"]

css基础
http://www.w3school.com.cn/cssref/index.asp

https://dribbble.com/shots
http://dribbble.cn/

目前已经有很多字体图标，其中有收费的，也有很多免费的。我们这里会使用免费的icomoon，同类型的还有fontawesome等。

此处应该注意的是对于.hero这个section，我们将其背景设置为灰色，并将position设置为relative。然后为其添加了一个伪元素，这个伪元素上包含了实际的图片，并为图片设置了透明度.2。这样做的原因是如果直接设置.hero的透明度的话，其子元素h2和p都会被这个透明度影响。通过引入一个伪元素，我们就可以分别为文字和图片设置不同的透明度了。





https://pixelfear.com/blog/using-prism-within-markdown


[现代、简单的前端工作流-3-](http://894mayo.cc/modern-front-end-workflow/)
{'fraction_non_alphanumeric': 0.1620879120879121, 'fraction_numerical': 0.024725274725274724, 'mean_word_length': 5.938095238095238, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 5, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5251933', 'n_tokens_mistral': 896, 'n_tokens_neox': 902, 'n_words': 41}