網頁

2019/7/25

HTML 練習 使用超連結

請建立一份HTML文件,檔名為link.html。請用VS Code編輯。

使用<table>建立一份連結清單如下。



表格外的第一行大標題為<h1>

表格第一列標題使用<th>,底色為粉紅色(pink)。

表格第一列以下的其他列底色16進制色碼(hex color code)為#eee444

每一個連結名稱文字要加上超連結<a>,連結的位址即為後面的連結位址,點擊連結時要在新的瀏覽器頁籤開啟,例如「Google搜尋」。

使用外部樣式表(External style sheet)來套用CSS。


提示:
HTML <table> 表格元素 Table Elements 簡介
HTML 超連結元素Hyperlink Elements <a>簡介



解答

link.html

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
  <h1>我的常用連結</h1>

  <table style="solid 1px; width:500px;">
    <thead>
        <tr>
            <th>連結名稱</th>
            <th>連結位址</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="https://www.google.com.tw/">Google搜尋</a></td>
            <td>https://www.google.com.tw/</td>
        </tr>
        <tr>
            <td><a href="https://www.facebook.com/">臉書 Facebook</a></td>
            <td>https://www.facebook.com/</td>
        </tr>
        <tr>
            <td><a href="https://matthung0807.blogspot.com/">菜鳥工程師肉豬</a></td>
            <td>https://matthung0807.blogspot.com/</td>
        </tr>
    </tbody>

  </table>

</body>
</html>

style.css

table, th, td {
    border:solid 1px;
}
th {
    background-color:pink;
}
tr {
    background-color:#eee444;
}

沒有留言:

張貼留言