第1关: 简历表页面的结构设计
1、 编程要求
根据任务描述的效果图,在 Begin-End 区域内补充代码,创建一个7行5列的表格,具体要求如下:
- 将第1行的5个单元格合并,单元格中的内容为简历表,设置类名为“one two”
- 第2行的第1和第3个单元格中的文本分别为“姓名”和“民族”,类名设置为“one”;第2、4列单元格中无文本,也不设置类名;第5个单元格中文本为“照片”,并将该单元格与其下方的5个单元格合并。
- 第3-6行除了文本内容的变化外,单元格结构与第2行类似,且类名均为“one”。
- 第7行第1个单元格中文本为“目前所在地”,类名设置为“one”,将第2个单元格右侧的4个单元格合并。
2、 代码展示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简历表</title>
</head>
<body>
<!-- ********* Begin ********* -->
<style>
.one {
background-color: #eeeeee;
}
td {
width: 500px;
border: 1px solid #cccccc;
}
.two {
text-align: center;
}
</style>
<table cellspacing="0" cellspadding="0" style="border: 1px solid #cccccc">
<th>
<td colspan="5" class="one two"><strong>简历表</strong></td>
</th>
<tr>
<td class="one">姓名</td>
<td></td>
<td class="one">民族</td>
<td></td>
<td rowspan="5">照片</td>
</tr>
<tr>
<td class="one">籍贯</td>
<td></td>
<td class="one">身高</td>
<td></td>
</tr>
<tr>
<td class="one">婚姻状况</td>
<td></td>
<td class="one">电子邮件</td>
<td></td>
</tr>
<tr>
<td class="one">联系电话</td>
<td></td>
<td class="one">QQ号码</td>
<td></td>
</tr>
<tr>
<td class="one">出生年月</td>
<td></td>
<td class="one">国籍</td>
<td></td>
</tr>
<tr>
<td class="one">日常所在地</td>
<td colspan="4"></td>
</tr>
</table>
<!-- ********* End ********* -->
</body>
</html>
第2关: 简历表页面的样式设计
1、 编程要求
根据任务描述提示的目标效果,在右侧编辑器补充代码,具体要求如下:
- 设置table的边框为1像素、实线、且颜色为#ccc。
- 设置table的宽度高度分别为600像素和40像素。
- 用两个参数设置外边距:上下为0像素、左右居中。
- 运用border-collapse属性将表格的双边框合并为一个单一边框。
- 设置table中字体大小为14像素。
2、 代码展示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简历表</title>
<!-- ********* Begin ********* -->
<style type="text/css">
table{
border: apx solid #ccc; /*设置table的边框*/
width: 600px;
height: 40px;
margin:0 auto;
border-collapse: collapse;
font-size: 14px;
}
td{
width:80px;
border:1px solid #ccc;
}
.one{background:#eee;}
.two{
text-align:center;
font-size:20px;
font-weight:bold;
}
</style>
<!-- ********* End ********* -->
</head>
<body>
<table>
<tr>
<td colspan=5 class="one two">简历表</td>
</tr>
<tr>
<td class="one">姓名</td>
<td></td>
<td class="one">民族</td>
<td></td>
<td rowspan=5>照片</td>
</tr>
<tr>
<td class="one">籍贯</td>
<td></td>
<td class="one">身高</td>
<td></td>
</tr>
<tr>
<td class="one">婚姻状况</td>
<td></td>
<td class="one">电子邮件</td>
<td></td>
</tr>
<tr>
<td class="one">联系电话</td>
<td></td>
<td class="one">QQ号码</td>
<td></td>
</tr>
<tr>
<td class="one">出生年月</td>
<td></td>
<td class="one">国籍</td>
<td></td>
</tr>
<tr >
<td class="one">目前所在地</td>
<td colspan=4></td>
</tr>
</table>
</body>
</html>