文章目录
第1关： 简历表页面的结构设计1、 编程要求2、 代码展示第2关： 简历表页面的样式设计1、 编程要求2、 代码展示第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>
