节约开发时间的十个CSS技巧
发布时间:2018-09-08 13:15:30 所属栏目:创业 来源:站长网
导读:CSS已经成为网页前段计一律个很是重要的部门,因为写CSS时必要思量的题目很是多,内行们建设新页面是凡是会相沿早年的CSS框架。可是新手没有本身的框架,这篇文章可以给新手们一些启迪。 1.简朴的纯CSS Tooltip 通过这些代码,你可以做出简朴的Tooltip。这
CSS已经成为网页前段计一律个很是重要的部门,因为写CSS时必要思量的题目很是多,内行们建设新页面是凡是会相沿早年的CSS框架。可是新手没有本身的框架,这篇文章可以给新手们一些启迪。 1.简朴的纯CSS Tooltip 通过这些代码,你可以做出简朴的Tooltip。这是CSS代码: Copy to Clipboard![]() 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![]() 2.重设根基样式 为了同一差异赏识器对各类HTML标签的默认样式的渲染,我们必需重新界说各类标签的样式,这样能对往后的开拓带来利便。从头界说各类HTML标签只必要在CSS的开头插手以下代码。 Copy to Clipboard ![]() 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![]() * * { 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 }
(编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |