公告

更新

 

互联网 JS控件 按钮 黑色 灰色 白色 蓝色 绿色 黄色 橙色

> Css > 推荐代码

Web开发者不容错过的20段CSS代码
0
作者:vip_260     来源:     日期:2013-7-6 23:07:55     人气:      标签:

本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。

1. CSS Resets

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

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 {
  margin0;
  padding0;
  border0;
  font-size100%;
  font: inherit;
  vertical-alignbaseline;
  outlinenone;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height101%; }
body { font-size62.5%line-height1font-familyArialTahomasans-serif; }
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { displayblock; }
ol, ul { list-stylenone; }
 
blockquote, q { quotesnone; }
blockquote:before, blockquote:after, q:before, q:after { content''contentnone; }
strong { font-weightbold; }
 
table { border-collapsecollapseborder-spacing0; }
img { border0max-width100%; }
 
p { font-size1.2emline-height1.0emcolor#333; }

2.经典的CSS Clearfix

这个clearfix代码已在WEB开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。

.clearfix:after { content"."displayblockclearbothvisibilityhiddenline-height0height0; }
.clearfix { display: inline-block; }
 <font></font> 
html[xmlns] .clearfix { displayblock; }
* html .clearfix { height1%; }

3.升级版的Clearfix

在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。

.clearfix:before, .container:after { content""display: table; }<font></font> 
.clearfix:after { clearboth; }
/* IE 6/7 */
.clearfix { zoom: 1; }

4. Cross-Browser Transparency 

CSS3里的许多属性都与浏览器相兼容,但也有特例,比如opacity,需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

.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模板

这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。

blockquote {
    background#f9f9f9;<
    border-left10px solid #ccc;
    margin1.5em 10px;
    padding: .5em 10px;
    quotes"\201C""\201D""\2018""\2019";
}
blockquote:before {
    color#ccc;
    contentopen-quote
    font-size4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    displayinline;
}
查看源码: http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

6. 个性化的圆角代码

许多CSS开发者都非常熟悉圆角语法,但如何为每个角设置不同的值?不如看看下面这段代码吧!

#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引用到视网膜设备上。

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

/* 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"HelveticaArialsans-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"Couriermonospace;
源码地址: http://www.sitepoint.com/eight-definitive-font-stacks/

9. 自定义文本选择

一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色,下面代码的默认颜色是浅蓝色,当然,你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。

::selection { background#e2eae2; }
::-moz-selection { background#e2eae2; }
::-webkit-selection { background#e2eae2; }

10.隐藏Logo上的H1文本

h1 {
    text-indent-9999px
    margin0 auto;
    width320px;
    height85px;
    backgroundtransparent url("images/logo.png"no-repeat scroll;
}

11. 为图片创建拍立得效果边框

运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。

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. 锚链接伪类选择器

a:link { colorblue; }
a:visited { colorpurple; }
a:hover { colorred; }
a:active { color: yellow; }
源码地址: http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers

13. 花俏地CSS3 Pull-Quotes

Pull-quotes不同于页面里的blockquote,它们通常用在文章中来引用文本。

.has-pullquote:before {
    /* Reset metrics. */
    padding0;
    bordernone
    /* Content */
    contentattr(data-pullquote);
    /* Pull out to the right, modular scale based margins. */ 
    float: rightright;
    width320px;
    margin12px -140px 24px 36px;
    /* Baseline correction */
    positionrelative;
    top5px;
    /* Typography (30px line-height equals 25% incremental leading) */
    font-size23px;
    line-height30px;
}
.pullquote-adelle:before {
    font-family"adelle-1""adelle-2";
    font-weight100;
    top10px !important;
}
 
.pullquote-helvetica:before {
    font-family"Helvetica Neue"Arialsans-serif;
    font-weightbold;
    top7px !important;
}
.pullquote-facit:before {
    font-family"facitweb-1""facitweb-2"HelveticaArialsans-serif;
    font-weightbold;
    top7px !important;
}
源码地址: http://miekd.com/articles/pull-quotes-with-html5-and-css/

14. CSS3的全屏背景效果

如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。

Copyright 2008 网站频道 All Rights Resverved.
提供:网页特效 JS广告 网站截图 酷站推荐 交流群:3506863
     页面执行时间0.2813秒 查询数据库4次