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,
 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;
 }
 
 /* remember to define focus styles! */
 :focus {
     outline: 0;
 }
 
 /* remember to highlight inserts somehow! */
 ins {
     text-decoration: none;
 }
 
 del {
     text-decoration: line-through;
 }
 
 /* tables still need 'cellspacing="0"' in the markup */
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }

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

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

影子盒

 box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

文本框和按钮的漂亮样式，兼容浏览器

.intxt
        {
            border: 1px solid #D8D8D8;
            width: 200px;
            height: 18px;
            padding: 5px 0 5px 5px;
            line-height: 18px;
            font-size: 14px;
            box-shadow: inset 1px 1px 2px #E9E9E9;
        }
        .serchBut
        {
            width: 108px;
            height: 28px;
            border: 1px solid #D87114;
            font-size: 14px;
            cursor: pointer;
            background: #FF9E32;
            background: -moz-linear-gradient(top, #FFD29A 0, #FFA53A 5%, #FF882A 100%);
            background: -webkit-linear-gradient(top, #FFD29A 0, #FFA53A 5%, #FF882A 100%);
            background: linear-gradient(to bottom, #FFD29A 0, #FFA53A 5%, #FF882A 100%);
        }

让div在body中垂直居中

position:absolute;
	top:50%;
	left:50%;
	margin:-150px 0 0 -200px;
	width:400px;
	height:300px;

使用图片集。可以放在一个span里面，但是里面不用放空格已腾出空间

.ico
{
	background: url(/images/Menpiao/iconset.png) no-repeat -100px -100px;
	padding-left:20px;
}