10个很有用的css代码

1. 页面居中

HTML

1
<div class="wrap">  </div><!-- end wrap -->

CSS

1
.wrap { width:960px; margin:0 auto;}

2. 固定页脚(不通过绝对定位使页脚始终固定在底部)

HTML

1
2
3
4
<div id="wrap">
<div id="main" class="clearfix"> </div>
</div>
<div id="footer"> </div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
* { margin:0; padding:0; } 
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}

/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

3. 跨浏览器实现最小高

1
2
3
4
5
.element { 
min-height:600px;
height:auto !important;
height:600px;
}

4. 区块阴影效果

1
2
3
4
5
.box { 
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
}

5. 文字阴影效果及IE下的Hack

1
2
3
4
.text { 
text-shadow: 1px 1px 1px #666;
filter: Shadow(Color=#666666, Direction=135, Strength=5);
}

6. 跨浏览器CSS透明效果

1
2
3
4
5
6
7
.transparent {    
/* Modern Browsers */ opacity: 0.7;
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
/* IE 5-7 */ filter: alpha(opacity=70);
/* Netscape */ -moz-opacity: 0.7;
/* Safari 1 */ -khtml-opacity: 0.7;
}

7. 重置CSS, 著名的Meyer Reset

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
39
40
41
42
43
44
45
46
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

8. 移除点线外边框

1
a, a:active { outline: none; }

9. 圆角CSS(非IE)

1
2
3
4
5
6
7
8
9
.element {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
}
.element-top-left-corner {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}

10. 使用!important 重写行内样式

1
2
3
.override {
font-size: 14px !important;
}