用html和CSS做个人简历
2024-06-02 13:36:16
很多刚学web的同学第一个项目应该都是做一个个人简历，这个是查了多方资料的刚刚写出来的一个简历，所以可能会参考网上的一些代码，兄弟们拿去复制就可以。里面有的注释可能不太对劲，不要太在意，毕竟我也是一个刚学一周的小菜鸟。也希望大佬们多来指正。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>我的简历</title><style >*{box-sizing: border-box;/* 将所有的box-sizing换成border-box */}body {background: #eee;margin: 30px 0;}article {width: 21cm;min-height: 29.7cm;/* A4纸的大小 */background: white;margin: 0 auto;/* 左右居中 */overflow: auto;/* 如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容 */padding: 1em;/* 内边距 */}</style><style>body{}article{padding-top: 20px;}p{margin: .3em 0;}/* p的行间距 */h1{font-size: 25px;margin-top: 0;}ol,ul{list-style: none;}/* 不要ol和ul之前的数字，因为它会影响到后面的宽度*/h3,h4,h5,h6{margin: 0;}h4,h5,h6{font-weight: normal;}/* 取消这几个标题的加粗 */.bio{position: relative;}.bio img{position: absolute;/* 让图片顶上去和文字保持水平 */top:0;right: 0;}ul{margin: 0;padding: 0;/* 使ul标签和li标签文字能够对齐 */}</style><style>.work{}.work>h2{}/* >选择器 */.work>ol{list-style-position: inside;margin-top: 0;padding: 0;}.work>ol>li{margin: 12px 0;}.work header{display: flex;color: #666;margin-bottom: 12px;}.work header>h3{font-size: 18px;color: #333;}.work header>h4{margin-left: 1em;font-size: 18px;}.work header>span{font-size: 18px;margin-left: auto;}.work li{color: #666;}.work strong{color: #F60;}/* strong标签里的字的颜色 */</style><style>.projects{}.projects p{color: #666;}/* p段字体的颜色 */.projects strong{color: #f60;}.projects > ol{list-style-position: inside;margin-top: 0;/* 使li标签和ol标签的文字能够对齐 */padding: 0;}.projects >ol >li{margin-bottom: 24px;/* ol标签和li标签之前的间距 */}.projects > ol > li > header{display: flex;/* 把链接和文案分开 */justify-content: space-between;}.projects > ol > li h3{display: inline-block;color: #333;}</style><style>.major{}.major > ol{list-style-position: inside;margin-top: 0;padding: 0;}.major > ol > li > header{display: flex;justify-content: space-between;}.major > ol > li h2{display: inline-block;}.major h4{font-weight: normal;color: #666;}.major strong{color: #f60;}.tupian img{position: relative;bottom: 5px;left: 500px;}.major >.wrapper{display: flex;justify-content: space-between;/* 使两个盒子并列分布 */}.major >.wrapper:first-child{margin-right: 24px;/* 两个盒子之间的间距，first-child是第一个元素，因为我们不确定哪个盒子是第一个 */}.major >.wrapper>#tupian{margin-bottom: 18px;}.major >.wrapper>ul>li{line-height: 1.5;margin-bottom: 8px;}</style><style>.huojiang{}/* 基本和上面都是一样的 */.huojiang > ol{list-style-position: inside;margin-top: 0;padding: 0;}.huojiang > ol > li > header{display: flex;justify-content: space-between;}.huojiang > ol > li h2{display: inline-block;}.huojiang h4{font-weight: normal;color: #666;}.huojiang strong{color: #f60;}</style>
</head>
<body><article><section class="bio"><h1>*</h1><img src="data:images/zheng.jpg" alt="" width="150" height="200"/><p>女| 21岁 | web前端开发工程师 | 地址</p><p>手机：* | 微信：* | 邮箱：8</p></section><section><h2>教育经历</h2><p><span><time>2018年</time>~<time>2022年</time></span>*大学   计算机与信息工程学院   计算机科学与技术   本科</p> </section><hr /><!-- 画个横线 --><section class="work"><!-- 给他设个名字，方便css中调用 --><h2>工作经历</h2><ol><li><header><h3>**集团</h3><h4>财务助理</h4><span><time>2018年12月</time>~<time>2019年2月</time></span></header><ul><li>负责每天汇总分店营业额，整理财务报表。</li></ul></li><li><header><h3>*文化有限公司</h3><h4>助理</h4><span><time>2019年7月</time>~<time>2020年8月</time></span></header><ul><li>负责监<strong>*软件</strong>工作是否异常，<strong>做一些简单修改</strong>。</li><!-- strong是加粗 --><li>如果出现重大异常需要及时和*的人交流，<strong>并协助修改代码</strong>。</li></ul></li><li><header><h3>***</h3><h4>***<strong>***</strong></h4><span><time>2019年8月</time>~<time>2019年9月</time></span></header><ul><li>***</li></ul></li></ol></section><hr /><section class="projects"><h2>项目经历</h2><ol><li><header><h3>遇见匠音</h3><a href="#">项目预览</a></header><p>一款针对提高大学生音乐素养的一个<strong>大创项目</strong></p></li><li><header><h3>弦上音乐</h3><a href="#">项目预览</a></header><p>一个以私人订制展开的音乐课程班的<strong>大创项目</strong></p></li></ol></section><hr /><section class="huojiang"><h2>获奖经历</h2><ol><li><header><h4>挑战杯大赛<strong>校级三等奖</strong></h4></header></li><li><header><h4>大学生创业项目<strong>自治区级</strong></h4></header></li><li><header><h4>一篇期刊论文<strong>国家级</strong>（普刊）</h4><a href="#">论文预览</a></header></li></ol></section><section class="major"><hr /><h2>专业技能</h2><div class="wrapper"><ul><li><header><h4>钢琴社会<strong>8级</strong>证书</h4></header></li><li><header><h4>声乐社会<strong>8级</strong>证书</h4></header></li><li><header><h4>*<strong>签约作者</strong></h4></header></li><li><header><h4><strong>雅思</strong>六分</h4></header></li></ul><div id="tupian" style="width: 500px; height: 270px;"><!-- 为了使这个表格在文案的后面所以这个盒子要放在这里 --><table width="250" height="200" border="1" cellspacing="0" cellpadding="10" align="center" /><!-- 表格的一些属性 --><!--表格标题--><caption>证书时间表</caption><thead><!--只是表示结构，表格中的特有标签--><tr><!--行--><th>证书1</th><!--单元格--><th>级别</th><th>年龄</th> </tr></thead><tbody><tr><!--行--><td>钢琴8级</td><!--单元格--><td>国家级</td><td>12</td> </tr><tr><!--行--><td>声乐8级</td><!--单元格--><td>国家级</td><td>15</td> </tr></tbody></table></div></div></section></article>
</body>
</html>这个是做出来的效果，可以参考一下。
用html和CSS做个人简历相关推荐
- 用HTML+CSS制作前端简历
用HTML+CSS制作前端简历 我观看了大量 饥人谷前端模拟面试锦集, 观摩了优秀简历的细节 取他们亮点制作成了自己的简历 吴思里的在线简历 闵聪学长的在线简历 方应杭老师演示时制作的Demo 细节的 ...
- css响应式布局_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- [css] 当拿到一个新的项目，让你对这个项目的css做下架构设计，你该如何下手？
[css] 当拿到一个新的项目,让你对这个项目的css做下架构设计,你该如何下手? 公共变量(主题色/主要空隙/主要字号字体等) 编译器(scss/less/postcss/stylus) 自适应方案 ...
- window safari 怎么进入响应式_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- HTML字母导航栏怎么做,如何用css做导航栏？
如何用css做导航栏? 1.新建一个html文件,在head部分,编写css样式 ○ list-style-type: none;是除掉导航前面默认带的点 ○ li a,li a.active ,li ...
- AE导出JSON数据用CSS做前端交互---kalrry
AE导出JSON数据用CSS做前端交互---kalrry 一.简介 二.准备 三.例子 四.参考 一.简介 关于网页端动画实现 web端做动画有多种形式,可以用CSS的animation,也可以用Ca ...
- 用HTML/CSS制作个人简历
HTML/CSS/Javascript是网页制作以及自动化报告制作用到的三大主力.由于Javascript多数情况下用于动画视效,本次简历制作没有涉及到动画过渡,所以我们先来看看HTML/CSS咋回事 ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
- CSS做个五颜六色的风车
做个简单的风车 身为一个Java小白会用css做点风车不过分吧Pay attention to:this is living 风车,不是 lifeless 的风车* 代码: <!DOCTYPE ...
- 使用css做一个右向的三角箭头
使用css做一个右向的三角箭头:如图 使用css 的border 属性,将下.左边框设置宽度为零,使用transfrom属性将图案旋转 45度.即可得到三角箭头 .icon-v-right {widt ...
最新文章
- 斯坦福大学新研究：声波、光波等都是RNN
- SAP MM 物料主数据MRP2 视图’Minimum Lot Size’字段
- 你以为美国商业航天那么牛只是因为马斯克？更多原因在这里！
- Coursera课程Python for everyone：Quiz: eXtensible Markup Language
- 上海大学计算机组成原理12,上海大学计算机组成原理报告1.doc
- 1.1 了解web性能
- MaxCompute 图计算用户手册（上）
- 用python制作贺卡_Python：通过邮箱发送贺卡或明信片
- 关于如何查看 EntityValidationErrors 详细信息的解决方法
- AutoCAD2012官方原版软件下载
- weui 加载提示_jquery weui 滚动加载不触发
- python自动化写作_利用python打造“全自动公文写作神器”之构建公文词库
- 15分钟学会使用Git和远程代码库
- 模型评估方法【附python代码】（信息准则：赤池信息量准则AIC、贝叶斯信息准则BIC）
- 基金指数温度怎么算_指数温度计算方法
- mysql idb恢复_MySQL 通过idb文件恢复Innodb 数据【转】
- 全球及中国智能家居设备市场竞争态势与投资策略建议报告2022版
- Linux的网络编程面试题汇总
- 2012上半年 系统集成项目管理工程师 下午试卷
- opencv学习笔记9：根据图片颜色分割图像