Web开发者不容错过的20段CSS代码Word下载.docx
《Web开发者不容错过的20段CSS代码Word下载.docx》由会员分享，可在线阅读，更多相关《Web开发者不容错过的20段CSS代码Word下载.docx（15页珍藏版）》请在冰豆网上搜索。
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:
border:
font-size:
100%;
font:
inherit;
vertical-align:
baseline;
outline:
none;
-webkit-box-sizing:
border-box;
-moz-box-sizing:
box-sizing:
}
html{
height:
101%;
}
body{
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:
blockquote,q{
quotes:
blockquote:
before,blockquote:
after,q:
before,q:
after{
content:
'
;
strong{
font-weight:
bold;
table{
border-collapse:
collapse;
border-spacing:
img{
max-width:
p{
1.2em;
1.0em;
color:
#333;
2.经典的CSSClearfix
这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。
.clearfix:
"
."
clear:
both;
visibility:
hidden;
.clearfix{
inline-block;
<
font>
/font>
html[xmlns].clearfix{
*html.clearfix{
1%;
3.升级版的Clearfix
在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE6-8。
before,.container:
table;
}<
/*IE6/7*/
.clearfix{zoom:
4.Cross-BrowserTransparency
CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。
附加过滤属性可以兼容任何老版的IE浏览器。
.transparent
{
filter:
alpha（opacity=50）;
/*internetexplorer*/
-khtml-opacity:
0.5;
/*khtml,oldsafari*/
-moz-opacity:
/*mozilla,netscape*/
opacity:
/*fx,safari,opera*/
5.CSSBlockquote模板
这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。
blockquote{
background:
#f9f9f9;
border-left:
10px
solid
#ccc;
1.5em
10px;
.5em
\201C"
\201D"
\2018"
\2019"
before{
open-quote;
4em;
.1em;
margin-right:
.25em;
-.4em;
blockquotep{
inline;
6.个性化的圆角代码
许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？
不如看看下面这段代码吧！
#container{
-webkit-border-radius:
4px
3px
6px
-moz-border-radius:
-o-border-radius:
border-radius:
/*alternativesyntaxbrokenintoeachline*/
-webkit-border-top-left-radius:
4px;
-webkit-border-top-rightright-radius:
3px;
-webkit-border-bottom-rightright-radius:
6px;
-webkit-border-bottom-left-radius:
-moz-border-radius-topleft:
-moz-border-radius-topright:
-moz-border-radius-bottomright:
-moz-border-radius-bottomleft:
7.一般媒体查询
这是一段非常好的模板，用于各种零零碎碎的媒体查询，在移动设备上也可以使用，这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。
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）-----------*/
screen
and（min-width:
321px）{
/*Smartphones（portrait）-----------*/
and（max-width:
320px）{
/*iPads（portraitandlandscape）-----------*/
768px）and（max-device-width:
1024px）{
/*iPads（landscape）-----------*/
1024px）and（orientation:
landscape）{
/*iPads（portrait）-----------*/
portrait）{
/*Desktopsandlaptops-----------*/
1224px）{
/*Largescreens-----------*/
1824px）{
/*iPhone4-----------*/
and（-webkit-min-device-pixel-ratio:
1.5）,only
and（min-device-pixel-ratio:
1.5）{
8.现代字体栈
在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问CSSFontStacks。
/*TimesNewRoman-basedserif*/
Cambria,
HoeflerText"
Utopia,
LiberationSerif"
NimbusRomanNo9LRegular"
Times,
TimesNewRoman"
serif;
/*AmodernGeorgia-basedserif*/
Constantia,
LucidaBright"
Lucidabright,
LucidaSerif"
Lucida,
DejaVuSerif,"
BitstreamVeraSerif"
Georgia,
/*AmoretraditionalGaramond-basedserif*/
PalatinoLinotype"
Palatino,Palladio,
URWPalladioL"
BookAntiqua"
Baskerville,
BookmanOldStyle"
BitstreamCharter"
NimbusRomanNo9L"
Garamond,
AppleGaramond"
ITCGaramondNarrow"
NewCenturySchoolbook"
CenturySchoolbook"
CenturySchoolbookL"
/*TheHelvetica/Arial-basedsansserif*/
Frutiger,
FrutigerLinotype"
Univers,Calibri,
GillSans"
GillSansMT"
MyriadPro"
Myriad,
DejaVuSansCondensed"
LiberationSans"
NimbusSansL"
Tahoma,Geneva,
HelveticaNeue"
Helvetica,
/*TheVerdana-basedsansserif*/
Corbel,
LucidaGrande"
LucidaSansUnicode"
LucidaSans"
DejaVuSans"
BitstreamVeraSans"
Verdana,
VerdanaRef"
/*TheTrebuchet-basedsansserif*/
SegoeUI"
Candara,
TrebuchetMS"
/*Theheavier“Impact”sansserif*/
Impact,Haettenschweiler,
FranklinGothicBold"
Charcoal,
HelveticaInserat"
BitstreamVeraSansBold"
ArialBlack"
/*Themonospace*/
Consolas,
AndaleMonoWT"
AndaleMono"
LucidaConsole"
LucidaSansTypewriter"
DejaVuSansMono"
BitstreamVeraSansMono"
LiberationMono"
NimbusMonoL"
Monaco,
CourierNew"
Courier,
monospace;
9.自定义文本选择
一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色，下面代码的默认颜色是浅蓝色，当然，你可以依据个人爱好进行各种颜色设置。
下面代码引用了典型的Webkit和Mozilla供应商前缀:
:
selection。
selection{
#e2eae2;
-moz-selection{
-webkit-selection{
10.隐藏Logo上的H1文本
h1
text-indent:
-9999px;
0
auto;
width:
320px;
85px;
transparent
url（"
images/logo.png"
）
no-repeat
scroll;
11.为图片创建拍立得效果边框
运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。
你需要修改图片的宽度/高度值来与你的网站布局相匹配。
img.polaroid{
#000;
/*Changethistoabackgroundimageorremove*/
#fff;
border-width:
20px
box-shadow:
1px
5px
/*Standardblurat5px.Increaseformoredepth*
-webkit-box-shadow:
1px1px5px#333;
-moz-box-shadow:
200px;
/*Settoheightofyourimageordesireddiv*/
/*Settowidthofyourimageordesireddiv*/
12.锚链接伪类选择器
a:
link{
blue;
visited{
purple;
hover{
red;
active{
yellow;
13.花俏地CSS3Pull-Quotes
Pull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。
.has-pullquote:
/*Resetmetrics.*/
/*Content*/
attr（data-pullquote）;
/*Pullouttotheright,modularscalebasedmargins.*/
float:
rightright;
12px
-140px
24px
36px;
/*Baselinecorrection*/
position:
relative;
top:
5px;
/*Typography（30pxline-heightequals25%incrementalleading）*/
23px;
30px;
.pullquote-adelle:
adelle-1"
adelle-2"
100;
!
important;
.pullquote-helvetica:
7px
.pullquote-facit:
facitweb-1"
facitweb-2"
14.CSS3的全屏背景效果
如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。
html{
url
升级会员 