今天跟大家分享一下,如何制作简历页面
从图片可以观察到,头部”个人简历”使用那几个常用的文本标签或者
,
即可;简历里有很多的栏,这就需要用到table标签来完成
使用table标签,需要明确要多少行多少列,tr表示行,th表示列,我的解题思路一般就是以最小的框来数,大致确定行列数.这里有15行7列
使用快捷键快速生成:
table>tr*15>th*7
从上面图片看到,红色框出来的是需要进行合并的,在table标签中,html提供了两个属性:
rowspan = "n" ,合并n行
colspan = "n" ,合并n列
使用方式:写在标签内,写在需要合并的第一行或者第一列,之后把下面对应的行或者列删除.
下面完整代码附上:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
h2{
text-align: center;
}
table{
margin: auto;
}
th{
width: 80px;
height: 30px;
}
.tr1{
height: 40px;
}
style>
head>
<body>
<h2>个 人 简 历h2>
//让简历边框为1,且合并边框
<table border="1" style="border-collapse:collapse;">
<tr>
<th>姓 名th>
<th>th>
<th>性 别th>
<th>th>
<th>出生年月th>
<th>th>
<th rowspan="3">th>//合并头像
tr>
<tr>
<th>籍 贯th>
<th>th>
<th>民 族th>
<th>th>
<th>计算机水平th>
<th>th>
//被合并了,删除第七列
tr>
<tr>
<th>政治面貌th>
<th>th>
<th>身 高th>
<th>th>
<th>月薪要求th>
<th>th>
//被合并了,删除第七列
tr>
<tr>
<th>所学专业th>
<th>th>
<th>学 历th>
<th>th>
<th>求职类型th>
<th colspan="2">th>
tr>
<tr>
<th>家庭住址th>
<th colspan="2">th>
<th colspan="2">兴趣特长th>
<th colspan="2">th>
tr>
<tr>
<th rowspan="2">现住址th>
<th colspan="2" rowspan="2">th>
<th colspan="2">联系电话th>
<th colspan="2">th>
tr>
<tr>
<th colspan="2">QQ号th>
<th class="2" colspan="2">th>
tr>
<tr class="tr1">
<th rowspan="3">教育背景th>
<th colspan="6">th>
tr>
<tr class="tr1">
<th colspan="6">th>
tr>
<tr class="tr1">
<th colspan="6">th>
tr>
<tr class="tr1">
<th rowspan="3">个人能力及专长th>
<th colspan="6" rowspan="3">th>
tr>
<tr class="tr1" >tr>
<tr class="tr1">tr>
<tr class="tr1">
<th rowspan="3">工作经验th>
<th colspan="6" rowspan="3">th>
tr>
<tr class="tr1">tr>
<tr class="tr1">tr>
table>
body>
html>
Original: https://www.cnblogs.com/pilpill/p/16709967.html
Author: Tmillion
Title: 如何使用html制作简历
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/587026/
转载文章受原作者版权保护。转载请注明原作者出处！