html代码实现简单的简历模板

用前端代码编写一个简单的简历模板

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Biographical Notes</title><style>/*div{*//*    border:1px solid red;*//*}*/.info>p{margin: 0;/*border: 1px solid black;*/width: 250px;display: inline-block;padding: 10px;text-indent: 20px;/*letter-spacing: 2px;*/}.container{border:1px solid skyblue;width: 800px;height: 1500px;background-color: #eeeeff;margin: auto;}.baseinfo{height: 16%;}.info{width: 600px;float: left;}.photo{/*border: 1px solid blue;*/width: 150px;height: 204px;float: left;padding: 10px;margin: 10px 14px auto 6px;}.education{height: 12%;}.experience{height: 34%;}.skills{height: 15%;}.me{height: 15%;}.line{width:760px;height: 40px;background-color:cadetblue;color: white;letter-spacing: 2px;text-indent: 10px;line-height: 40px;font-size: 20px;margin:10px 18px 0 18px;}.linetitle{color: cadetblue;font-size: 16px;margin-left: 20px;}.linetitle span{display: inline-block;width:30%;text-align: center;}.linetitle span:first-child{text-align: left;}.linetitle span:last-child{text-align: right;}.text{text-indent: 30px;}.text:before{content: "·";margin-right: 8px;font-size: 20px;font-weight: bolder;}</style>
</head>
<body><div class="container"><div class="baseinfo"><div class="info"><p style="font-size: 30px;color: lightseagreen;font-weight: bold">鞠婧祎</p><br><p>政治面貌：XXXX</p> <p>求职意向：XXXX</p><br><p>生日：199X.XX.XX</p> <p>手机：158*******7</p><br><p>民族：汉族</p> <p>邮箱：XXXXXX@qq.com</p><br><p>身高：***cm</p> <p>体重：**kg</p></div><div class="photo"><img src="./image/attr.jpeg" style="width: 100%;height: 100%;"></div></div><div class="education"><div class="line">教育经历/Education</div><div><p class="linetitle"><span>20XX.09-20XX.06</span>  <span>XX大学</span>  <span>XX专业/本科</span></p><p class="text">课程</p><p class="text">课程</p></div></div><div class="experience"><div class="line">工作经历/Experience</div><div><p class="linetitle"><span>20XX.05-20XX.03</span>   <span>XX公司</span>  <span>XX工程师</span></p><p class="text">负责</p><p class="text">负责</p><p class="text">负责</p><p class="text">负责</p><p class="text">负责</p></div><div><p class="linetitle"><span>20XX.04-今</span>  <span>XX公司</span>   <span>XX岗位</span></p><p class="text">负责</p><p class="text">负责</p><p class="text">负责</p><p class="text">负责</p></div></div><div class="skills"><div class="line">个人技能/Personal Skills</div><div><p class="text">技能</p><p class="text">技能</p><p class="text">技能</p><p class="text">技能</p></div></div><div class="me"><div class="line">自我评价/About Me</div><div><p class="text">本人</p><p class="text">本人</p><p class="text">本人</p><p class="text">本人</p></div></div></div>
</body>
</html>

运行结果如下：

点我进群一起学习交流！

QQ群：741909960

html代码实现简单的简历模板相关推荐

HTML5期末大作业：网购网站设计——品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码学生简单购物网站设计成品
HTML5期末大作业:网购网站设计--品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码学生简单购物网站设计成品常见网页设计作业题材有个人. 美食. 公司. 学校 ...
HTML+CSS实例：简单朴素的个人简历模板（HTML表格使用+css样式渲染）
个人简历模板丑是丑了点,没有那么花里胡哨... 先看展示代码实现 <!DOCTYPE html> <html lang="en"> <head&g ...
极简风格的响应式简历模板
Crisp Minimal Résumé github.com/crispgm/res- 简介极简风格的响应式简历模板,基于 Jekyll,可以直接部署在 GitHub Pages 上. 通过配置 ...
大厂程序员教你如何写简历（附简历模板）//简历、秋招、简历模板。经验分享、资源分享
最近朋友圈很多大佬都已经转发公司的招聘信息了,一年一度的秋招又来了. "如果你是应届的同学,请务必参加秋招",这对应届生来说是真的很重要! 而面试不单单是考察你的技术能力,简历也是 ...
计算机人员基础简历,计算机技术支持人员个人简历模板
计算机技术支持人员个人简历模板个人信息姓名:ijianli.com 性别:男婚姻状况:未婚出生日期:19**年1月籍贯:广西xx 现居住:南宁毕业学校:XX 专业:X ...
简历模板python爬虫
先看爬虫得到的简历模板: 具体实现就几十行代码啦,代码如下: import re import os import sys import random import requests from bs4 ...
基于PHP+MySQL简历模板下载管理系统
随着时代的发展和进步,互联网络日益成为大众生活的发展方向,每年都有大量的毕业生需要求职,在求职的过程中简历是必不可少的一个环节,但是很多时候求职人员不知道如何更好的制作一份简历,这个情况就需要到网上寻 ...
XeLatex + MacTex 一个简洁快速的个人简历模板及其他合集
为什么使用XeLatex 和MacTex 又到了每年的9月10月的求职高峰季,填简历的时候看到一个非常充实又十分清爽的简历,可惜排版有些瑕疵,应该是word写的,于是自己开始折腾用Latex来制作一个 ...
月薪30K的软件测试简历怎么包装，软件测试项目经验怎么写？软件测试简历编写，软件测试简历模板
如果你的简历不能"对症下药",那就无法获得和HR以及面试官的沟通机会! 今天咱们不说虚的,花几分钟的时间,教你写出优秀的软件测试简历! 首先,我们需要知道一份标准的简历应该包含哪些 ...
简历的项目经验该怎么写？看过来啦。文章结尾内含简历模板福利
你是否还在为简历而烦恼,是的,我来帮助你了.作为一个分享达人,自然碰到好的东西也想分享给你们啦!(主要也是为了我自己) 项目一米乐淘网上商城项目名称: 米乐淘网上商城开发环境: Ecliplse ...

html代码实现简单的简历模板

用前端代码编写一个简单的简历模板

html代码实现简单的简历模板相关推荐

最新文章

热门文章