HTML关于简历的制作
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <h2>个人简历</h2> <table align="center" class="table-1"> <tr> <td class="td-1">姓名</td> <td class="td-2">刘亦菲</td> <td class="td-3">性别</td> <td class="td-4"> <label><input type="radio" name="sex" value="male" />男性</label> <label><input type="radio" name="sex" value="female" />女性</label> </td> <td class="td-5 td-8" colspan="2" rowspan="5"> <img src="img/1.png" /> </td> </tr> <tr> <td class="td-1">籍贯</td> <td class="td-2">湖北武汉</td> <td class="td-3">政治面貌</td> <td class="td-4"> <label><input type="radio" name="mao" />群众</label> <label><input type="radio" name="mao" />团员</label> </td> </tr> <tr> <td class="td-1">民族</td> <td class="td-2"> <select> <option value="1" selected="">汉</option> <option value="2">。。</option> <option value="3">。。。</option> <option value="4">。。。。</option></select> </td> <td class="td-3">学历</td> <td class="td-4">本科</td> </tr> <tr> <td class="td-1">掌握外语语种</td> <td class="td-2"></td> <td class="td-3">熟练程度</td> <td class="td-4"> <label><input type="radio" name="shu" />一般</label> <label><input type="radio" name="shu" />精通</label> </td> </tr> <tr> <td class="td-1">出生年月</td> <td class="td-2">1987/8/25</td> <td class="td-3">健康状况</td> <td class="td-4">健康</td> </tr> <tr> <td class="td-1">专业</td> <td class="td-2">计算机应用及管理</td> <td class="td-3">计算机水平</td> <td class="td-4"> <label><input type="radio" name="ji" />初级</label> <label><input type="radio" name="ji" />中级</label> <label><input type="radio" name="ji" />高级</label> </td> <td class="td-5">计算机等级</td> <td class="td-6">二级</td> </tr> <tr> <td class="td-1" >特长爱好</td> <td class="td-2" colspan="5"> <label><input type="checkbox" name="te" value="1"/>学习</label> <label><input type="checkbox" name="te" value="2"/>网页制作</label> <label><input type="checkbox" name="te" value="3"/>数据库</label> <label><input type="checkbox" name="te" value="4"/>苹果开发</label> </td> </tr> <tr> <td class="td-1">个人网页</td> <td class="td-2" colspan="5"> <a href="https://baike.baidu.com/item/%E5%88%98%E4%BA%A6%E8%8F%B2/136156?fr=aladdin">我的主页</a> </td> </tr> <tr> <td class="td-1">家庭住址</td> <td class="td-2" colspan="5"> 湖北省武汉市 </td> </tr> <tr> <td class="td-1">联系电话</td> <td class="td-2" colspan="2">xxxxxxxxx</td> <td class="td-4 td-7">手机</td> <td class="td-5" colspan="2"> <input type="tel" name="mobile" pattern="^1[3458]{1}{0-9}{9}$" id="mobile" placeholder="1xxxxx"/> </td> </tr> <tr> <td class="td-1">奖惩情况</td> <td class="td-2" colspan="2"> <ol> <li>奥林匹克信息技术(网页制作)比赛三等奖</li> <li>市网页制作比赛 二等奖</li> <li>计算机VFP二级证书</li> <li>计算机(VB,网页制作,图像制作)证书</li> <li>计算机NIT中级证书</li> <li>机动车驾驶证(c1)</li> </ol> </td> <td class="td-4 td-7">个人简历</td> <td class="td-5" colspan="2"> <ul> <li>1996.10毕业于**初中</li> <li>1999.10毕业于**高中</li> </ul> </td> </tr> <tr> <td class="td-1">工作经验</td> <td class="td-2" colspan="5"> <table class="table-2"> <tr> <td>2006.1-2006.6</td> <td>无锡市科技有限公司</td> <td>销售人员</td> </tr> <tr> <td>2006.1-2006.6</td> <td>无锡市科技有限公司</td> <td>销售人员</td> </tr> <tr> <td>2006.1-2006.6</td> <td>无锡市科技有限公司</td> <td>销售人员</td> </tr> </table> </td> </tr> <tr> <td class="td-1">自我评价</td> <td class="td-2" colspan="5"> 我认真负责,积极主动,能吃苦耐劳,较好地完成自己的任务和工作,在工作过程中学到了更多的知识,积累了更多宝贵的经验,与客人信件之间的沟通技巧也得到极大提高。我有高度的责任感,善于与人沟通,有较强的组织协调能力,环境适应力强,有良好稳定的心理素质。我坚信,只要有自信,有毅力,充分发挥自己的聪明才智和学习能力,就能不断完善自我,不断为公司创造价值 </td> </tr> </table> </body> </html>
css
h2{text-align: center;}
.table-1{
width: 960px;
height: 700px;
position: relative;
}
.table-1 tr,.table-1 td,.table-1{
border:1px solid black;
border-collapse: collapse;
}
.table-2{
width: 760px;
}
.table-2 tr,.table-2 td,.table-2{
border:none;
}
.td-1{
width: 150px;
text-align: center;
background: darkgray;
}
.td-2{
width: 170px;
text-align: center;
}
.td-3{
width: 150px;
text-align: center;
background: darkgray;
}
.td-4{
width: 170px;
text-align: center;
}
.td-5{
width: 150px;
text-align: center;
}
.td-6{
width: 50px;
text-align: center;
}
.td-7{
background: darkgray;
}
img{
position: absolute;
top:0;right: 0px;
width: 230px;
height: 170px;
}