前端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>

在这里插入图片描述

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