《精通CSS高级WEB标准解决方案》第四章:对应链接样式
来源:互联网 发布:淘宝新店铺没有访客 编辑:程序博客网 时间:2024/05/19 18:16
我在www.c09.com 发表了这个笔记并上传了原著的PDF,今天有空,转到BLOG上来。
第四章、对应链接样式
4.1 简单的链接样式[code]
/*所有链接红色*/
a{color:red;}
/*未访问链接蓝色,已访问红色*/
a:link{color:blue;}
a:visited{color:green}
/*鼠标悬停时链接红色*/
a:hover,active{color:red;}
/*平时不显示下划线,鼠标悬停时显示下划线*/
a:link,avisited{text-decoration:none;}
a:hover,a:active{text-decoration:underline}
[/code]4.2 让下划线更有趣[code]
/*用加粗效果代替下划线*/
a:link,avisited{
text-decoration:none;
font-weight:bold;
}
/*鼠标悬停时显示下划线*/
a:hover,avisited{
text-decoration:none;
border-bottom:1px dotted #000;
}
/*改变下划线式样*/
a:hover,a:active{
border-bottom-style:solid;
}
/*用图片绘制下划线*/
a:link,a:visited{
color:#666;
text-decoration:none;
background:url(images/underline1.gif) repeat-x left bottom;
}
/*鼠标悬停时显示动画背景*/
a:hover,a:active{
background-image:url(images/underline1-hover.gif);
}
[/code]4.3 突出不同类型的链接[code]
/*为所有外部链接添加一个类,为该类添加一个外部邮件图标*/
.external{
backgrount:url(images/externallink.gif) no-repeat right top;
padding-right:10px;
}
/*不用手工添加类,自动判别外部链接(仅新版本浏览器可用)*/
a[href^="http:"]{
background:url(images/externallink.gif) no-repeat right top;
padding-right:10px;
}
/*本站链接除外*/
a[href^="http://www.cn09.com"],a[href^="http://cn09.com"]{
background-image:none;
padding-right:0;
}
/*类似的,可用添加邮件链接图标*/
a[href^="mailto:"]{
background:url(images/email.png) no-repeat right top;
padding-right:10px;
}
/*非标准协议如aim*/
a[href^="aim:"]{
background:url(images/im.png) no-repeat right top;
padding-right:10px;
}
/*pdf和word文档*/
a[href$=".pdf"]{
background:url(images/pdflink.gif) no-repeat right top;
padding-right:10px;
}
a[href$=".doc"]{
background:url(images/doc.gif) no-repeat right top;
padding-right:10px;
}
[/code]4.4 创建按钮和翻转[code]
/*链接显示为按钮*/
a{
display:block;
width:6em;/*保持IE5.x以下版本兼容*/
padding:0.2em;
line-height:1.4;
background-color:#94b8e9;
border:1px solid black;
color:#000;
text-decoration:none;
text-align:center;
}
/*翻转*/
a:hover{
background-color:#369;
color:#fff;
}
/*具有图像的翻转*/
a:link,a:visited{
display:block;
width:200px;
height:40px;
color:#000;
text-decoration:none;
background:#94b8e9 url(images/button.gif) no-repeat left top;
text-indent:50px;
}
a:hover{
background:#369 url(images/button_over.gif) no-repeat left top;
color:#fff;
}
/*一幅图像,*/
a:link,a:visited{
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
background:#94B8E9 url(images/pixy-rollover.gif) no-repeat left top;
text-indent:50px;
}
a:hover{
background-color:#369;
background-position:right top;
color:#fff;
}
[/code]4.5 已访问的链接样式[code]
/*在已访问的链接后打钩*/
a:visited{
padding-right:20px;
background:url(check.gif) right middle;
}
/*整个UL列表中的系列链接中,已访问的打钩*/
ul {
list-style:none;
}
li{
margin:5px 0;
}
li a{
display:block;
width:300px;
height:30px;
line-height:30px;
color:#000;
text-decoration:none;
background:#94b8e9 url(images/visited.gif) no-repeat left top;
text-indent:10px;
}
li a:visited{
background-position:right top;
}
[/code]4.6 纯CSS工具提示[code]
/*用CSS定制的精美提示代替HTML标签的title属性
*目前只有FIREFOX等浏览器才能支持
*/
<p>
欢迎访问<a href="http://www.cn09.com" class='tooltip'>
cn09.com<span>(JQUERY论坛)</span></a>
</p>
a.tooltip{
position:relative;
}
a.tooltip sapn{
display:none;
}
a.tooltip:hover span{
display:block;
position:absolute;
top:1em;
left:2em;
}
a.tooltip:hover span{
display:block;
position:absolute;
top:1em;
left:2em;
padding:0.2em 0.6em;
border:1px solid #996633;
background-color:#ffff66;
color:#000;
}
[/code]
- 《精通CSS高级WEB标准解决方案》第四章:对应链接样式
- 读书笔记--精通CSS高级Web标准解决方案(五)---链接样式
- 《精通CSS高级WEB标准解决方案》第五章、对列表应用样式和创建导航条
- 《精通CSS高级WEB标准解决方案》第六章:6.1 对数据表格应用样式
- 精通css高级web标准解决方案
- 精通CSS高级Web标准解决方案【读书笔记】
- 精通CSS高级Web标准解决方案
- 《精通CSS-高级Web标准解决方案》 笔记
- 《精通CSS高级WEB标准解决方案》第七章 布局
- 读书笔记--精通CSS高级Web标准解决方案(六)---无序列表样式
- 读书笔记--精通CSS高级Web标准解决方案(七)--表格样式
- css学习六:学习《精通css:高级web标准解决方案》
- 精通CSS--高级WEB标准解决方案(第一章)-------读书笔记
- 《精通CSS高级WEB标准解决方案》第一章:基础知识
- 精通CSS:高级web标准解决方案之读书笔记(一)
- 读书笔记--精通CSS高级Web标准解决方案(八)---布局
- 精通CSS:高级web标准解决方案之读书笔记(二)
- 精通CSS高级Web标准解决方案 Chapter 5 Styling Links
- 用PXE引导调用kickstart安装CentOS 5 (转自http://www.shunqiziran.com/?p=97)
- 《精通CSS高级WEB标准解决方案》第三章:背景图像和图像替换
- JfreeChart使用例子
- 如何混合使用vc++和汇编
- linux 图形界面
- 《精通CSS高级WEB标准解决方案》第四章:对应链接样式
- 共享内存(内存映射)
- JfreeChart安装配置
- 解决MyEclipse编辑jsp输入.死机、代码提示死机问题
- 一个通用的泛型 GenericHibernateDao
- 如何写扩张mib
- eclipseSvn插件安装
- QQwry到Sqlite3
- 《精通CSS高级WEB标准解决方案》第五章、对列表应用样式和创建导航条