Web前端开发北京林业大学 CSS样式-单元作业

最新推荐文章于 2022-05-24 16:41:45 发布

真实的hello world

最新推荐文章于 2022-05-24 16:41:45 发布

阅读量4.4k

点赞数 9

分类专栏： Web前端开发-北京林业大学通关攻略文章标签： web前端开发北京林业大学 css 中国大学mooc

本文链接：https://blog.csdn.net/qq_33384402/article/details/104580210

版权

Web前端开发-北京林业大学通关攻略专栏收录该内容

12 篇文章 18 订阅

订阅专栏

Web前端开发北京林业大学通关攻略

Web前端开发	客观题	编程题
概论	单元测试1
HTML基础	单元测试2	单元作业1
CSS样式	单元测试3	单元作业2
CSS布局与定位	单元测试4	单元作业3
CSS3	单元测试5
JavaScript基础	单元测试6	单元作业4
JQuery & HTML5 & Bootstrap	单元测试7
期末考试	客观选择题	这个还是自己写吧

题目

实现这张图片的效果。
在这里插入图片描述
表格宽300px，由两行组成。

第一行包含一个表头单元格，单元格内有一个粗体的居中标题，背景色为#3cc，文字大小18个像素。
第二行包含一个普通单元格，单元格内是一个无序列表，无列表标号。文字白色，背景黑色，文字大小12像素。
无序列表是超链接，超链接文字白色，鼠标悬停超链接背景颜色变白，文字颜色变黑。

代码

index.html

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

  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <table>
      <tr class="header">
        <th>外国最经典的文学名著</th>
      </tr>

      <tr class="item">
        <td>
          <ul>
            <li>
              <a
                href="https://book.douban.com/subject/1880825/">希腊神话--古希腊文明的瑰宝</a>
            </li>
            <li>
              <a
                href="https://book.douban.com/subject/2161691/">伊索寓言--一部经典的语言故事集</a>
            </li>
            <li>
              <a
                href="https://book.douban.com/subject/25837854/">荷马史诗--横亘千古的文学瑰宝</a>
            </li>
            <li>
              <a
                href="https://book.douban.com/subject/1076330/">俄狄浦斯王--古希腊悲剧的典范</a>
            </li>
            <li>
              <a
                href="https://book.douban.com/subject/1803022/">圣经--基督教的经典著作</a>
            </li>
            <li>
              <a
                href="https://book.douban.com/subject/1006113/">源氏物语--日本古代文学的瑰宝</a>
            </li>
            <li>
              <a
                href="https://book.douban.com/subject/2193879/">神曲--中世纪的伟大创作</a>
            </li>
            <li>
              <a
                href="https://book.douban.com/subject/1279212/">十日谈--欧洲第一部现实主义小说</a>
            </li>
            <li>
              <a
                href="https://book.douban.com/subject/1163327/">列那狐的故事--法国伟大的民间长篇故事诗</a>
            </li>
            <li>
              <a
                href="https://book.douban.com/subject/1130069/">巨人传--一部荒诞不经的幽默小说</a>
            </li>
          </ul>
        </td>
      </tr>
    </table>
  </body>

</html>

style.css

table {
	width: 300px;
}

.header {
	font-size: 18px;
	line-height: 3em;
	text-align: center;
	background-color: #3cc;
}

.item {
	font-size: 12px;
	background-color: black;
}

ul {
	list-style-type: none;
}

a {
	color: white;
	text-decoration: none;
}

a:hover {
	color: black;
	background-color: white;
}

真实的hello world

关注

9
点赞
踩
28

收藏

觉得还不错? 一键收藏
5
评论
Web前端开发北京林业大学 CSS样式-单元作业

Web前端开发北京林业大学第3周练习题目实现这张图片的效果。表格宽300px，由两行组成。第一行包含一个表头单元格，单元格内有一个粗体的居中标题，背景色为#3cc，文字大小18个像素。第二行包含一个普通单元格，单元格内是一个无序列表，无列表标号。文字白色，背景黑色，文字大小12像素。无序列表是超链接，超链接文字白色，鼠标悬停超链接背景颜色变白，文字颜色变黑。代码index...
复制链接

扫一扫