首页 > 编程学习 > HTML小案例----简单个人简历

HTML小案例----简单个人简历

发布时间:2022/11/24 23:15:43

第一个简历

其中用了很少的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>

本文链接:https://www.ngui.cc/zz/1443270.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000