经典的css片段
1. CSS Resets
根据 [Eric-Meyer’s-reset-codes](http://meyerweb.com/eric/tools/css/reset “Eric Meyer”) 提供的css reset方法,最好别用通配符把所有的元素的margin和padding都设为0
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 |
|
在之前的[文章](http://boia.github.io/blog/2013/07/18/css-reset-style/ “css-reset-style”)中已经说过这段代码,现在在加深下印象。
2.经典的CSS Clearfix
1 2 3 4 5 |
|
3.升级版的Clearfix
在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。
1 2 3 4 |
|
4.CSS Blockquote模板
这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
5.个性化的圆角代码
许多CSS开发者都非常熟悉圆角语法,但如何为每个角设置不同的值?不如看看下面这段代码吧!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
6.一般媒体查询
这是一段非常好的模板,用于各种零零碎碎的媒体查询,在移动设备上也可以使用,这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。
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 |
|
7.现代字体栈
在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问[CSS-Font-Stacks](http://cssfontstack.com/) 。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|