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 */
}

　　源码地址： http://perishablepress.com/cross-browser-transparency-via-css/

　　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;
}

　　查看源码： http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

　　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 */
}

　　源码地址： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

　　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/

　　来自： HONGKIAT.COM

转载于:https://www.cnblogs.com/vingi/articles/3143777.html

Web开发者不容错过的20段CSS代码(转)相关推荐

  1. Web开发者不容错过的20段CSS代码

    1.CSS Resets 网络上关于CSS重置的代码非常多.本段代码是根据Eric Meyer's reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页 ...

  2. AI 开发者不容错过的 20 个机器学习和数据科学网站

    作者 | Oleksii Kharkovyna 责编 | 屠敏 出品 | CSDN(ID:CSDNnews) 以下为译文: 如今,科技界最热门的话题莫过于最先进.最前沿.最令人兴奋的数据科学和机器学习 ...

  3. Web开发者不容错过的10个HTML5工具

    HTML5已经成为当今世界的一个必然组成部分.由于World Wide Web万维网是使用超文本标记语言来架构和呈现的,于是HTML5成为了最流行的编程语言之一.随着网络的不断扩张,Web开发人员非常 ...

  4. 年终盘点: 2022 不容错过的 20 个开发者工具

    2022 年,在重重困难的洗礼下,软件开发领域还是迎来了一波优秀工具的涌现.这些工具在帮助开发者提高效率.增强体验的同时,也赢得了开发者的青睐与认可.它们涵盖了代码编辑.开发调试.项目管理.线上协作等 ...

  5. 墙裂推荐，Python开发者不容错过的7个VS Code扩展

    Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows. Linux 和 macOS 等操作系统的免费代码编辑器,它支持测试,并内置了 Git 版本控制 ...

  6. 每位iOS开发者不容错过的10大有用工具

    内容简单介绍 1.iOS简单介绍 2.iOS开发十大有用工具之开发环境 3.iOS开发十大有用工具之图标设计 4.iOS开发十大有用工具之原型设计 5.iOS开发十大有用工具之演示工具 6.iOS开发 ...

  7. 怎么让某段css代码只在Chrome 火狐 edge 浏览器生效

    上网查了很多方法 到现在ie其实已经没有了,所以都是兼容Edge浏览器(win10自带) 截图 这段css代码只在火狐生效,其他不生效 然后是谷歌和edge 试了很多种 /*只兼容谷歌*/ @medi ...

  8. 2020不容错过！24个CSS新特性来了

    简介:@argyleink在第四次伦敦CSS活动(LondonCSS 2020)[1]中分享了一个有关于CSS特性相关的话题.本文基于该PPT,整理了近24个CSS方面的新特性,分为Web动效 .We ...

  9. 给 Web 前端开发人员推荐20款 CSS 编辑器

    CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...

最新文章

  1. Python3实现ICMP远控后门(上)
  2. 在 ubuntu 中设置安装 boost 库
  3. wxWidgets：wxCollapsiblePaneEvent类用法
  4. python tip
  5. ASP.NET Web API中的返回值
  6. jquery-尺寸相关
  7. 基于卷积神经网络模型的MSTAR高分辨率图像数据集识别实践【后续：网络层可视化分析】
  8. 三部曲打造无路由器破解闪讯WiFi共享 经好几个同学验证
  9. 台式计算机键盘驱动,台式电脑键盘无法找到驱动, 为什么?
  10. ApacheCN 翻译活动进度公告 2019.5.31
  11. 蚂蚁金服实习三面，offer已拿。我总结了所有面试题，其实也不过如此！！
  12. 关于指针总结（指针种类，概念，作用与用途）
  13. this的理解 转https://www.cnblogs.com/pssp/p/5216085.html#!comments
  14. macOS终端命令行配置网络代理
  15. [渝粤教育] 南京森林警察学院 犯罪学（王志红） 参考 资料
  16. Mr. Huang1
  17. 前端阿里矢量图的使用步骤
  18. 赛扬处理器_【推仔说新闻】英特尔发布新款奔腾、赛扬处理器
  19. 当税收遇到了电商 团购网站遭遇尴尬
  20. 踩坑篇，多达21页的，超级详细的Oracle安装和配置教程，没有之一

热门文章

  1. Thoughtworks感受
  2. Project2007企业项目管理实践
  3. 公云 PubYun – 一个可免费DDNS（动态域名）服务商
  4. (OK) 华为全网通 honor 5x - KIW-AL10-卡刷 自己编译的 cm-13.0 成功
  5. 计算机科学与技术专业用什么笔记本,计算机科学与技术专业课程有哪些
  6. notejs NPM切换到淘宝源
  7. 适合上班族的量化炒股场景——来自量化机器人的实时行情盯盘服务
  8. 苹果手机数据转移到新手机_手机通讯录怎么转移到新手机？找对方法就可以了...
  9. 自考 计算机网络原理 难吗,自考计算机网络原理本科
  10. Linux网络编程之sockaddr与sockaddr_in,sockaddr_un结构体详细讲解