Web前端开发 北京林业大学 第3周练习
程序员文章站
2024-02-16 12:30:04
...
Web前端开发 北京林业大学 第3周练习
题目
实现这张图片的效果。
表格宽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;
}