要求
1、用HTML实现信息项（内容）固定只读得个人简历信息表；
2、对步骤1（见上一篇博客）中得到的HTML文件进行表单化处理，实现各类简历信息项的可录入、可选择、可编辑效果；
3、用CSS对步骤2中的HTML文件进行样式定义和引用，实现较好的修饰效果；
HTML
实现各类简历信息项的可录入、可选择、可编辑效果；
<!DOCTYPE html>
//加入css文件
<link type="text/css" rel="styleSheet" href="个人简历.css" ></link>
<head>
<meta charset=utf-8" />
//class1块
<div class="class1">
//class4块
<div class="class4">
//放入图片
<img src="xxx.png">
</div>
<h1>基本信息</h1>
<ul>
//可编辑姓名项
<li>姓名：
<td >
<input type="text" id="textname" value="xxx">
</td>
<li/>
<br/>
//可选择性别项
<li>性别：
<td >
<select name="selct1" id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</li>
<br/>
//可选择出生日期项（篇幅原因，年份选择较少）
<li>出生日期：
<td >
<select name="select2" id="years">
<option value="1999年">1997年</option>
<option value="2000年">2000年</option>
<option value="1999年">1999年</option>
<option value="1999年">1998年</option>
<option value="1999年">1996年</option>
<option value="1999年">1995年</option>
<option value="1999年">1994年</option>
<option value="1999年">1993年</option>
<option value="1999年">1992年</option>
<option value="1999年">1991年</option>
</select>
<select name="select3" id="months">
<option value="11月">3月</option>
<option value="12月">12月</option>
<option value="11月">11月</option>
<option value="11月">10月</option>
<option value="11月">9月</option>
<option value="11月">8月</option>
<option value="11月">7月</option>
<option value="11月">6月</option>
<option value="11月">5月</option>
<option value="11月">4月</option>
<option value="11月">2月</option>
<option value="11月">1月</option>
</select>
<select name="select4" id="days">
<option value="13日">13日</option>
<option value="30日">30日</option>
<option value="29日">29日</option>
<option value="28日">28日</option>
<option value="27日">27日</option>
<option value="26日">26日</option>
<option value="25日">25日</option>
<option value="24日">24日</option>
<option value="23日">23日</option>
<option value="22日">22日</option>
<option value="21日">21日</option>
<option value="20日">20日</option>
<option value="19日">19日</option>
<option value="18日">18日</option>
<option value="17日">17日</option>
<option value="16日">16日</option>
<option value="15日">15日</option>
<option value="14日">14日</option>
<option value="12日">12日</option>
<option value="11日">11日</option>
<option value="10日">10日</option>
<option value="9日">9日</option>
<option value="8日">8日</option>
<option value="7日">7日</option>
<option value="6日">6日</option>
<option value="5日">5日</option>
<option value="4日">4日</option>
<option value="3日">3日</option>
<option value="2日">2日</option>
<option value="1日">1日</option>
</select>
</td >
</li>
<br/>
//可选择民族项（篇幅原因，可选择项较少）
<li>民族：
<td >
<select name="select5" id="nation">
<option value="汉族">汉族</option>
<option>汉族</option>
<option>其他</option>
</select>
</td >
</li>
<br/>
//可选择籍贯项
<li>籍贯：
<td >
<select name="select6" id="location">
<option value="河南省">河南省</option>
<option value="北京市">北京市</option>
<option value="天津市">天津市</option>
<option value="上海市">上海市</option>
<option value="重庆市">重庆市</option>
<option value="河北省">河北省</option>
<option value="山西省">山西省</option>
<option value="辽宁省">辽宁省</option>
<option value="吉林省">吉林省</option>
<option value="黑龙江省">黑龙江省</option>
<option value="江苏省">江苏省</option>
<option value="浙江省">浙江省</option>
<option value="安徽省">安徽省</option>
<option value="福建省">福建省</option>
<option value="江西省">江西省</option>
<option value="山东省">山东省</option>
<option value="湖北省">湖北省</option>
<option value="湖南省">湖南省</option>
<option value="广东省">广东省</option>
<option value="海南省">海南省</option>
<option value="四川省">四川省</option>
<option value="贵州省">贵州省</option>
<option value="云南省">云南省</option>
<option value="陕西省">陕西省</option>
<option value="甘肃省">甘肃省</option>
<option value="青海省">青海省</option>
<option value="台湾省">台湾省</option>
<option value="内蒙古自治区">内蒙古自治区</option>
<option value="广西壮族自治区">广西壮族自治区</option>
<option value="西藏自治区">西藏自治区</option>
<option value="宁夏回族自治区">宁夏回族自治区</option>
<option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
<option value="香港特别行政区">香港特别行政区</option>
<option value="澳门特别行政区">澳门特别行政区</option>
</select>
</td >
</li>
<br/>
//可选择政治面貌项
<li>政治面貌：
<td>
<select name="select7" id="politic">
<option value="中共党员">中共党员</option>
<option value="共青团员">共青团员</option>
<option value="中共预备党员">中共预备党员</option>
<option value="民革党员">民革党员</option>
<option value="民盟盟员">民盟盟员</option>
<option value="民建会员">民建会员</option>
<option value="民进会员">民进会员</option>
<option value="农工党党员">农工党党员</option>
<option value="政公党党员">政公党党员</option>
<option value="九三学社社员">九三学社社员</option>
<option value="台盟盟员">台盟盟员</option>
<option value="无党派人士">无党派人士</option>
<option value="群众">群众</option>
</select>
</td>
</li>
<br/>
//可选择专业项
<li>专业：
<td >
<select name="select8" id="speciality">
<option value="计算机科学与技术">计算机科学与技术</option>
<option value="网络工程">网络工程</option>
<option value="软件工程">软件工程</option>
<option value="数字媒体技术">数字媒体技术</option>
<option value="其他">其他</option>
</select>
</td >
</li>
</ul>
<br/>
//可输入联系方式项
<h1>联系方式</h1>
<ul>
<li>电话：
<td >
<input type="text" id="textphone" value="xxxxxxxxxxx">
</td>
</li>
<br/>
//可输入邮箱项
<li> 邮箱 ：
<td >
<input type="text" id="textmail" value="[email protected]">
</td>
</li>
<br/>
//可输入地址项
<li>地址：
<td >
<input type="text" id="textaddress" value="xxxxxxxx">
</td>
</li>
</ul>
<br/>
//可输入兴趣爱好项
<h1>兴趣爱好</h1>
<div class="pic">
<textarea rows="6" cols="35" id="hobby">其他</textarea>
<ul>
</ul>
</div>
</div>
//class3块
<div class="class3">
<h1>个人简历</h1>
</div>
//class2块
<div class="class2">
<br/>
//可输入学习情况项
<h1>学习情况</h1>
<hr/>
//可选择学历项
<li>学历：
<td >
<select name="select9" id="background">
<option value="本科">本科</option>
<option value="专科">专科</option>
<option value="硕士">硕士</option>
<option value="其他">其他</option>
</select>
</td >
</li>
<br/>
//可输入语言能力项
<li>语言能力：
<textarea rows="1" cols="188" id="languageskill">其他</textarea>
</li>
<br/>
//可计算机软硬件能力项
<li>计算机软硬件能力：
<textarea rows="1" cols="178" id="computerskill">其他</textarea>
</li>
//可输入获奖情况项
<h1>获奖情况</h1>
<hr/>
<li>
<textarea rows="5" cols="200" id="award">其他</textarea>
</li>
<h1>实践经历</h1>
<hr/>
//可输入实践经历项
<li>实践经历：
<br/>
<textarea rows="3" cols="200" id="experience">其他</textarea>
</li>
<br/>
//可输入社会活动项
<li>社会活动：
<br/>
<textarea rows="3" cols="200" id="activities">其他</textarea>
</li>
//可输入自我评价项
<h1>自我评价</h1>
<hr/>
<p>
<textarea rows="5" cols="200" id="selfassessment">其他 </textarea>
</p>
</div>
</body>
</html>
CSS
对HTML文件进行样式定义和引用，实现较好的修饰效果；
<title>个人简历</title>
<style>
*{
//清除浏览器默认样式
margin: 0; padding: 0;
}
body{
//宽度
width:%100;
//高度
height:%100;
//位置
text-align:center;
//背景色
background-color:#333333;
}
.divsecond{
text-align:center;
}
.class1{
width:400px;
height:1000px;
background-color:#666666;
//元素向左浮动
float:left;
//字体颜色
color :white;
}
.class2{
height:950px;
background-color:#FFFFFF;
margin-left: 220px;
text-align:left;
color:black;
}
.class3{
height:50px;
background-color:#333333;
color:white;
}
.class4{
// 元素的上外边距
margin-top:50px;
}
ul{
margin:0; padding:0;
color:white;
//内边距区域中左边的宽度
padding-left: 100px;
text-align:left;
}
hr{
height: 3px;
background-color: black;
//边距
border: 0;
}
p{
//font 元素中文本的尺寸大小。
font-size:20px;
}
</style>
</head>
<body>
效果图
【注】进行编辑时，把注释去掉！
原创文章 44
获赞 47
访问量 1万+