CSS鏈接樣式,用html演示和解釋

以下是一組CSS鏈接樣式代碼,用html演示和解釋:


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鏈接樣式
分享給朋友:

“CSS鏈接樣式,用html演示和解釋” 的相關文章

mark元素的主要功能及在HTML5 中的使用mark元素例子

mark元素的主要功能及在HTML5 中的使用mark元素例子

`<mark>` 元素的主要功能是突出顯示文本中的重要部分或關鍵字。在 HTML5 標準中,`<mark>` 元素用於標記一個文檔或一個段落中需要突出顯示的文本。一旦在 HTML 文件中使用了 `<mark>` 元素,瀏覽器通常會使用黃色背景標記該元素的文本,在頁…

視頻嵌入代碼,簡單的 video 嵌入代碼例子

視頻嵌入代碼,簡單的 video 嵌入代碼例子

視頻嵌入代碼,簡單的 video 嵌入代碼例子:- height:視頻高度。- controls:為 true 時,添加視頻控制條。- source:指定視頻文件路徑和類型,可支持多種類型。- Your browser does not support the video tag:如果用戶的瀏覽器不…

一個簡單的 HTML5 導航菜單的示例代碼

一個簡單的 HTML5 導航菜單的示例代碼

以下是一個簡單的 HTML5 導航菜單的示例代碼,這個導航菜單使用了 HTML5 中的 `nav` 標簽來包裝整個菜單,使用了 Flex 布局來對菜單進行布局和對齊,同時也設置了一些簡單的樣式來美化菜單。…

一個簡單的html結婚特效的代碼

一個簡單的html結婚特效的代碼

以下是一個簡單的html結婚特效的代碼:1. 使用html和css定義了一個結婚的基本樣式;2. 分別定義新娘和新郎,並使用background-image設置其背景圖;3. 定義一個心形圖案,並使用animation讓其跳動。…

一個簡單的html大海日出特效的代碼

一個簡單的html大海日出特效的代碼

以下是一個簡單的html大海日出特效的代碼:1. 使用html和css定義了一個大海和太陽的基本樣式;2. 使用animation讓太陽從初始位置向上升起,並且設置好其動畫屬性;3. 設置大海背景漸變和水面的動畫效果。…

學習html網頁制作模板代碼怎麼寫

學習html網頁制作模板代碼怎麼寫

HTML網頁制作模板代碼是用來定義網頁結構、內容和樣式的基礎代碼。以下是一個簡單的HTML網頁制作模板代碼的示例。通過這個模板代碼,你可以定義一個基本的網頁結構,以及樣式和導航等元素,讓你的網頁更加美觀和易於導航。通過這個適應式的模板代碼,你的網頁能夠在不同設備的屏幕上具有更好的用戶體驗,適應不同的…