CSS技巧:节约网页代码编写时间

楼主^#

更多发布于：2012-01-31 23:25

[] 1

[table=99%][tr][td]
CSS已经成为网页前端设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。
1.简单的纯CSS Tooltip
通过这些代码，你可以做出简单的Tooltip。这是CSS代码：[table][tr][td][pre]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[/pre][/td][td][pre]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;
}[/pre][/td][/tr][/table]

HTML代码如下：

[pre]1
[/pre]

[pre]Easy <a class="tooltip" href="#">Tooltip<span>This is a Example by imbolo.com.</span></a>.[/pre]

效果如图。
2.重设基本样式
为了统一不同浏览器对各种HTML标签的默认样式的渲染，我们必须从新定义各种标签的样式，这样能对以后的开发带来方便。重新定义各种HTML标签只需要在CSS的开头加入以下代码。

[pre]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
[/pre]

[pre]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;
}[/pre]

3.方便的CSS调试器
这段代码可以把页面上的各种标签嵌套用不同的线条划分出来，方便你找出BUG。

[pre]1
2
3
4
5
6
7
8
[/pre]

[pre]* { 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 }[/pre]

4.使一个未设定宽度的DIV居中
对于一个有固定宽度的DIV容器，你可以轻松地通过margin:auto属性令他居中。如果要居中的DIV容器并没有设置宽度的话，你可以使用下面的CSS代码：

[pre]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[/pre]

[pre].content {
   margin: 0 auto 8px;
   display: table;
   }

.content div {
   display: table-cell;
   }

＜!--[if IE]＞
.content {
   display: block;
   text-align: center;
   }
.content div {
   display: inline;
   zoom: 1;
}
＜![endif]-->[/pre]

5.为大图片添加伪AJAX的载入图标
等待图片下载是浏览网页是意见烦人的事，但用javaScript动态载入图片技术难度又比较大。你可以用CSS加上一个载入图标，缓解访客等待加载时的情绪。

[pre]1
[/pre]

[pre]img { background: url(loading.gif) no-repeat center center; }[/pre]

[/td][/tr][/table]