css十个经典案例Word下载.docx
- 文档编号:5761061
- 上传时间:2023-05-05
- 格式:DOCX
- 页数:11
- 大小:51.15KB
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.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 十个 经典 案例