佳通微博

2012-10-15 09:01:16　过客　查看主题

第二种是通过下边框假冒下划线
Quoted from Unkown:

2012-10-15 08:49:17　过客　查看主题

第三种就是用背景图片。
这个可以做到很多变化，因为我们可以用上各种线条图片。
缺点就是当链接多了，在读取图片的时候可能会比较消耗资源，慢一些。

不同的下划线

2012-10-15 08:44:52　过客　查看主题

还记得有些超链接文本没有下划线，但是当鼠标移到它的上面的时候，下划线就浮现出来的情况么？自定义的下划线也可以做到这个效果，那就在:hover上设定超链接背景，而不是在超链接标记a上设定，如下：
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}

2012-10-15 08:41:01　过客　查看主题

静态下划线
a#example4a {
text-decoration: none;
background: url(’/pic/20069/200696144112132.gif’) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px
}

2012-10-15 08:39:39　过客　查看主题

浮动花朵效果下划线
a#example4b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 10px;
}
a#example4b:hover {
background: url(’/pic/20069/200696144112132.gif’) repeat-x 100% 100%;
}

2012-10-15 08:38:22　过客　查看主题

静态箭头下划线
a#example1a {
text-decoration: none;
background: url(’/pic/20069/200696144112997.gif’) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 5px
}

2012-10-15 08:35:33　过客　查看主题

浮动动画箭头下划线（这里箭头会出现滚动，不过这一滚动图片的效果只在部分浏览器中看得到）
a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 5px;
}
a#example2b:hover {
background: url(’/pic/20069/200696144113188.gif’) repeat-x 100% 100%;}

2012-10-08 16:00:19　 飞速如风　查看主题

2. 字体类形：font-family
语法：{font-family:字体1,字体2,字体3,...}
作用：调用客户端字体
说明：
·当指定多种字体时，用“，”分隔每种字体名称。
·当字体名称包含两个以上分开的单词时，用“”把该字体名称括起来。
·当样式规则外已经有“”时，用‘’代替“”。
注意：如果在font-family后加上多种字体的名称，浏览器会按字体名称的顺序逐一在用户的计算机里寻找并匹配显示已经安装的字体，如果全部找不到，就显示计算机默认字体。

2012-10-08 15:55:20　 飞速如风　查看主题

3．字体大小：font-size
语法：{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
作用：设定文字大小，参考取值单位
说明：使用比例关系
·xx-small
·x-small
·small
·medium
·large
·x-large
·xx-large

2012-10-08 15:54:47　 飞速如风　查看主题

4. 字体风格：font-style
语法：{font-style:inherit|italic|normal|oblique}
作用：使文本显示为扁斜体或斜体等表示强调
说明：
·inherit　继承
·italic 　斜体
·normal　正常
·oblique　偏斜体