資訊專欄INFORMATION COLUMN
摘要：宋體超鏈接邊框宋體派生超鏈接宋體屬性選擇器超鏈接宋體動態超鏈接宋體圖像翻轉超鏈接宋體工具提示宋體給鏈接加上邊框宋體在文章段落中加上超級鏈接宋體用背景圖象添加記號宋體利用派生來影響鏈接宋體利用圖片作為下劃線
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 {
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 工具提示
rocks) is a web developer basedin Brighton England.
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構造超鏈接給鏈接加上邊框
CSS構造超鏈接給鏈接加上邊框
2在文章段落中加上超級鏈接
在文章段落中加上超級鏈接 在文章段落中加上超級鏈接1在文章段落中加上超級鏈接2在文章段落中加上超級鏈接3
3用背景圖象添加記號1
在文章段落中加上超級鏈接 在文章段落中加上超級鏈接1在文章段落中加上超級鏈接2在文章段落中加上超級鏈接3
3用背景圖象添加記號2.html
用背景圖象添加記號 用背景圖象添加記號1用背景圖象添加記號2用背景圖象添加記號3
4利用派生來影響鏈接
利用派生來影響鏈接 利用派生來影響鏈接1利用派生來影響鏈接2利用派生來影響鏈接3
5利用圖片作為下劃線
利用圖片作為下劃線 利用圖片作為下劃線1利用圖片作為下劃線2利用圖片作為下劃線3
6突出顯示不同類型的鏈接
突出顯示不同類型的鏈接 突出顯示不同類型的鏈接1突出顯示不同類型的鏈接2突出顯示不同類型的鏈接3突出顯示不同類型的鏈接2
7使用屬性選擇器來做鏈接
使用屬性選擇器來做鏈接
8創建按鈕和翻轉
創建按鈕和翻轉
9按鈕具有圖象的翻轉
按鈕具有圖象的翻轉
10以訪問鏈接樣式
按鈕具有圖象的翻轉
11純 css 工具提示一段文字1
純 css 工具提示
11純 css 工具提示一張圖片2
純 css 工具提示
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1036.html
摘要：將構造函數的作用域賦值給新的對象因此指向了這個新對象。以這種方式定義的構造函數是定義在對象在瀏覽器是對象中的。構造函數在不返回值的情況下，默認會返回新對象實例。在創建子類型的實例時，不能向超類型的構造函數中傳遞參數。 創建對象 雖然Object構造函數或對象字面量都可以用來創建單個對象，但是這些方式有明顯的缺點：使用同一個接口創建很多對象，會產生大量的重復代碼。為解決這個問題，人們開始...
摘要：效果如上圖所示，主要用到的偽類，以及圓角邊框屬性。的屬性的使用然后通過定位到合適的位置。實現氣泡框結果也很簡單，就一個。的關鍵字與之類似的還有一個新的顏色屬性。實際上，這是中有史以來第一個變量，雖然功能很有限，但它真的是個變量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上圖所示，主要用到CSS3的...
摘要：效果如上圖所示，主要用到的偽類，以及圓角邊框屬性。的屬性的使用然后通過定位到合適的位置。實現氣泡框結果也很簡單，就一個。的關鍵字與之類似的還有一個新的顏色屬性。實際上，這是中有史以來第一個變量，雖然功能很有限，但它真的是個變量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上圖所示，主要用到CSS3的...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
具提示純 css 工具提示
