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;
}

猜你喜欢

转载自www.cnblogs.com/chen-wei123/p/12799406.html