读《精通CSS》第三版 ——对链接应用样式
来源:互联网 发布:打鼓谱软件 编辑:程序博客网 时间:2024/06/05 00:59
1、基于层叠对链接选择器进行排序(IE7和更低版本不支持在除链接之外的其他元素上使用伪类选择器)
LVHFA:Lord Vader Hates Furry Animals
2、让下划线更有趣
代码代替下划线
a:link,a:visited{border-bottom:1px dotted #000;}
3、已访问的链接的样式
a:visited{
padding-right:20px;
background:url(/img/check.gif) no-repeat right middle;
}
4、为链接目标设置样式
.comment:target{
background-color:yellow;
|
5、突出不同类型的连接(IE6和更低版本不支持属性选择器)
使用[att^=val]属性选择器寻找以文本http:开头的所有链接。
a[href^="http:"]{
background:url(/img/externalLink.gif) no-repeat right top;
padding-right:10px;
}
使用[att$=val]属性选择器寻找以特定值(比如:.pdf或.doc)结尾的所有链接。
a[href$=".pdf"]{
background:url(img/pdfLink.gif) no-repeat right top;
padding-right:10px;
}
6、创建类似按钮的链接
a{
display:block;
width:6.6em;
line-height:1.4;
text-align:center;
text-decoration:none;
border:1px solid #66a300;
background-color:#8cca12;
color:#fff;
}
简单的翻转:
a:hover,a:focus{
background-color:#f7a300;
border-color:#ff7400;
}
图像翻转:
a:link,a:visited{
background:url(button.jpg) left top no-repeat;
}
a:hove,a:focus{
background:url(button2.jpg);
}
Pixy样式的翻转
a:link,a:visited{
background:url(button.jpg) left top no-repeat;
}
a:hove,a:focus{
background:url(button.jpg) right bottom no-repeat;
}
7、纯CSS工具提示a.tooltip{
position:relative;
}
a.tooltip span{
display:none;
}
a.tooltip:hover span{
display:block;
position:absolute;
top:1em;
left:2em;
}
- 读《精通CSS》第三版 ——对链接应用样式
- 精通CSS-链接样式
- 对链接应用样式
- 对链接应用样式--Css学习笔记(四)
- 《精通CSS高级WEB标准解决方案》第五章、对列表应用样式和创建导航条
- 《精通CSS高级WEB标准解决方案》第六章:6.1 对数据表格应用样式
- 精通CSS+DIV网页样式与布局——基础
- 第四章 对链接应用样式
- CSS——对列表应用样式和创建导航栏
- 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式
- AspNetPager分页示例—应用CSS样式
- 精通CSS+DIV网页样式与布局——CSS文字效果
- CSS样式——文本、链接、鼠标、滚动条、背景
- 精通CSS(7.1对数据表格应用样式&7.2简单的表单布局)&R语言课堂笔记(王中贤老师)
- css不同链接样式
- CSS链接样式
- CSS之链接样式
- CSS 定义链接样式
- 用POST方式 重定向
- FileInputStream/FileOutputStream的应用
- 1044: 任意进制转换
- 黑马程序员——多线程
- Redirect in response to POST transaction
- 读《精通CSS》第三版 ——对链接应用样式
- 如何成为一个技术“牛人”
- 307 - Sticks
- 通过sql语句查询表的列和对应的数据并在jsp页面上显示
- 关于STM32的systick定时器的详细说明
- Python Post 请求
- ssh 后台执行java 程序
- STM32 v3.5固件库systick ms延时
- 2年似一场梦