Web开发者不容错过的20段CSS代码.docx
《Web开发者不容错过的20段CSS代码.docx》由会员分享，可在线阅读，更多相关《Web开发者不容错过的20段CSS代码.docx（15页珍藏版）》请在冰豆网上搜索。
Web开发者不容错过的20段CSS代码
Web开发者不容错过的20段CSS代码
Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。
但仍然有一些开发者迷恋着一些CSS2代码。
本文将分享20段非常专业的CSS2/CSS3代码供大家使用...
Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。
但仍然有一些开发者迷恋着一些CSS2代码。
本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。
1.CSSResets
网络上关于CSS重置的代码非常多。
本段代码是根据EricMeyer’sresetcodes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。
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.经典的CSSClearfix
这个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;}
html[xmlns].clearfix{ display:
block;}
*html.clearfix{ height:
1%;}
3.升级版的Clearfix
在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE6-8。
1
2
3
4
.clearfix:
before,.container:
after{ content:
""; display:
table;}
.clearfix:
after{ clear:
both;}
/*IE6/7*/
.clearfix{zoom:
1;}
4.Cross-BrowserTransparency
CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。
附加过滤属性可以兼容任何老版的IE浏览器。
1
2
3
4
5
6
.transparent {
filter:
alpha（opacity=50）;/*internetexplorer*/
-khtml-opacity:
0.5; /*khtml,oldsafari*/
-moz-opacity:
0.5; /*mozilla,netscape*/
opacity:
0.5; /*fx,safari,opera*/
}
5.CSSBlockquote模板
这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。
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;
}
blockquotep{
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;
}
/*alternativesyntaxbrokenintoeachline*/
#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（portraitandlandscape）-----------*/
@mediaonly screen
and（min-device-width:
320px）and（max-device-width:
480px）{
/*Styles*/
}
/*Smartphones（landscape）-----------*/
@mediaonly screen and（min-width:
321px）{
/*Styles*/
}
/*Smartphones（portrait）-----------*/
@mediaonly screen and（max-width:
320px）{
/*Styles*/
}
/*iPads（portraitandlandscape）-----------*/
@mediaonly screen and（min-device-width:
768px）and（max-device-width:
1024px）{
/*Styles*/
}
/*iPads（landscape）-----------*/
@mediaonly screen and（min-device-width:
768px）and（max-device-width:
1024px）and（orientation:
landscape）{
/*Styles*/
}
/*iPads（portrait）-----------*/
@mediaonly screen and（min-device-width:
768px）and（max-device-width:
1024px）and（orientation:
portrait）{
/*Styles*/
}
/*Desktopsandlaptops-----------*/
@mediaonly screen and（min-width:
1224px）{
/*Styles*/
}
/*Largescreens-----------*/
@mediaonly screen and（min-width:
1824px）{
/*Styles*/
}
/*iPhone4-----------*/
@mediaonly screen and（-webkit-min-device-pixel-ratio:
1.5）,only screen and（min-device-pixel-ratio:
1.5）{
/*Styles*/
}
8.现代字体栈
在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问CSSFontStacks。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*TimesNewRoman-basedserif*/
font-family:
Cambria, "HoeflerText",Utopia, "LiberationSerif", "NimbusRomanNo9LRegular",Times, "TimesNewRoman", serif;
/*AmodernGeorgia-basedserif*/
font-family:
Constantia, "LucidaBright",Lucidabright, "LucidaSerif",Lucida, "DejaVuSerif," "BitstreamVeraSerif", "LiberationSerif",Georgia, serif;
/*AmoretraditionalGaramond-basedserif*/
font-family:
"PalatinoLinotype",Palatino,Palladio, "URWPalladioL", "BookAntiqua",Baskerville, "BookmanOldStyle", "BitstreamCharter", "NimbusRomanNo9L",Garamond, "AppleGaramond", "ITCGaramondNarrow", "NewCenturySchoolbook", "CenturySchoolbook", "CenturySchoolbookL",Georgia, serif;
/*TheHelvetica/Arial-basedsansserif*/
font-family:
Frutiger, "FrutigerLinotype",Univers,Calibri, "GillSans", "GillSansMT", "MyriadPro",Myriad, "DejaVuSansCondensed", "LiberationSans", "NimbusSansL", Tahoma,Geneva, "HelveticaNeue", Helvetica, Arial, sans-serif;
/*TheVerdana-basedsansserif*/
font-family:
Corbel, "LucidaGrande", "LucidaSansUnicode", "LucidaSans", "DejaVuSans", "BitstreamVeraSans", "LiberationSans", Verdana, "VerdanaRef", sans-serif;
/*TheTrebuchet-basedsansserif*/
font-family:
"SegoeUI",Candara, "BitstreamVeraSans", "DejaVuSans", "BitstreamVeraSans", "TrebuchetMS", Verdana, "VerdanaRef", sans-serif;
/*Theheavier“Impact”sansserif*/
font-family:
Impact,Haettenschweiler, "FranklinGothicBold",Charcoal, "HelveticaInserat", "BitstreamVeraSansBold", "ArialBlack", sans-serif;
/*Themonospace*/
font-family:
Consolas, "AndaleMonoWT", "AndaleMono", "LucidaConsole", "LucidaSansTypewriter", "DejaVuSansMono", "BitstreamVeraSansMono", "LiberationMono", "NimbusMonoL",Monaco, "CourierNew", Courier, monospace;
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;/*Changethistoabackgroundimageorremove*/
border:
solid #fff;
border-width:
6px 6px 20px 6px;
box-shadow:
1px 1px 5px #333;/*Standardblurat5px.Increaseformoredepth*
-webkit-box-shadow:
1px1px5px#333;
-moz-box-shadow:
1px1px5px#333;
height:
200px;/*Settoheightofyourimageordesireddiv*/
width:
200px;/*Settowidthofyourimageordesireddiv*/
}
12.锚链接伪类选择器
1
2
3
4
a:
link{ color:
blue;}
a:
visited{ color:
purple;}
a:
hover{ color:
red;}
a:
active{ color:
yellow;}
13.花俏地CSS3Pull-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{
/*Resetmetrics.*/
padding:
0;
border:
none;
/*Content*/
content:
attr（data-pullquote）;
/*Pullouttotheright,modularscalebasedmargins.*/
float:
rightright;
width:
320px;
margin:
12px -140px 24px 36px;
/*Baselinecorrection*/
position:
relative;
top:
5px;
/*Typography（30pxline-heightequals25%incrementalleading）*/
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:
"HelveticaNeue", 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;
}
14.CSS3的全屏背景效果
如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。
1
2
3
4
5
6
7
html{
background:
url
升级会员 