快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-27

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

1.简单的纯CSS Tooltip
通过这些代码,你可以做出简单的Tooltip。这是CSS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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="#">Tooltip<span>This is a Example by imbolo.com.</span></a>.

效果如图。

2.重设基本样式

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

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
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;
}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号