Educoder -- Web程序设计基础2021秋--简历表页面的制作

最新推荐文章于 2022-11-24 10:52:25 发布

牛小小小婷～

最新推荐文章于 2022-11-24 10:52:25 发布

阅读量821

点赞数 1

分类专栏： # web 文章标签：前端 css html

本文链接：https://blog.csdn.net/hannah2233/article/details/121732858

版权

web 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

文章目录

第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>

牛小小小婷～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Educoder -- Web程序设计基础2021秋--简历表页面的制作

文章目录第1关：简历表页面的结构设计1、编程要求2、代码展示第2关：简历表页面的样式设计1、编程要求2、代码展示第1关：简历表页面的结构设计1、编程要求根据任务描述的效果图，在 Begin-End 区域内补充代码，创建一个7行5列的表格，具体要求如下：将第1行的5个单元格合并，单元格中的内容为简历表，设置类名为“one two”第2行的第1和第3个单元格中的文本分别为“姓名”和“民族”，类名设置为“one”；第2、4列单元格中无文本，也不设置类名；第5个单元格中文本为“照片”，
复制链接

扫一扫