自学web前端练手——CSS样式基础

CSS样式采用内嵌样式完成。

网站实现如下内容:

(1)包含1个网页。

(2)网页中要用到表格,

           a)  表格分成2行,第一行包含表头单元格
           b) 第二行包含普通单元格
           c)表格宽度300px

(3)表格第一行

          a)  有背景颜色#3cc

          b)  文本居中对齐

          c)  文字18个像素大小

          d)行高3字符

(4)表格第二行单元格

          a)  文字白色,背景黑色,字号12像素大小

          b)包含一个无序列表,无列表标号

(5)无序列表中是10个超链接

          a) 超链接无下划线 
          
          b)默认超链接文字白色

          c)鼠标悬停超链接背景颜色变白,文字颜色变黑

效果图如下:
自学web前端练手——CSS样式基础_第1张图片
自学web前端练手——CSS样式基础_第2张图片

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS样式单元作业</title>
	<style type="text/css">
        table{
        	width: 300px;
        }
        tr:nth-child(odd){
        	background-color: #3cc;
        	color: black;
        	font-size: 18px;
        	text-align: center;
        }
        tr:nth-child(even){
        	background-color: black;
        	color: white;
        	font-size: 12px;
        }
        a{
        	text-decoration: none;
        	color: white;
        }
        a:hover{
        	background-color: white;
        	color: black;
        }
        .none{list-style-type: none;}
	</style>
</head>
<body>
     <table>
     	<tr>
     		<td>外国最经典的文学名著</td>
     	</tr>
     	<tr>
     		<td>
     			<ul class="none">
     				<li><a href="#">希腊神话——古希腊文明的瑰宝</a></li>
     				<li><a href="#">伊索寓言——一部经典的寓言故事集</a></li>
     				<li><a href="#">荷马史诗——横亘千古的文学瑰宝</a></li>
     				<li><a href="#">俄狄浦斯王——古希腊悲剧的典范</a></li>
     				<li><a href="#">圣经——基督教的经典著作</a></li>
     				<li><a href="#">源氏物语——日本古典文学的瑰宝</a></li>
     				<li><a href="#">神曲——中世纪的伟大诗作</a></li>
     				<li><a href="#">十日谈——欧洲第一部现实主义小说</a></li>
     				<li><a href="#">列那狐的故事——法国伟大的民间长篇故事诗</a></li>
     				<li><a href="#">巨人传——一部荒诞不经的幽默小说</a></li>
     			</ul>
     		</td>
     	</tr>
     </table>
</body>
</html>

你可能感兴趣的:(自学web前端)