css十个经典案例Word下载.docx
《css十个经典案例Word下载.docx》由会员分享，可在线阅读，更多相关《css十个经典案例Word下载.docx（11页珍藏版）》请在冰点文库上搜索。
}
Thisisanoldie,butapperantlyitisnotasobviousasyouwouldthink.
2.
StickyFooter（makefooteralwaysbeonbottomwithoutabsolutepositioning）
id="
main"
clearfix"
3.<
5.<
footer"
6.<
7.
*
0;
padding:
8.html,
body,
#wrap
height:
100%;
9.body
{height:
min-height:
10.#main
padding-bottom:
150px;
/*
must
be
same
height
as
the
footer
*/
11.#footer
12.position:
relative;
13.margin-top:
-150px;
negative
value
of
14.height:
15.clear:
both;
16./*
CLEAR
FIX*/
17..clearfix:
after
{content:
"
."
;
18.display:
block;
19.height:
20.clear:
21.visibility:
hidden;
22..clearfix
{display:
inline-block;
23./*
Hides
from
IE-mac
24.*
html
.clearfix
1%;
25..clearfix
26./*
End
hide
Asofrecentlyihavehadtousethisover50times…ithinkthisisoneofthemostimportanttricksyouwilllearntoday.
3.
Cross-BrowserMinHeight
1..element
600px;
auto
important;
Youcanreplacethemin-heightandheigthwith12emoranothervaluethatworksforyou.
4.
BoxShadow（CSS3）
1..box
box-shadow:
5px
#666;
-moz-box-shadow:
-webkit-box-shadow:
AsyoucanseesincethisisaCSS3propertyyouwillneedallthethreecommandstomakeitcrossbrowser（exceptforieofcourse）.Thefirst2measurementsareforhorizontaloffsetandtheverticaloffset.Thethirdnumberisfortheblurradius.Andthelastisthecoloroftheshadow.
5.
TextShadow（CSS3）withIEhack
1..text
text-shadow:
1px
filter:
Shadow（Color=#666666,
Direction=135,
Strength=5）;
Thistechniqueisgreatforallmodernbrowsers,theIEfixworksbutitisnotamazingquality.
6.
CrossBrowserCSSOpacity
.transparent
2./*
Modern
Browsers
opacity:
0.7;
3./*
IE
8
-ms-filter:
progid:
DXImageTransform.Microsoft.Alpha（Opacity=70）"
4./*
5-7
alpha（opacity=70）;
5./*
Netscape
-moz-opacity:
6./*
Safari
1
-khtml-opacity:
7.}
Opacitycanbeusedforplentyofelements,itaddsacertainnewagestyleweallstrivefor.
Noticethatinsomebrowserstransperancyisinheritedbyallchildelements!
7.
TheFamousMeyerReset
html,
div,
span,
applet,
object,
iframe,
2.h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
3.a,
abbr,
acronym,
address,
big,
cite,
code,
4.del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
5.small,
strike,
strong,
sub,
sup,
tt,
var,
6.dl,
dt,
dd,
ol,
ul,
li,
7.fieldset,
form,
label,
legend,
8.table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td
9.margin:
10.padding:
11.border:
12.outline:
13.font-weight:
inherit;
14.font-style:
15.font-size:
16.font-family:
17.vertical-align:
baselinebaseline;
18.}
19./*
remember
to
define
focus
styles!
20.:
21.outline:
22.}
23.body
24.line-height:
1;
25.color:
black;
26.background:
white;
27.}
28.ol,
ul
29.list-style:
none;
30.}
31./*
tables
still
need
'
cellspacing="
0"
in
markup
32.table
33.border-collapse:
separate;
34.border-spacing:
35.}
36.caption,
37.text-align:
left;
38.font-weight:
normal;
39.}
40.blockquote:
before,
blockquote:
after,
41.q:
q:
42.content:
43.}
44.blockquote,
q
45.quotes:
46.}
Thisisthemostusefulcssresetoutthere,iuseitforalmosteverythingIworkon（eventhe52framework,comingsoon）.
8.
Removingthedottedoutlines
1.a,
a:
active
outline:
Ifindmyselfgettingveryannoyedwiththedottedoutline（especiallyfortext-indentedelementsthatareoffthepage）.
9.
RoundedCorners（nonie）
.element
2.-moz-border-radius:
5px;
3.-webkit-border-radius:
4.border-radius:
future
proofing
5.}
6..element-top-left-corner
7.-moz-border-radius-topleft:
8.-webkit-border-top-left-radius:
9.}
Loveroundedcorners?
Don’twanttoslaveoverimagesandelementstogettheeffect?
Thisisyoursolution,andelementsstilllookfineinie.
10.
OverrideInlineStyles
.override
2.font-size:
14px
3.}
Thiscomesinhandyplentyoftimes,Ipersonallyuseitwaytoomuch
everytimesomethingdoesn’tworkItestifitsjustnotbeingappliedbecauseofsomeotherstyle.
升级会员 