此示例使用 HTML + Canvas 實現滑動拼圖驗證碼。Canvas繪制帶隨機缺口的背景，獨立滑塊按鈕監聽滑鼠/觸摸拖拽，實時將滑塊位置映射到Ca...
CSS鏈接樣式，用html演示和解釋
雲端運算與程式碼
2023年05月26日 07:54 698
訪客
以下是一組CSS鏈接樣式代碼，用html演示和解釋：
<!DOCTYPE html>
<html>
<head>
<style>
/* 初始鏈接樣式 */
a:link {
color: #0077cc;
text-decoration: none;
border-bottom: 1px dotted #0077cc;
}
/* 已訪問鏈接樣式 */
a:visited {
color: #660099;
text-decoration: none;
border-bottom: 1px dotted #660099;
}
/* 滑鼠懸浮鏈接樣式 */
a:hover {
color: #ff6600;
text-decoration: none;
border-bottom: 1px dotted #ff6600;
}
/* 激活鏈接樣式 */
a:active {
color: #cc0000 ;
text-decoration: none;
border-bottom: 1px dotted #cc0000;
}
</style>
</head>
<body>
<h1>CSS鏈接樣式演示</h1>
<p>請點擊以下鏈接：</p>
<ul>
<li><a href="#">未訪問鏈接</a></li>
<li><a href="#">未訪問鏈接</a></li>
<li><a href="#">未訪問鏈接</a></li>
<li><a href="#">未訪問鏈接</a></li>
</ul>
</body>
</html>代碼解釋：
在`head`標簽內，我們定義了四種鏈接狀態的樣式：
1. `a:link`：用於設置未訪問鏈接的樣式。
2. `a:visited`：用於設置已訪問鏈接的樣式。
3. `a:hover`：用於設置滑鼠懸停時鏈接的樣式。
4. `a:visited`：用於設置當前活動鏈接的樣式。
在`body`標簽內，我們創建了一個鏈接列表，用於演示上述鏈接樣式。每個鏈接均使用相同的`<a>`標記，在`href`屬性中指定鏈接的URL。其中`<li>`標記用於創建具有項目符號的列表。
以上就是這組CSS鏈接樣式代碼的演示和說明。這些樣式的目的是為了美化鏈接並提供更好的用戶體驗。
標籤： CSS鏈接樣式
相關文章
