30个开发人员有用的CSS代码片段

2015-06-09 Liaodeity

Css Reset by Eric Meyer

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, b, u, i, center, 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-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

根据文件格式显示不同的链接样式

a[href^="http://"] { padding-right: 20px; background: url(external.gif) no-repeat center right; }
a[href^="mailto:"] { padding-right: 20px; background: url(email.png) no-repeat center right; }
a[href$=".pdf"] { padding-right: 20px; background: url(pdf.png) no-repeat center right; }

在IE浏览器删除textarea的滚动条

textarea{
    overflow:auto;
}

浏览器特定的 hacks

* html .yourclass { }
*+html .yourclass { }
html>body .yourclass { }
html>body .yourclass { }
html:first-child .yourclass { }
html[xmlns*=""] body:last-child .yourclass { }
body:nth-of-type(1) .yourclass { }
body:first-of-type .yourclass { }
 @media screen and (-webkit-min-device-pixel-ratio:0) {
.yourclass { }
}

Clearfix

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

Fixed Footer

#footer { position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background: #999; }
* html #footer { position: absolute;  top:expression_r((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

固定宽度且居中

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

CSS3 Media Queries (这个不常用主要用于智能设备的判断显示不同的媒体)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}
 @media only screen and (min-width : 321px) {
}
 @media only screen and (max-width : 320px) {
}
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
 @media only screen and (min-width : 1224px) {
}
 @media only screen and (min-width : 1824px) {
}
 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}

多背景图片

#multiple-images {
   background: url(image_1.png) top left no-repeat,
   url(image_2.png) bottom left no-repeat,
   url(image_3.png) bottom right no-repeat;
}

更好的兼容IE浏览器的

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS3工具提示(这个很实用,看我网站的导航工具提示效果)

a { color: #900; text-decoration: none; }
a:hover { color: red; position: relative; }
a[title]:hover:after { content: attr(title); padding: 4px 8px; color: #333; position: absolute; left: 0; top: 100%; white-space: nowrap; z-index: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 4px #222; -webkit-box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #cccccc)); }
微信捐赠我们

(^_^)如果觉得本文对你有帮助(^_^)

(^_^)这位客官,打赏点票子呗(^_^)

支付宝捐赠我们

无需注册,用以下帐号即可直接登录哦