10个常用css代码片段

作者: jaclon 分类: CSS 发布时间: 2011-03-15 09:41 ė 6没有评论

1. 将网页或元素居中


HTML

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

CSS

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

2. Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)


HTML

<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>

CSS

* { 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.最小高度


CSS

.element { min-height:600px; height:auto !important; height:600px; }

4.Box阴影(CSS3)

CSS

.box {
    box-shadow: 5px 5px 5px #666; 
    -moz-box-shadow: 5px 5px 5px #666; 
    -webkit-box-shadow: 5px 5px 5px #666;
}

5.文本阴影

CSS

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

6.跨浏览器层透明

CSS

.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.著名的 Meyer Reset(重置)

CSS

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.删除虚线轮廓

CSS

a, a:active { outline: none; }

9.圆角

CSS

.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.覆盖内联的样式

CSS

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

原文链接:http://web.enavu.com/tutorials/top-10-css-snippets/

本文出自 肥蕉博客@IT技术,热门话题,生活随笔,美图欣赏,转载时请注明出处及相应链接。

本文永久链接: http://www.bananawolf.com/html/2011/03/378.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

Ɣ回顶部