精美的网页版简历它来了（HTML+iview组件库）
程序员文章站
2022-04-20 11:56:49
...
精美的网页版简历它来了（HTML+iview组件库）
先上效果图，一共分为四个模块：封面、简介、自荐信和结束语，点击上面导航栏，可跳转不同的模块
友情提示，这是大三上前端课程时，老师让交的一份课后作业，由于当时只学习了HTML语言，还并未学习CSS，JavaScript等知识，说以代码中出现许多br标签，还请谅解，改天，重新出一份代码规范的给大家
Resume.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iview example</title>
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<style type="text/css">
/* 类选择器 */
.ivu-select-dropdown{
left:0px
},
/*元素选择器*/
body
{
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
/*通用选择器*/
*
{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
/*类选择器*/
.page
{
width: 22cm;
min-height: 29.7cm;
padding: 1cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background:white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*类选择器*/
.subpage
{
padding: 0cm;
border: 1px #D3D3D3 solid;
height: 256mm;
outline: 0cm #FFEAEA solid;
background:url(1.png);
background-size: cover;
}
/*类选择器*/
.subpage1
{
padding: 0cm;
border: 1px #D3D3D3 solid;
height: 256mm;
outline: 0cm #FFEAEA solid;
background:#ffffff;
background-size: cover;
}
@page
{
size: A4;
margin: 0;
}
@media print
{
.page
{
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background:initial;
page-break-after: always;
}
}
</style>
</head>
<body>
<div id="app" class="page">
<Tabs value="name1">
<Tab-pane label="封面" name="name1">
<div class="subpage">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="text" style=" text-align:center;">
<img src="2.png" width="50%" alt="图片出错" >
<br>
<br>
<br><br><br>
<table style="word-wrap:break-word" align="center" width="400" hight="100" border="0" cellspacing="0" cellpadding="" >
<tr>
<td width="100"><img src="3.png" width="40%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>姓 名：
<input type="text" name="name" style= "background-color:transparent;border:0;">
</h3>
</form>
</td>
</tr>
<tr>
<td width="100"><img src="4.png" width="40%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>电 话：
<input type="text" name="dianhua" style= "background-color:transparent;border:0;">
</h3>
</form></td>
</tr>
<tr>
<td width="100"><img src="5.png" width="40%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>邮 箱：
<input type="email" name="email" autocomplete="off" style= "background-color:transparent;border:0;">
</h3>
</form></td>
</tr>
<tr>
<td width="100"><img src="6.png" width="40%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>求职意向：
<input type="text" name="qzyx" style= "background-color:transparent;border:0;">
</h3>
</form></td>
</tr>
</table>
</div>
</div>
</Tab-pane>
<Tab-pane label="简介" name="name2" style="height:300px">
<div class="subpage1">
<hr style="height : 15px" color="#660033"/>
<br>
<table style="word-wrap:break-word" align="center" width="100%" hight="100" border="0" cellspacing="0" cellpadding="">
<tr>
<td width="150px" align="center"><img src="7.png" width="70%" alt="图片出错" ></td>
<td align="center">
<table style="word-wrap:break-word" align="" width="80%" hight="" border="0" cellspacing="0" cellpadding="">
<tr>
<td width="150px"><form action="demo-form.php" autocomplete="on">
<h3>姓 名：
<input type="text" name="name" style= "background-color:transparent;border:0;" size="20px">
</h3>
<hr style="height : 0.5px" color="#660033" width="90%"/>
</form>
</td>
</tr>
<tr>
<td width="150px"><form action="demo-form.php" autocomplete="on">
<h3>求职意向：
<input type="text" name="dianhua" style= "background-color:transparent;border:0;" size="20px">
</h3>
<hr style="height : 0.5px" color="#660033" width="90%"/>
</form></td>
</tr>
</table>
</td>
<td align="center">
<table style="word-wrap:break-word" align="" width="80%" hight="" border="0" cellspacing="0" cellpadding="">
<tr>
<td width="100" align="center"><img src="8.png" width="35%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>
<input type="text" name="name" style= "background-color:transparent;border:0;">
</h3>
<hr style="height : 0.5px" color="#660033" width="80%"/>
</form>
</td>
</tr>
<tr>
<td width="100" align="center"><img src="9.png" width="35%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>
<input type="text" name="dianhua" style= "background-color:transparent;border:0;">
</h3>
<hr style="height : 0.5px" color="#660033" width="80%"/>
</form></td>
</tr>
<tr>
<td width="100" align="center"><img src="10.png" width="35%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>
<input type="text" name="dianhua" style= "background-color:transparent;border:0;">
</h3>
<hr style="height : 0.5px" color="#660033" width="80%"/>
</form></td>
</tr>
</table >
</td>
</tr>
</table>
<br>
<table style="word-wrap:break-word" align="center" width="90%" hight="100%" border="0" cellspacing="0" cellpadding="">
<tr>
<td align="center">
<h3>基本信息 | Basic Info</h3>
<hr style="height : 1px" color="#660033" width="70%">
<br>
<table style="word-wrap:break-word" align="center" width="80%" hight="100%" border="0" cellspacing="0" cellpadding="">
<tr>
<td align="center" width="70px">年龄:</td>
<td>
<form action="demo-form.php" autocomplete="on">
<input type="text" name="fname">
</form>
</td>
</tr>
<tr>
<td align="center" width="70px">性别:</td>
<td><input type="radio" name="sex" value="man" checked/>男生
<input type="radio" name="sex" value="woman" />女生</td>
</tr>
<tr>
<td align="center" width="70px">学校:</td>
<td> <i-select :model.sync="model1" style="width:200px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
</td>
</tr>
<tr>
<td align="center" width="70px">专业:</td>
<td> <i-select :model.sync="model2" style="width:200px">
<i-option v-for="item in cityList2" :value="item.value">{{ item.label }}</i-option>
</i-select>
</td>
</tr>
</tr>
<tr>
<td align="center" width="70px">学历:</td>
<td> <i-select :model.sync="model3" style="width:200px">
<i-option v-for="item in cityList3" :value="item.value">{{ item.label }}</i-option>
</i-select>
</td>
</tr>
<tr>
<td align="center" width="70px">籍贯:</td>
<td> <Cascader :data="data3" trigger="hover" size="10%" ></Cascader>
</td>
</tr>
</table>
<br>
</td>
<td align="center">
<h3>教育经历 | Education</h3>
<hr style="height : 1px" color="#660033" width="70%">
<br>
<table style="word-wrap:break-word" align="center" width="80%" hight="100%" border="0" cellspacing="0" cellpadding="">
<tr>
<td><i-select :model.sync="model1" style="width:180px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select></td>
<td>
<Row style="center:90%">
<i-col span="12">
</i-col>
<i-col span="12">
<date-picker style="width:180px" type="daterange" placement="bottom-start" placeholder="选择日期"></date-picker>
</i-col>
</Row>
</td>
</tr>
<tr>
<td>
<i-select :model.sync="model2" style="width:180px">
<i-option v-for="item in cityList2" :value="item.value">{{ item.label }}</i-option>
</i-select>
</td>
<td>
<i-select :model.sync="model3" style="width:180px">
<i-option v-for="item in cityList3" :value="item.value">{{ item.label }}</i-option>
</td>
</tr>
<tr>
<td colspan="2">
<i-input type="textarea" :rows="4" placeholder="请输入..."></i-input>
</td>
</tr>
</table>
<br>
</td>
</tr>
<tr>
<td align="center">
<h3>个人能力 | Personal Skills</h3>
<hr style="height : 1px" color="#660033" width="70%">
<br>
<div>
<img src="11.png" width="50%" style=" text-align:center;">
</div>
<br>
</td>
<td rowspan="2" align="center">
<h3>实践经历 | Work Experience</h3>
<hr style="height : 1px" color="#660033" width="70%">
<br>
<Timeline-item>
<p class="time">
<row>
<i-col span="12">
<Date-picker type="year" size="small" placeholder="选择年" style="width: 200px"></Date-picker>
</i-col>
</row>
</p>
<p class="content"><i-input type="textarea" :rows="2" placeholder="请输入..."></i-input></p>
</Timeline-item>
<Timeline-item>
<p class="time">
<row>
<i-col span="12">
<Date-picker type="year" size="small" placeholder="选择年" style="width: 200px"></Date-picker>
</i-col>
</row>
</p>
<p class="content"><i-input type="textarea" :rows="2" placeholder="请输入..."></i-input></p>
</Timeline-item>
<Timeline-item>
<p class="time">
<row>
<i-col span="12">
<Date-picker type="year" size="small" placeholder="选择年" style="width: 200px"></Date-picker>
</i-col>
</row>
</p>
<p class="content"><i-input type="textarea" :rows="2" placeholder="请输入..."></i-input></p>
</Timeline-item>
<br>
</td>
</tr>
<tr>
<td align="center">
<h3>职业技能 | Professional Skills</h3>
<hr style="height : 1px" color="#660033" width="70%">
<br>
<table style="word-wrap:break-word" align="center" width="90%" hight="100%" border="0" cellspacing="0" cellpadding="">
<tr>
<td align="center" width="100px">HTML5 CSS3</td>
<td><Slider v-model="value4" style="width:80%"></Slider></td>
</tr>
<tr>
<td align="center" width="100px">JAVA</td>
<td><Slider v-model="value5" style="width:80%"></Slider></td>
</tr>
<tr>
<td align="center" width="100px">数据库</td>
<td><Slider v-model="value6" style="width:80%"></Slider></td>
</tr>
<tr>
<td align="center" width="100px">MS OFFICE</td>
<td><Slider v-model="value7" style="width:80%"></Slider></td>
</tr>
</table>
<br>
</td>
</tr>
<tr>
<td align="center">
<h3>自我评价 | About Me</h3>
<hr style="height : 1px" color="#660033" width="70%">
<br>
<i-input type="textarea" :rows="4" placeholder="请输入..."></i-input>
</td>
<td align="center">
<h3>荣誉证书 | Awards</h3>
<hr style="height : 1px" color="#660033" width="70%">
<br>
<i-input type="textarea" :rows="4" placeholder="请输入..."></i-input>
</td>
</tr>
</table>
</div>
</Tab-pane>
<Tab-pane label="自荐信" name="name3">
<div class="subpage1">
<table style="word-wrap:break-word" align="center" width="90%" hight="100%" border="0" cellspacing="0" cellpadding="" >
<tr>
<td width="150px" align="center">
<br>
<img src="7.png" width="70%" alt="图片出错" >
<td rowspan="3" align="center" >
<h1>自荐信</h1>
<hr style="height : 1px" color="#660033" width="50%" align="center">
<br>
<br>
<i-input type="textarea" :rows="40" placeholder="请输入..." ></i-input>
</td>
</tr>
<tr>
<td>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>
HELLO!
</h1>
<br>
<br>
<h3>THIS IS MY RESUME</h3>
</td>
</tr>
<tr>
<td>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<table style="word-wrap:break-word" align="" width="90%" hight="" border="0" cellspacing="0" cellpadding="">
<tr>
<td width="150" align="center"><img src="13.png" width="45%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>
<input type="text" name="name" style= "background-color:transparent;border:0;" size="10px">
</h3>
<hr style="height : 0.5px" color="#660033" width="100%"/>
</form>
</td>
</tr>
<tr>
<td width="150" align="center"><img src="14.png" width="45%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>
<input type="text" name="name" style= "background-color:transparent;border:0;" size="10px">
</h3>
<hr style="height : 0.5px" color="#660033" width="100%"/>
</form>
</td>
</tr>
<tr>
<td width="150" align="center"><img src="15.png" width="45%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>
<input type="text" name="dianhua" style= "background-color:transparent;border:0;" size="10px">
</h3>
<hr style="height : 0.5px" color="#660033" width="100%"/>
</form></td>
</tr>
<tr>
<td width="150" align="center"><img src="16.png" width="45%" alt="图片出错" ></td>
<td><form action="demo-form.php" autocomplete="on">
<h3>
<input type="text" name="dianhua" style= "background-color:transparent;border:0;" size="10px">
</h3>
<hr style="height : 0.5px" color="#660033" width="100%"/>
</form></td>
</tr>
</table >
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
</table>
</div>
</Tab-pane>
<Tab-pane label="结束语" name="name4"><br />
<div class="subpage">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="text" style=" text-align:center;">
<img src="12.png" width="50%" alt="图片出错" >
<br>
<br>
<br><br><br>
</div>
</div>
</Tab-pane>
</Tabs>
</div>
<script >
new Vue({
el: '#app',
data: {
visible: false,
value3: [0, 50],
value2: '',
value4: 25,
value5: 25,
value6: 25,
value7: 25,
cityList: [{
value: 'yunnandaxue',
label: '云南大学'
},
{
value: 'kmlgd',
label: '昆明理工大学'
},
{
value: 'ynnydx',
label: '云南农业大学'
},
{
value: 'kmykdx',
label: '昆明医科大学'
},
{
value: 'xndx',
label: '西南大学'
},
{
value: 'ynsfdx',
label: '云南师范大学'
}
],
model1: '',
cityList2: [{
value: 'zd',
label: '智能电网信息工程'
},
{
value: 'dq',
label: '电器工程及其自动化'
},
{
value: 'rj',
label: '软件技术'
},
{
value: 'kj',
label: '会计'
},
{
value: 'jx',
label: '机械工程'
},
{
value: 'tm',
label: '土木工程'
}
],
model2: '',
cityList3: [{
value: 'zx',
label: '中学'
},
{
value: 'zz',
label: '中专'
},
{
value: 'dz',
label: '大专'
},
{
value: 'bk',
label: '本科'
},
{
value: 'ss',
label: '硕士'
},
{
value: 'bs',
label: '博士'
}
],
model3: '',
data3: [{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}, {
value: 'yunnan',
label: '云南省',
children: [
{
value: 'kunming',
label: '昆明市',
children: [
{
value: 'panlong',
label: '盘龙区',
}
]
},
{
value: 'qujing',
label: '曲靖市·',
children: [
{
value: 'qilin',
label: '麒麟区',
},
{
value: 'xuanwei',
label: '宣威市',
}
]
}
],
}],
data2: []
},
methods: {
show: function () {
this.visible = true;
},
changeLimit () {
this.limitFrom = this.limitFrom === 0 ? 3 : 0;
},
handleSearch2 (value) {
this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
value + '@qq.com',
value + '@sina.com',
value + '@163.com'
];
}
}
})
</script>
</body>
</html>
图片素材文件
需要项目包的小伙伴可以进入我的博客下载
上一篇： android SDK 开发心得笔记
下一篇： 匿名函数究竟要不要用，有什么优缺点？