转自：http://www.csdn.net/article/2013-05-24/2815422-20-Useful-CSS-Snippets-Every-Designer-Should-Have
共享已成为互联网的一种主流，尤其是分享一些非常实用的技术，本文收集了20段非常专业的CSS 2/CSS 3代码片段给大家，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。
Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。
本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。
1. CSS Resets
网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。
|
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
|
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }
|
2.经典的CSS Clearfix
这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。
|
1
2
3
4
5
|
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
<font></font>
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
|
3.升级版的Clearfix
在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE 6-8。
|
1
2
3
4
|
.clearfix:before, .container:after { content: ""; display: table; }<font></font>
.clearfix:after { clear: both; }
/* IE 6/7 */.clearfix { zoom: 1; }
|
4. Cross-Browser Transparency
CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。
|
1
2
3
4
5
6
|
.transparent {
filter: alpha(opacity=50);/* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
} |
5. CSS Blockquote模板
这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
blockquote { background: #f9f9f9;<
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}blockquote:before { color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}blockquote p { display: inline;
} |
6. 个性化的圆角代码
许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#container { -webkit-border-radius: 4px 3px 6px 10px;
-moz-border-radius: 4px 3px 6px 10px;
-o-border-radius: 4px 3px 6px 10px;
border-radius: 4px 3px 6px 10px;
}/* alternative syntax broken into each line */#container { -webkit-border-top-left-radius: 4px;
-webkit-border-top-rightright-radius: 3px;
-webkit-border-bottom-rightright-radius: 6px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 10px;
} |
7. 一般媒体查询
这是一段非常好的模板，用于各种零零碎碎的媒体查询，在移动设备上也可以使用，这段代码甚至可以通过使用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
|
/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
} /* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) {
/* Styles */
} /* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) {
/* Styles */ }/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */ }<font></font> /* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
} /* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) {
/* Styles */
}/* Large screens ----------- */@media only screen and (min-width : 1824px) {
/* Styles */
}/* iPhone 4 ----------- */@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
} |
8. 现代字体栈
在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问CSS Font Stacks。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/* Times New Roman-based serif */ font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* A modern Georgia-based serif */ font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/*A more traditional Garamond-based serif */ font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/*The Helvetica/Arial-based sans serif */ font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
/*The Verdana-based sans serif */ font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
/*The Trebuchet-based sans serif */ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
/*The heavier “Impact” sans serif */ font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
/*The monospace */ font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
源码地址： http://www.sitepoint.com/eight-definitive-font-stacks/
9. 自定义文本选择
一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色，下面代码的默认颜色是浅蓝色，当然，你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。
|
1
2
3
|
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }
|
10.隐藏Logo上的H1文本
|
1
2
3
4
5
6
7
|
h1 {
text-indent: -9999px;
margin: 0 auto;
width: 320px;
height: 85px;
background: transparent url("images/logo.png") no-repeat scroll;
} |
11. 为图片创建拍立得效果边框
运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。
|
1
2
3
4
5
6
7
8
9
10
|
img.polaroid { background:#000;/*Change this to a background image or remove*/
border:solid #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333;/* Standard blur at 5px. Increase for more depth *
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:200px; /*Set to height of your image or desired div*/
width:200px;/*Set to width of your image or desired div*/
} |
源码地址： http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3
12. 锚链接伪类选择器
|
1
2
3
4
|
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
|
源码地址： http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers
13. 花俏地CSS3 Pull-Quotes
Pull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。
|
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
|
.has-pullquote:before { /* Reset metrics. */
padding: 0;
border: none;
/* Content */
content: attr(data-pullquote);
/* Pull out to the right, modular scale based margins. */ float: rightright;
width: 320px;
margin: 12px -140px 24px 36px;
/* Baseline correction */
position: relative;
top: 5px;
/* Typography (30px line-height equals 25% incremental leading) */
font-size: 23px;
line-height: 30px;
}.pullquote-adelle:before { font-family: "adelle-1", "adelle-2";
font-weight: 100;
top: 10px !important;
}.pullquote-helvetica:before {
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}.pullquote-facit:before { font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
font-weight: bold;
top: 7px !important;
} |
源码地址： http://miekd.com/articles/pull-quotes-with-html5-and-css/
14. CSS3的全屏背景效果
如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。
|
1
2
3
4
5
6
7
|
html { background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} |
源码： http://css-tricks.com/perfect-full-page-background-image/
15. 内容垂直集中
相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。
|
1
2
3
4
5
|
.container { min-height: 6.5em;
display: table-cell;
vertical-align: middle;
} |
源码地址： http://www.w3.org/Style/Examples/007/center
16. 垂直滚动条
这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。
|
1
|
html { height: 101% }
|
17. CSS3 Gradients模板
|
1
2
3
4
5
6
7
8
9
|
#colorbox { background: #629721;
background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
} |
18. @Font-Face模板
使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站，并生成自定义font families。
|
1
2
3
4
5
6
7
8
9
10
11
|
@font-face { font-family: 'MyWebFont';
src: url('webfont.eot');/* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('webfont.woff') format('woff'),/* Modern Browsers */
url('webfont.ttf') format('truetype'),/* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg');/* Legacy iOS */
}body { font-family: 'MyWebFont', Arial, sans-serif;
} |
源码地址： http://css-tricks.com/snippets/css/using-font-face/
19.创建缝合效果
|
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
|
p { position:relative;
z-index:1;
padding: 10px;
margin: 10px;
font-size: 21px;
line-height: 1.3em;
color: #fff;
background: #ff0030;
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}p:before { content: "";
position: absolute;
z-index: -1;
top: 3px;
bottombottom: 3px;
left :3px;
rightright: 3px;
border: 2px dashed #fff;
} p a { color: #fff;
text-decoration:none;
}p a:hover, p a:focus, p a:active { text-decoration:underline;
} |
20. CSS3 斑马线效果
当用户在浏览许多行数据时，很难分清哪一个单元格是属于哪一行的。默认情况下，通过添加斑马线，用户可以给奇偶行更新不同的背景色。
|
1
2
3
|
tbody tr:nth-child(odd) { background-color: #ccc;
} |
源码地址： http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/
相关推荐
Web开发者可以将这些代码片段整合到自己的项目中，以简化样式工作并优化用户体验。随着CSS3的普及，越来越多的高级功能和动画效果可以利用，如变换（transform）、过渡（transition）和动画（animation），为网站...
标题与描述中的“60个开发者不容错过的免费资源库”明确指出了本文将要探讨的主题，即为软件开发者提供一系列免费且实用的资源库，旨在帮助他们在开发Web应用程序和移动应用程序时，能够提高效率，简化流程。...
本资源“网页制作相当经典不容错过css素材”显然是一个包含丰富的CSS设计和样式示例的压缩包，适合初学者和经验丰富的开发者参考学习。虽然描述内容较为简洁，但我们可以深入探讨一下CSS在网页制作中的重要性和相关...
在CSS开发过程中，选择合适的工具和框架能显著提升开发效率，优化代码质量，同时也能帮助设计师和开发者更好地应对各种Web设计挑战。通过探索和实践这些工具，你可以不断提升自己的技能，创造出更优秀的Web作品。...
《精通CSS：高级Web标准解决方案（第2版）》是一本深入探讨CSS技术的专业书籍，旨在帮助读者掌握CSS的核心概念并提升在Web...结合中英文双语版和源码，这是一份不容错过的学习资源，能够助你在Web开发领域更上一层楼。
【爱心网页-HTML-代码】是一个关于Web前端开发的学习资源，特别适合那些正在探索HTML、CSS和JavaScript基础知识的初学者。这个压缩包包含了名为"5.21...对于想要提升Web前端技能的开发者来说，这是一个不容错过的资源。
《21天学通HTML+CSS+JavaScript Web开发.第7版》是人民邮电出版社在2016年出版的一本面向初学者的Web开发教程。...无论你是对Web开发感兴趣的学生，还是想要转行的职场人士，这本书都是不容错过的宝贵资源。
《精通CSS——高级Web标准解决方案》是一本深入探讨CSS（层叠样式表）技术的专业教程。...总的来说，这本书的第三部分是提升CSS技能的宝贵资源，对于想要在Web前端领域精进的开发者来说，是不容错过的。
在Web前端开发中，HTML和CSS是构建网页布局和样式的基石。然而，随着现代网页设计的复杂性增加，单纯使用CSS已经无法满足高效、可维护的代码编写...无论你是初入前端开发还是寻求提升，这都是一个不容错过的学习资源。
在IT行业中，Web开发是一项至关重要的技能，涵盖了前端与后端技术，以及众多相关的工具和框架。本资源“经典：WEB开发...这个资源包中的文档应包含上述各个领域的详细教程和参考指南，是Web开发者不容错过的宝贵资料。
总之，这个“html+css+javascript 电商网站web+mobile实战项目”是一个全面的前端开发入门课程，涵盖了从基础语言理解到实际项目开发的各个环节，对于想成为前端开发者的初学者来说，是一次不容错过的学习机会。...
《CSSSource：汇聚CSS代码片段的宝库》 在网页设计和开发中，CSS（Cascading Style Sheets）起着至关重要的作用，它赋予HTML或XML文档以...无论是解决实际问题，还是提升个人技能，这个资源都是Web开发者不容错过的。
【标题】：“一款div+css做的网站” 这款网站的构建采用了经典的前端布局技术——div+css，这是一种在网页设计中广泛使用的方法，旨在实现结构与...对于想要提升Web开发能力的人来说，这是一个不容错过的学习机会。
《CSS经典教程+实例》是一本深入学习CSS的宝贵资源，涵盖了从基础到高级的各种CSS技术，旨在帮助...总之，《CSS经典教程+实例》是一份不容错过的学习资料，无论你是初学者还是有一定经验的开发者，都能从中受益匪浅。
在IT行业中，Visual Studio 2008（简称VS2008）是一款非常重要的集成开发环境（IDE），尤其对于Windows...安装并使用这样的插件，不仅可以提升开发效率，还能保证代码的现代性和兼容性，是VS2008用户不容错过的资源。
总的来说，YAlbum是一个实用且灵活的JavaScript相册解决方案，其强大的功能和易用性使其成为Web开发者的得力工具。无论你是初学者还是经验丰富的开发者，都可以通过学习和运用YAlbum来提升你的项目中的图片展示效果...
**CSS技术参考手册——CSS技术集锦** CSS（Cascading Style Sheets）是网页设计中的核心技术，用于控制网页的布局和样式。...这份资源对于任何想要提升网页设计技能的人来说，都是不容错过的宝藏。
在IT领域，CSS（Cascading Style Sheets）是用于...对于任何想要提升CSS技能的IT从业者来说，这些都是不容错过的宝贵资料。记住，理论知识结合实际操作是学习的关键，所以在阅读这些教程的同时，动手实践是非常重要的。
《Web前端大作业——构建漫步时尚广场完整项目》 在本次Web前端的大作业中，我们面临的挑战是构建一个名为“漫步时尚广场”的完整项目。...总的来说，这是一个综合性的学习和实践机会，不容错过。