educoder实训平台----简历表页面的制作

最新推荐文章于 2022-05-26 20:54:38 发布

白夜的月亮

最新推荐文章于 2022-05-26 20:54:38 发布

阅读量643

点赞数

分类专栏： educoder平台实训html-web实训文章标签：前端 html css3

本文链接：https://blog.csdn.net/m0_59076472/article/details/121674417

版权

educoder平台实训html-web实训专栏收录该内容

30 篇文章 14 订阅

订阅专栏

educoder实训平台----简历表页面的制作

第1关：简历表页面的结构设计

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简历表</title>
</head>
<body>
<!-- ********* Begin ********* -->
<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>
<!-- ********* End ********* -->
</body>
</html>

第2关：简历表页面的样式设计

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简历表</title>
<!-- ********* Begin ********* -->
<style type="text/css">
table{
	border:1px 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>