24, CSS 构造超链接
1. 超链接边框
2. 派生超链接
3. 属性选择器超链接
4. 动态超链接
5. 图像翻转超链接
6. CSS 工具提示
1.给链接加上边框
A:link {
Color: #f00;
Text-decoration: none;
Border-bottom: 1px dashed #333;
Line-height: 150%;
}
2.在文章段落中加上超级链接
A:link {
Color: #f00;
Text-decoration: none;
Border: 1px solid #333;
Background: #ccc;
Padding: 2px;
Line-height: 150%;
}
3. 用背景图象添加记号
A:link {
Color:#f00;
Padding: 0 15px 0 0;
Background:url(images/arrow.gif) no-repeat right center;
}
A:visited {
Color:#999;
Padding: 0 15px 0 0;
Background:url(images/checkmark.gif) no-repeat right center;
}
4.利用派生来影响链接
P a:link, p a:visited, p a:hover, p a:active {
Color:#f00;
}
Ul a{
Color:#000;
}
5.利用图片作为下划线
A:link, a:visited {
Color: #666;
Text-decoration:none;
Background: url(images/underline1.gif) repeat-x left bottom;
}
A:hover, a:active {
Background:url(images/underline1-hover.gif);
}
6.突出显示不同类型的链接
.external {
Background:url(images/externalLink.gif) no-repeat right top;
Padding-right: 10px;
}
7.使用属性选择器来做链接
a[href^="http:"] {
background:url(images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
a[href^="mailto:"] {
background:url(images/email.png) no-repeat right top;
padding-right: 13px;
}
8.创建按钮和翻转
a {
Display: block;
Width: 6em;
Padding: 02.em;
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;
}
9.具有图象的翻转
a {
Display: block;
Width: 200px;
Height: 40px;
Line-height: 40px;
Background-color: #94b8e9;
Color: #000;
Text-decoration: none;
Text-indent:50px;
Background: #94b8ea url(images/button.gif) no-repeat left top;
}
A:hover {
Background: #369 url(images/button_over.gif) no-repeat left top;
Color: #fff;
}
9.以访问链接样式
<ul>
<li><a href="http://www.andybudd.com/">Andy Budd's Blogography</a></li>
<li><a href="http://www.stuffandnonsense.co.uk/">Stuff and Nonsense</a></li>
<li><a href="http://www.hicksdesign.co.uk/journal/">Hicks Design</a></li>
<li><a href="http://www.clagnut.com/">Clagnut</a></li>
<li><a href="http://www.htmldog.com/">HTML Dog</a></li>
<li><a href="http://adactio.com/journal/">Adactio</a></li>
<li><a href="http://www.allinthehead.com/">All In TheHead</a></li>
<li><a href="http://www.markboulton.co.uk/journal/">Mark Boulton</a></li>
<li><a href="http://www.ian-lloyd.com/">Ian Lloyd</a></li>
</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;
}
10.纯 css 工具提示
<p>
<a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website
rocks) </span></a> is a web developer basedin Brighton England.
</p>
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover {
font-size: 100%; /* Fixes bug in IE5.x/Win */
}
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;
}
1CSS构造超链接给链接加上边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS构造超链接给链接加上边框</title>
<style type="text/css">
a{
text-decoration: none;
color: red;
border-bottom: 1px dashed #333;
background: red;
display: block;
width: 160px;
line-height: 150%;
}
</style>
</head> <body>
<div>
<ul>
<li><a href="#">CSS构造超链接给链接加上边框</a></li>
<li><a href="#">CSS构造超链接给链接加上边框</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>
2在文章段落中加上超级链接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在文章段落中加上超级链接</title>
<style type="text/css">
a{
border: 1px solid #333;
background: #ccc;
text-decoration: none;
color: #f00;
line-height: 150%; }
</style>
</head> <body>
<div> <p>在文章段落中加上超级链接1<a href="#">在文章段落中加上超级链接2</a>在文章段落中加上超级链接3</li> </div>
</body>
</html>
3用背景图象添加记号1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在文章段落中加上超级链接</title>
<style type="text/css">
a{ background:url(images/2.jpg) no-repeat left center;
text-decoration:none;
color: #f00;
line-height:150%;
padding-left:15px; }
</style>
</head> <body>
<div> <p>在文章段落中加上超级链接1<a href="#">在文章段落中加上超级链接2</a>在文章段落中加上超级链接3</li> </div>
</body>
</html>
3用背景图象添加记号2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用背景图象添加记号</title>
<style type="text/css">
a{
background:url(images/2.jpg) no-repeat left center;
text-decoration:none;
color: #f00;
line-height:150%;
padding-left:15px; }
a:hover{
background: url(images/8.png) no-repeat left center;
}
</style>
</head> <body>
<div> <p>用背景图象添加记号1<a href="#">用背景图象添加记号2</a>用背景图象添加记号3</p> </div>
</body>
</html>
4利用派生来影响链接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用派生来影响链接</title>
<style type="text/css">
a:link,a:visited,a:active,a:hover{ background:url(images/2.jpg) no-repeat left center;
text-decoration:none;
color: #f00;
line-height:150%;
padding-left:15px; }
a:visited{
background: url(images/8.png);
}
</style>
</head> <body>
<div> <p>利用派生来影响链接1<a href="#">利用派生来影响链接2</a>利用派生来影响链接3</p> </div>
</body>
</html>
5利用图片作为下划线
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用图片作为下划线</title>
<style type="text/css">
a{
background:url(images/11.png) repeat-x left bottom;
text-decoration: none;
}
a:hover{
background:url(images/12.png) repeat-x left bottom;
}
</style>
</head> <body>
<div> <p>利用图片作为下划线1<a href="#">利用图片作为下划线2</a>利用图片作为下划线3</p> </div>
</body>
</html>
6突出显示不同类型的链接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>突出显示不同类型的链接</title>
<style type="text/css">
a{
color:red; }
a:hover{
color:blue;
}
.ex{
color: green;
background: url(images/8.png) no-repeat left center;
padding: 10px;
}
</style>
</head> <body>
<div> <p>突出显示不同类型的链接1<a href="#">突出显示不同类型的链接2</a>突出显示不同类型的链接3<a href="#" class="ex">突出显示不同类型的链接2</a></p> </div>
</body>
</html>
7使用属性选择器来做链接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用属性选择器来做链接</title>
<style type="text/css">
a[href^="http:"]{
background: url(images/8.png) no-repeat left center;
padding-left: 10px;
color: red;
}
a[href^="mailto:"]{
background: url(images/2.jpg) no-repeat left center;
padding-left: 10px;
color: green;
} </style>
</head> <body>
<div> <div>属性选择器来做链接1<a href="#">使用属性选择器来做链接2</a>使用属性选择器来做链接3<a href="http://www.baidu.com">性选择器来做链接3<a href="mailto:123@qq.com">使用属性选择器来做链接</a></div> </div>
</body>
</html>
8创建按钮和翻转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建按钮和翻转</title>
<style type="text/css">
a {
Display: block;
Width:160px;
Padding: 02.em;
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;
} </style>
</head> <body>
<div> <div>创建按钮和翻转1<a href="#">创建按钮和翻转2</a>创建按钮和翻转3<a href="http://www.baidu.com">创建按钮和翻转3<a href="mailto:123@qq.com">创建按钮和翻转</a></div> </div>
</body>
</html>
9按钮具有图象的翻转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按钮具有图象的翻转</title>
<style type="text/css">
a {
Display: block;
Width:200px;
height: 44px;
Line-height:40px;
Background:url(images/13.png);
font-size: 12px;
Color: #000;
Text-decoration: none;
Text-align: center;
}
a:hover {
Background:url(images/14.png);
color:#fff;
} </style>
</head> <body>
<div> <div>按钮具有图象的翻转1<a href="#">按钮具有图象的翻转2</a>按钮具有图象的翻转3<a href="http://www.baidu.com">按钮具有图象的翻转3<a href="mailto:123@qq.com">按钮具有图象的翻转</a></div> </div>
</body>
</html>
10以访问链接样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按钮具有图象的翻转</title>
<style type="text/css">
ul{
list-style-type: none; }
ul li{
height: 25px;
}
ul li a{
width: 260px;
height:30px;
line-height: 30px;
display: block;
background: url(images/16.png) no-repeat left center;
padding-left:30px;
color: red;
}
ul li a:visited{
color: maroon;
background: url(images/15.png) no-repeat left center;
}
</style>
</head> <body>
<ul>
<li><a href="http://www.andybudd.com/">Andy Budd's Blogography</a></li>
<li><a href="http://www.stuffandnonsense.co.uk/">Stuff and Nonsense</a></li>
<li><a href="http://www.hicksdesign.co.uk/journal/">Hicks Design</a></li>
<li><a href="http://www.clagnut.com/">Clagnut</a></li>
<li><a href="http://www.htmldog.com/">HTML Dog</a></li>
<li><a href="http://adactio.com/journal/">Adactio</a></li>
<li><a href="http://www.allinthehead.com/">All In TheHead</a></li>
<li><a href="http://www.markboulton.co.uk/journal/">Mark Boulton</a></li>
<li><a href="http://www.ian-lloyd.com/">Ian Lloyd</a></li>
</ul>
</body>
</html>
11纯 css 工具提示一段文字1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯 css 工具提示</title>
<style type="text/css">
body{
margin: 100px;
}
p a{
position: relative;
}
p a span{
display: none;
}
p a:hover span{
position: absolute;
top: 20px;
left: 0px;
display:block;
border: 1px solid black;
width:150px;
height;100px;
background: lightyellow;
}
p a:hover{
font-size: 100%;
}
</style>
</head> <body>
<p>
<a href="http://www.baidu.com">纯 css 工具提示<span>纯 css 工具提示</span>具提示纯 css 工具提示 </a>
</p>
</body>
</html>
11纯 css 工具提示一张图片2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯 css 工具提示</title>
<style type="text/css">
body{
margin: 100px;
}
p a{
position: relative;
}
p a span{
display: none;
}
p a:hover span{
position: absolute;
top: 20px;
left: 0px;
display:block;
border: 1px solid black;
width:150px;
height;100px;
background: lightyellow;
}
p a:hover{
font-size: 100%;
}
</style>
</head> <body>
<p>
<a href="http://www.baidu.com">纯 css 工具提示<span>纯 css 工具提示<br/><img src="data:images/pic7.jpg"</span>具提示纯 css 工具提示 </a>
</p>
</body>
</html>
24, CSS 构造超链接的更多相关文章
- CSS构造超链接
超链接边框 派生超链接 属性选择器超链接 动态超链接 图像翻转超链接 CSS工具提示 1.给链接加上边框 A:link { Color: #f00; Text- ...
- css构造块级元素
css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...
- css构造文本
1. 1. 文本缩进text-indent:值:值为数字,最常用的数值单位是px(像素),也可以直接是百分比!text-indent:100px;text-indent:10%;2. 文本对齐text ...
- 23 , CSS 构造列表与导航
1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...
- 学习笔记 第七章 使用CSS美化超链接
第7章 使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1 定义超链接 在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...
- HTML&CSS基础-超链接
HTML&CSS基础-超链接 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,有三个网页 <!DOCTYPE html> <!--Docty ...
- CSS控制超链接
一.伪类 CSS控制元素的某种状态---偽类(用于向某些选择器添加特殊的效果) 偽类的语法:元素标签 偽类名称{属性:属性值;} 二.超链接 a:link:未访问的链接 ...
- 【CSS】使用CSS改变超链接样式
超链接代码 <ahrefahref="http://www.divCSS5.com/"target="_blank" title="关于divC ...
- Codeforces Round #268 (Div. 1) A. 24 Game 构造
A. 24 Game Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/468/problem/A D ...
随机推荐
- 0511JS流程练习
一.输入三个数,判断大小 var one = prompt("请输入第一个数"); var two = prompt("请输入第二个数"); var three ...
- HTML DOM对象的属性和方法
HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...
- Net Core动态加载webservice/WCF
1.动态加载的目的 前端时间和顺丰对接了个项目(PS:顺丰的开发对外能力真的是掉粉),用的webservice 测试时用的无固定IP访问,正式版需要固定IP访问,我的理解是web服务都是全网络可以访问 ...
- Spring Security 集成 CAS(基于HTTP协议版本)
Spring Security 集成 CAS(基于HTTP协议版本) 近段时间一直研究Spring Security 集成 CAS,网上资料相关资料也很多,不过大都是基于Https的安全认证;使用ht ...
- Stack编程队列
题目描述:用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 首先定义两个栈 Stack<Integer> stack1 = new Stack<I ...
- Hibernate Validator 6.0.9.Final - JSR 380 Reference Implementation: Reference Guide
Preface Validating data is a common task that occurs throughout all application layers, from the pre ...
- 电梯调度算法---SCAN算法
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 扫描(SCAN)调度算法:总是从磁臂当前位置开始,沿磁臂的移动方向去选择离当前磁臂最近的那个柱面的访问者.如果沿磁臂的方向无请求访问时,就改变磁 ...
- Android 自定义 ViewPager 打造千变万化的图片切换效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主 ...
- Android 源码解析 之 setContentView
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41894125,本文出自:[张鸿洋的博客] 大家在平时的开发中,对于setCont ...
- BITE
<Google软件测试之道> 读后感言: p147 提到的BITE实在是太让人心动了, 一个简单的动作即可提交一个信息齐全的bug,连非专业测试人员也能轻松做到.身边很多人也都碰到过提交b ...