很多刚学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="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>这个是做出来的效果，可以参考一下。
