10个节约开发时间的CSS技巧.docVIP

CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。 1.简单的纯CSS Tooltip 通过这些代码，你可以做出简单的Tooltip。这是CSS代码： 1234567891011121314151617 a:hover { background:#ffffff; /*要兼容IE6的话必须添加背景色*/ text-decoration:none;}a.tooltip span { display:none; padding:2px 3px; margin-left:8px; width:130px;}a.tooltip:hover span{ display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;} HTML代码如下： 1 Easy a class=tooltip href=#TooltipspanThis is a Example by ./span/a. 效果如图。 2.重设基本样式 为了统一不同浏览器对各种HTML标签的默认样式的渲染，我们必须从新定义各种标签的样式，这样能对以后的开发带来方便。重新定义各种HTML标签只需要在CSS的开头加入以下代码。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 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: none;}?/* 元素获得焦点时的样式! */:focus { outline: 0;}?/* 特殊文本的样式! */ins { text-decoration: none;}del { text-decoration: line-through;}?/* 细线表格样式 */table { border-collapse: collapse; border-spacing: 0;} 3.方便的CSS调试器 这段代码可以把页面上的各种标签嵌套用不同的线条划分出来，方便你找出BUG。 12345678 * { outline: 2px dotted red }* * { outline: 2px dotted green }* * * { outline: 2px dotted orange }* * * * { outline: 2px dotted blue }* * * * * { outline: 1px solid red }* * * * * * { outline: 1px solid green }* * * * * * * { outline: 1px solid orange }* * * * * * * * { outline: 1px solid blu