HTML+CSS写个人简历

要求

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="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="xxxxxxxxx@qq.com"></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>

效果图

【注】进行编辑时，把注释去掉！

HTML+CSS写个人简历相关推荐

用HTML/CSS制作个人简历
HTML/CSS/Javascript是网页制作以及自动化报告制作用到的三大主力.由于Javascript多数情况下用于动画视效,本次简历制作没有涉及到动画过渡,所以我们先来看看HTML/CSS咋回事 ...
搞IT的应届生如何写好简历？
本人在互联网大厂和外企做过技术面试官,也有过校招和招聘应届毕业生的经验,所以自认为在这个问题上有一定的发言权. 应届毕业生(其实其他求职者也一样)首先要知道,面试官凭什么决定这份简历有面试机会?而不是 ...
用HTML+CSS制作前端简历
用HTML+CSS制作前端简历我观看了大量饥人谷前端模拟面试锦集, 观摩了优秀简历的细节取他们亮点制作成了自己的简历吴思里的在线简历闵聪学长的在线简历方应杭老师演示时制作的Demo 细节的 ...
html简历怎么转换,教大家如何用HTML/CSS制作个人简历
HTML/CSS/Javascript是网页制作以及自动化报告制作用到的三大主力.由于Javascript多数情况下用于动画视效,本次简历制作没有涉及到动画过渡,所以我们先来看看HTML/CSS咋回事 ...
纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
并不是所有的 Github 项目写在简历上都加分
本文转载自微信公众号:果汁简历为什么 Github 可以加分很多招聘描述上面都会备注 github加分项,那么为什么它是加分项呢? 停,如果看到这里你还不知道 Github 是什么,可以看一下 P ...
不止一个人犯错，这种 Github 不要写在简历上！
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:2020年7月程序员工资统计,平均14357元,又跌了,扎心个人原创100W+访问量博客:点击前往,查看更多为什 ...
css写出三角形（兼容IE）
利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; border-right: ...
手把手带你用Python完成一个数据分析项目，能写进简历那种！（另送15个实战案例）...
最近几年,数据分析可真是太火了. 阿里.字节等互联网巨头基于大数据打造的商业模式获得巨大成功,使得"数据思维"."数据能力"迅速成为衡量职场人能力的核心指标,专 ...

HTML+CSS写个人简历

要求

HTML

CSS

效果图

HTML+CSS写个人简历相关推荐

最新文章

热门文章