如何用html+css制作一份简历
程序员文章站
2022-03-07 17:19:12
...
前言
算是无聊吧，突然想到用html+css来制作一份精美的简历，但是做到一半我才想到，我不是UI出生啊，大脑一片空白，设计不出来精美的样式
所以做着做着就变得非常朴素了，但是写代码还是要坚持，所以就一边在那脑海中构思一边写一些乱七八糟的东西
花了两个小时写出来下面这些东西
如果有想写网页简历的小伙伴，可以直接复制代码，在里面填写内容就好了
下载链接： https://download.csdn.net/download/ZSH_jerry/12717501
先来一张样式图吧
代码编写
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<div class="title">
求职简历
</div>
<hr>
<!-- 个人信息开始 -->
<div class="header">
<ul class="header-id left">
<li>这是一个姓名</li>
<li>E-mail</li>
<li>出生年月</li>
<li>求职意向</li>
<li>工作经验</li>
<li>现居住地</li>
</ul>
<ul class="header-id right">
<li>这是一个电话号码123</li>
<li>这是一个邮箱地址</li>
<li>2020.8</li>
<li>这是一个职位</li>
<li>xx年</li>
<li>中国</li>
</ul>
</div>
<!-- 个人信息结束 -->
<!-- 工作经验开始 -->
<div class="experience clearfix">
<div class="experience-title float">
工作经验
</div>
<div class="experience-content float">
<div class="experience-content-time">
1949.10-2020.08
</div>
<div class="experience-content-name">
这是一个公司 这是一个部门 这是一个职位
</div>
</div>
</div>
<!-- 工作经验结束 -->
<!-- 专业技能开始 -->
<div class="skill clearfix">
<div class="skill-title float">
专业技能
</div>
<div class="skill-content float">
<ol>
<li>熟练使用html、css、Javascript进行前端页面代码编写；</li>
<li>熟练使用JQuery框架实现页面交互效果；</li>
<li>根据UI图设置样式布局开发小程序等；</li>
<li>对移动设备css3进行相应的兼容处理，使小程序能正常运行；</li>
<li>熟练使用flex布局, 使用Bootstarp,ElementUI前端框架；</li>
<li>使用Vue框架，vue-cli脚手架工具；</li>
<li>使用Sass预处理器进行css快速编写；</li>
<li>使用svn，git版本控制工具进行代码管理。</li>
</ol>
</div>
</div>
<!-- 专业技能结束 -->
<!-- 项目经验开始 -->
<div class="project">
<div class="project-header">项目经验</div>
<div class="project-wrap">
<div class="project-wrap-content clearfix">
<div class="project-title float">
<div class="title-time">2020.08-2020.08</div>
<div class="title-name">项目名称</div>
</div>
<div class="project-content float">
<div class="content-title">使用工具：xxx</div>
<ol>项目职责：
<li>使用vue，vue-router构建单页面应用，使用vue-cli 快速搭建开发环境；</li>
<li>使用iconfont加载图片减少页面加载时间；</li>
<li>使用ElementUI组件进行快速开；</li>
<li>使用sass预编译语言进行css快速编写；</li>
<li>使用vue-lazyload实现图片懒加载；</li>
<li>使用vuex处理各组件间的通讯，vue-resource处理请求。</li>
</ol>
<p>项目描述：这里是项目描述。</p>
</div>
</div>
<div class="project-wrap-content clearfix">
<div class="project-title float">
<div class="title-time">2020.08-2020.08</div>
<div class="title-name">项目名称</div>
</div>
<div class="project-content float">
<div class="content-title">使用工具：xxx</div>
<ol>项目职责：
<li>根据设计图，使用HTML、CSS编写页面，采用flex进行页面布局；</li>
<li>使用jQuery技术实现交互和页面动态效果，以及轮播图的呈现；</li>
<li>使用正则表达式，实现注册功能等；</li>
<li>用与后台人员进行进行协商实现数据的交互；</li>
<li>对项目进行测试以及页面的优化，有效解决兼容问题和优化问题。</li>
</ol>
<p>项目描述：这里是项目描述。
</p>
</div>
</div>
</div>
</div>
<!-- 项目经验结束 -->
<!-- 教育背景开始 -->
<div class="edu clearfix">
<div class="edu-title float">教育背景</div>
<div class="edu-content float">
<div class="edu-content-time">2020.08-2020.08</div>
<div class="edu-conetnt-name">这里是一所大学 学历</div>
</div>
</div>
<!-- 教育背景结束 -->
<!-- 自我评价开始 -->
<div class="assess clearfix">
<div class="assess-title float">
自我评价
</div>
<div class="assess-content float">
积极主动、做事沉稳、对待工作认真负责、有较强的团队精神;能够承受一定的压力,具有较强的适应能力,纪律性强，工作积极配合，有问题及时反应。
</div>
</div>
<!-- 自我评价结束 -->
</div>
</body>
</html>css部分：
/* 公用样式开始 */
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.float{
float: left;
}
.clearfix::after{
content: '';
display: table;
clear: both;
}
/* 公用样式结束 */
body{
background-color: rgb(27, 26, 26);
font-size: 18px;
color: darkgrey;
}
.wrap{
width: 1000px;
height: auto;
padding-bottom: 110px;
margin: 0 auto;
background-color: rgb(75, 66, 66);
}
.title{
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 30px;
background-color: rgb(27, 26, 26);
background: linear-gradient(rgb(0, 0, 0),rgb(75, 66, 66));
}
/* 个人信息开始 */
.header{
margin-top: 10px;
font-size: 20px;
}
.header > ul > li{
list-style: none;
}
.header-id{
padding-left: 250px;
display: inline-block;
}
.header-id:nth-child(2){
padding-left: 100px;
}
.header-id li{
color: #fff;
}
/* 个人信息结束 */
/* 工作经验开始 */
.experience{
margin-top: 50px;
}
.experience-title{
margin-left: 150px;
padding: 4px;
border: 3px solid rgb(34, 33, 70);
border-radius: 30%;
}
.experience-content{
padding-left: 62px;
line-height: 30px;
}
/* 工作经验结束 */
/* 专业技能开始 */
.skill{
margin-top: 50px;
}
.skill-title{
margin-left: 150px;
padding: 4px;
border: 3px solid rgb(34, 33, 70);
border-radius: 30%;
}
.skill-content{
padding-left: 78px;
}
/* 专业技能结束 */
/* 项目经验开始 */
.project{
margin-top: 50px;
}
.project-header{
width: 72px;
margin-left: 150px;
padding: 4px;
border: 3px solid rgb(34, 33, 70);
border-radius: 30%;
}
.project-wrap{
font-size: 16px;
padding-left: 30px;
}
.project-wrap-content:nth-child(2){
margin-top: 50px;
}
.project-title{
margin-top: 10px;
padding-left: 150px;
color: cornflowerblue;
}
.project-content{
padding-left: 30px;
}
.content-title{
width: 130px;
padding-top: 10px;
padding-bottom: 10px;
}
.project-content > ol{
padding-left: 20px;
line-height: 24px;
}
.project-content > p{
margin-top: 20px;
white-space:normal;
width: 550px;
line-height: 24px;
}
/* 项目经验结束 */
/* 教育背景开始 */
.edu{
margin-top: 50px;
}
.edu-title{
width: 72px;
margin-left: 150px;
padding: 4px;
border: 3px solid rgb(34, 33, 70);
border-radius: 30%;
}
.edu-content{
padding-left: 78px;
line-height: 30px;
}
/* 教育背景结束 */
.assess{
margin-top: 50px;
}
.assess-title{
width: 72px;
margin-left: 150px;
padding: 4px;
border: 3px solid rgb(34, 33, 70);
border-radius: 30%;
}
.assess-content{
padding-left: 78px;
line-height: 30px;
white-space:normal;
width: 550px;
}
上一篇： vue中的Watch属性
下一篇： 一份简历引发的思考