24, CSS 構造超鏈接

阿新 • • 發佈：2019-03-31

link com 14. 段落 ali phy 突出 lac .org

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://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:[email protected]">使用屬性選擇器來做鏈接</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:[email protected]">創建按鈕和翻轉</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:[email protected]">按鈕具有圖象的翻轉</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="images/pic7.jpg"</span>具提示純 css 工具提示
		
	</a>
</p>
</body>
</html>

24, CSS 構造超鏈接

link com 14. 段落 ali phy 突出 lac .org 1. 超鏈接邊框 2. 派生超鏈接 3. 屬性選擇器超鏈接 4. 動態超鏈接 5. 圖像翻轉超鏈接 6. CSS 工具提示 1.給鏈接加上邊框 A:link { Color: #f00;

使用CSS去除去掉超鏈接的下劃線方法

itl 的人 nor ive align gree 演示 pad cell 我們可以用CSS語法來控制超鏈接的形式、顏色變化，為什麽鏈接一定要使用下劃線和顏色區分呢？其主要原因主要是考慮到 1、視力差的人 2、色盲的人。。。下面我們做一個這樣的鏈接：未被點擊時超

css基礎 text-decoration 鼠標放超鏈接上變色並加下劃線

ide ack 學習資源 meta tca ebr www https :hover 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

超鏈接CSS樣式

lin ted 之間 ext style ngs ive :hover 方法在網頁中調用CSS的方法:在<head></head>之間加入以下一行代碼 <link href="http://pannijingling.blog.163.com

JavaScript基礎超鏈接調用js的空鏈接 void(0)

doc charset 普通人清心 image com blog body 調用鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。——————————————————

五月六日 HTML標簽超鏈接、圖片屬性和列表

one ima 網頁沖突 abc 今天 jpg self blank 今天的內容主要是HTML標簽的超鏈接圖片屬性列表的用法一、超鏈接，錨點和下載。（1）超鏈接　　　　<a href="URL" targe="_blank">網站名</a>

easyUI的datagrid列屬性添加超鏈接

ash ati eas height index columns 內容 nowrap 行號 $("#dg").datagrid({ url: "../Ajax/PurchaseAjax.ashx", queryParams://每次請求的參數

點擊超鏈接，將頁面中某個數據傳到另一個頁面

get innerhtml ear click ber cap java != plain <input type="text" name="name"> <input type="text" name="age"> <a href="jav

給TextView的部分字符串加超鏈接

mov text main void 控件 ann 字符 mat 劃線 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setC

HTML中的超鏈接

超鏈接超鏈接：也叫URL（Uniform Resource Locator），就是統一資源定位器。一般效果是我們點擊網頁上某個地方，網頁會自動跳轉到另外一個地方。一般鏈接遵循以下要求：s c h e me://host.domain:port/path/filename比如W3C的網站地址為： h tt p:

超鏈接偽類

樣式 ext color bsp 釋放 ive site 訪問 ora 偽類樣式：　　標簽名：偽類名{聲明} 　　如：a:hover{ 　　　　　　color:#000000; 　　　　　　text-decoration:underline; 　　　　　　　　} 偽類

Handsontable添加超鏈接

ack empty {} headers 事件 img -m dso arguments 　　本文在上文的基礎上，返回的數據中多了一個link超鏈接跳轉的字段，，需要在Handsontable中顯示超鏈接。　　 <!DOCTYPE html> <

修改 CKEditor 超鏈接的默認協議

添加 pan 協議 div proto ref pro ocs 修改在 config.js 中添加如下代碼 CKEDITOR.on( ‘dialogDefinition‘, function( ev ) { // Take the dialog name and i

Django學習（六）---博客文章頁面的超鏈接設置

_id 三個參數 name app dex pla django （六） pat Django中的超鏈接超鏈接的目標地址 href後面是目標地址 template中可以用 {% url ‘app_name : url_name’ param %} app_name：

HTML5----熱區（在圖片img上第一超鏈接選區）

點擊 .cn image 兩個 ref rip 圓形 htm 超鏈接 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>熱區</tit

Servlet--超鏈接，表單提交，重定向，轉發4種情況的路徑

str action local white 一句話 ont java ons isp 實際編碼中我們常常寫路徑，寫路徑既能夠寫相對路徑，也能夠寫絕對路徑。我2年曾經我就養成了習慣。僅僅要是寫路徑我從來都是寫絕對路徑，由於萬一將來我們的項目的文件夾發生變化。原來要是

Angular2 直接給元素指定超鏈接打開會帶有 `unsafe` 字樣導致數據不能加載

超鏈接 from ani sss struct class keyword 鏈接地址導致解決方法：在 component 中引入 import { DomSanitizer } from "@angular/platform-browser";然後在構造函數中註入 c

html基礎之（章節元素，章節元素，超鏈接，錨點）詳細

第四天章節元素<body></body> 文檔內容只能一個<body>元素<header></header>頭部標簽 logo 導航<main></main>網站中重要內容一個文檔中只能有一個<main>在&

html5超鏈接

超鏈接<!DOCTYPE html><html><head><meta charset="utf-8"> html 文件是以 UTF-8 編碼<title>baidu.com</title></head><body&g

C#/VB.NET對EXCEL圖片添加超鏈接

.net c# 超鏈接在日常工作中，在編輯文檔時，為了方便自己或者Boss能夠實時查看到需要的網頁或者文檔時，需要對在Excel中輸入的相關文字進行超鏈接，那麽對於一些在Excel中插入的圖片我們該怎麽實現超鏈接呢，下面給大家分享一個方法：首先簡單了解一下一款叫Spire.XLS的組件，這個組件

24, CSS 構造超鏈接

相關推薦