前端CSS小作業練習(四)

題目要求>

網站實現如下內容(見圖1,圖2):

(1)包含1個網頁。(1分)

(2)網頁中要用到表格,

           a)  表格分成2行,第一行包含表頭單元格(1分)
           b) 第二行包含普通單元格(1分)
           c)表格寬度300px(1分)

(3)表格第一行

          a)  有背景顏色#3cc(1分)

          b)  文本居中對齊(1分)

          c)  文字18個像素大小(1分)

          d)行高3字符(1分)

(4)表格第二行單元格

          a)  文字白色,背景黑色,字號12像素大小(1分)

          b)包含一個無序列表,無列表標號 (1分)

(5)無序列表中是10個超鏈接(1分)

          a) 超鏈接無下劃線 (1分)

          b)默認超鏈接文字白色(1分)

          c)鼠標懸停超鏈接背景顏色變白,文字顏色變黑(1分)

    (6)代碼是否規範(1分)

圖1>

在這裏插入圖片描述

圖2>

在這裏插入圖片描述

代碼>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外國最經典的文學名著</title>
    <style>
        a {
            text-decoration: none;
            color: #fff;
        }

        a:hover {
            color: #000;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <table border="1" width='300'>
        <tr>
            <th colspan="1" style="background-color: #3cc;text-align: center;font-size: 18px;line-height: 3em;">
                外國最經典的文學名著
            </th>
        </tr>
        <tr>
            <td style="background-color:#000;color:#fff;font-size: 12px;">
                <ul>
                    <li style="list-style: none;">
                        <a href="">希臘神話————古希臘文明的瑰寶</a><br>
                        <a href="">伊索寓言————一部經典的寓言故事集</a><br>
                        <a href="">荷馬史詩————橫亙千古的文學瑰寶</a><br>
                        <a href="">俄狄浦斯王————古希臘悲劇的典範</a><br>
                        <a href="">聖經————基督教的經典著作</a><br>
                        <a href="">源氏物語————日本古典文學的瑰寶</a><br>
                        <a href="">神曲————中世紀的偉大神作</a><br>
                        <a href="">十日談————歐洲第一部現實主義小說</a><br>
                        <a href="">列那狐的故事————法國偉大的民間長篇故事詩</a><br>
                        <a href="">巨人傳————一部荒誕不經的幽默小說</a><br></li>
                </ul>
            </td>
        </tr>
    </table>
</body>

</html>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章