css技巧收藏
2012-11-26 13:34
363 查看
属性重置
根据文件格式显示不同的链接样式
影子盒
文本框和按钮的漂亮样式,兼容浏览器
让div在body中垂直居中
使用图片集。可以放在一个span里面,但是里面不用放空格已腾出空间
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; }
相关文章推荐
- div+css构建模板技巧收藏
- 对付CSS兼容问题的十个超级技巧(收藏)
- CSS经典技巧【收藏】
- 20条CSS高级技巧(推荐收藏)
- 收藏CSS经典技巧
- div+css构建模板技巧收藏
- 收藏了很久的CSS的十八般技巧
- 收藏了很久的CSS的十八般技巧
- 值得收藏的CSS经典技巧之一
- 值得收藏的CSS经典技巧之二
- CSS兼容性(IE和Firefox)技巧大全-先收藏一下
- CSS2.0中最常用的18条技巧收藏[转][CSS]
- SQLServer2005中的几个统计技巧 收藏 此文于2009-09-04被推荐到CSDN
- 掌握房贷技巧可让你少奋斗十年(收藏)
- 大集合【CSS兼容IE6,IE7,FF的技巧 + 其他页面技巧】[转]
- 日常收藏的jquery技巧
- 常用的 CSS 技巧
- CSS 调试的一些技巧
- 几个经典的css技巧
- Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧