HTML小案例----简单个人简历
程序员文章站
2022-03-04 18:41:52
...
第一个简历
其中用了很少的css内容，废话不多说，直接上效果图
<html>
<head>
<title>个人简历</title>
<meta charset="utf-8">
<style>
body{
margin:0;
padding:0;
}
td{
width:160px;
height:30px;
font-size:20px;
}
input{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<table border=2; cellpadding=0; cellspacing=0; align=center>
<caption><h2>个人简历</h2></caption>
<tr align=center>
<td colspan="5">基本信息</td>
</tr>
<tr align=center>
<td>姓名:</td><td><input type="text" name="username"></td>
<td>性别:</td><td><input type="text" name="sex"></td>
<td rowspan="5"><div><input type="file"></div></td>
</tr>
<tr align=center>
<td>毕业院校:</td><td><input type="text" name="school"></td>
<td>民族:</td><td><input type="text" name="minzu"></td>
</tr>
<tr align=center>
<td>最高学历:</td><td><input type="text" name="xueli"></td>
<td>政治面貌:</td><td><select style="width: 100% ; height: 100%;">
<option value ="">--选择--</option>
<option value ="dang">党员</option>
<option value ="tuan">团员</option>
<option value ="min">民众</option>
</select></td>
</tr>
<tr align=center>
<td>专业:</td><td><input type="text" name="zhuanye"></td>
<td>出生年月:</td><td><input type="date" name="birthday" ></td>
</tr>
<tr align=center>
<td>籍贯:</td><td><input type="text" name="county"></td>
<td>手机号码:</td><td><input type="tel" name="tell"></td>
</tr>
<tr align=center>
<td>通讯地址:</td><td colspan="4"><input type="text" name="addr"></td>
</tr>
<tr align=center>
<td>电子信箱:</td><td colspan="4"><input type="email" name="emadd" ></td>
</tr>
<tr align=center>
<td colspan="5">教育背景</td>
</tr>
<tr align=center>
<td colspan="5" style="height:100px"><textarea rows="5" cols="115"style="border: 0px;">
</textarea></td>
</tr>
<tr align=center>
<td colspan="5">专业课程</td>
</tr>
<tr>
<td colspan="6" style="height:100%"><textarea rows="5" cols="115" name="zhunyeke" style="border: 0px solid black;">
</textarea></td>
</tr>
<tr align=center>
<td colspan="5">主要技能</td>
</tr>
<tr>
<td colspan="5" style="height:100%"><textarea rows="5" cols="115" name="jineng" style="border: 1px solid black">
</textarea>
</tr>
<tr align=center>
<td colspan="5">项目经验</td>
</tr>
<tr>
<td colspan="6" style="height:100%"><textarea rows="5" cols="115" name="jingyan" style="border: 1px solid black;">
</textarea></td>
</tr>
<tr style="border: 0px;">
<td colspan="3"></td>
<td ><input type="submit" value="登录"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</body>
</html>
简历2
自己设计的，但是配色自己觉得很丑。。。。自己可以去改改！！里面还是有bug的。不过还是可以看的。
话不多说，直接上效果图和代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
font-family: "微软雅黑";
}
body{
width: 1500px;
/* height: 1500px; */
/* border: 1px solid red; */
}
header{
height: 200px;
background-color: #939f3d;
}
.fl{
float: left;
}
.fr{
float: right;
}
#logo1{
width: 200px;
height: 200px;
padding-left: 200px;
}
.div1{
padding-top: 50px;
padding-right: 100px;
}
#in1{
color: white;
font-size: 40px;
width: 80px;
background-color:#939f3d ;
border: 0px;
}
#span1{
font-size: 50px;
font-family: "ms reference specialty";
color: white;
}
.div2{
height: 500px;
background-color:lemonchiffon;
/* border: 1px solid red ; */
}
.divl{
width: 48%;
height: 100%;
}
.divr{
width:48%;
height: 100%;
}
.divl_1{
padding-top: 25px;
margin-left: 15%;
padding-bottom: 20px;
border-bottom: 3px dotted cornflowerblue;
font-size: 30px;
color: slateblue;
}
.divl_2{
padding-top: 43px;
margin-left: 10%;
padding-bottom: 20px;
border-bottom: 3px dotted cornflowerblue;
font-size: 30px;
color: slateblue;
}
input{
height: 40px;
border: 0;
background-color:lemonchiffon ;
color: #006400;
}
textarea{
font-size: 30px;
border: 0px;
background-color: aqua;
border: 3px dotted darkgreen;
}
h1{
background-color: #00FFFF;
}
</style>
</head>
<body>
<!-- 头部 -->
<header class="head">
<img id="logo1" src="img/logo.jpg" alt="加载失败">
<div class="fr div1">
<input type="text" name="username" id="in1" placeholder="姓名"/>
<span id="span1">/个人简历</span>
</div>
</header>
<!-- 个人信息部分 -->
<div class="div2">
<div class="divl fl">
<div class="fl divl_1" >姓名:<input type="text" name="username" style="font-size: 35px; font-family: "blackadder itc";""></div>
<div class="fl divl_1" >性别:<input type="text" name="sex" style="font-size: 35px; font-family: "blackadder itc";""></div>
<div class="fl divl_1" >年龄:<input type="text" name="age" style="font-size: 35px; font-family: "blackadder itc";""></div>
<div class="fl divl_1" >籍贯:<input type="text" name="county" style="font-size: 35px; font-family: "blackadder itc";""></div>
<div class="fl divl_1" >学历:<input type="text" name="school" style="font-size: 35px; font-family: "blackadder itc";""></div>
</div>
<div class="divr fr">
<div class="divl fl">
<div class="fl divl_2" >联系电话:<input type="tel" name="tel" style="font-size: 35px; font-family: "blackadder itc";""></div>
<div class="fl divl_2" >现居地址:<input type="text" name="add" style="font-size: 35px; font-family: "blackadder itc";""></div>
<div class="fl divl_2" >电子邮箱:<input type="email" name="ema" style="font-size: 35px; font-family: "blackadder itc";""></div>
</div>
</div>
</div>
<div class="" style="background-color: #00FFFF;">
<div><h1 style="padding-left: 44%;">个人简介</h1></div>
<div>
<textarea rows="10" cols="94">
</textarea>
</div>
<div><h1 style="padding-left: 44%;">个人技能</h1></div>
<div>
<textarea rows="10" cols="94">
</textarea>
</div>
<div><h1 style="padding-left: 44%;">项目经验</h1></div>
<div>
<textarea rows="10" cols="94">
</textarea>
</div>
</div>
</body>
</html>