节约开发时间的十个CSS技巧

发布时间：2018-09-10 06:05:08 所属栏目：经验来源：站长网

导读：CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。 1.简单的纯CSS Tooltip 通过这些代码，你可以做出简单的Tooltip。这

CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。

1.简单的纯CSS Tooltip

简单的纯CSS Tooltip

通过这些代码，你可以做出简单的Tooltip。这是CSS代码：

Copy to Clipboard Liehuo.Net Codes

引用的内容：[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 Liehuo.Net Codes

引用的内容：[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 Liehuo.Net Codes

引用的内容：[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 Liehuo.Net Codes

引用的内容：[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 }

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!