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

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)); }

本文作者： Liaodeity

本文链接： https://www.jianbaizhan.com/article/223.html

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！