节约开发时间的十个CSS技巧
发布时间：2018-09-07 15:43:39 所属栏目：经验 来源：站长网
导读：CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。 1.简单的纯CSS Tooltip 通过这些代码，你可以做出简单的Tooltip。这
|
CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。 1.简单的纯CSS Tooltip
通过这些代码，你可以做出简单的Tooltip。这是CSS代码： Copy to Clipboard 引用的内容：[www.veryhuo.com]
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代码如下： Copy to Clipboard引用的内容：[www.veryhuo.com]
Easy <a class="tooltip" href="#">Tooltip<span>This is a Example by imbolo.com.</span></a>.
效果如图。 2.重设基本样式 为了统一不同浏览器对各种HTML标签的默认样式的渲染，我们必须从新定义各种标签的样式，这样能对以后的开发带来方便。重新定义各种HTML标签只需要在CSS的开头加入以下代码。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
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。 Copy to Clipboard引用的内容：[www.veryhuo.com]
* { 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 blue }
（编辑：威海站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
