15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML CSS实现个人简历

HTML CSS实现个人简历

时间:2023-09-21 23:48:02 | 来源:网站运营

时间:2023-09-21 23:48:02 来源:网站运营

HTML CSS实现个人简历:

  1. 使用模板修改HTML中的内容;
  2. 在网页中查看,右键打印,保存成PDF。
模板地址:https://github.com/dawnstaryrx/resume

demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人简历</title> <link rel="stylesheet" href="./styles/index.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;600;700&display=swap" rel="stylesheet"></head><body> <header> <div id="header-top">个人简历</div> <div>+(86) 183xxxx3987 ⋄ xxxxxxxxxx@qq.com</div> <div>xxxx大学,邮编xxxxx</div> </header> <div class="div-middle"> <div class="div-middle-topic">基本信息</div> <div class="div-middle-content"> <table> <tr> <td class="td-left">姓名</td> <td class="td-right">xxx</td> </tr> <tr> <td class="td-left">性别</td> <td class="td-right">x</td> </tr> <tr> <td class="td-left">籍贯</td> <td class="td-right">xx</td> </tr> <tr> <td class="td-left">出生年月</td> <td class="td-right">20xx.xx</td> </tr> <tr> <td class="td-left">政治面貌</td> <td class="td-right">xxxx</td> </tr> </table> </div> </div> <div class="div-middle"> <div class="div-middle-topic">教育背景</div> <div class="div-middle-content"> <div class="div-middle-content-left">xxxx大学</div> <div class="div-middle-content-right">201x.x-xxxxxx</div> <div class="div-middle-content-bottom"> 本科,xxxx学院,xxxx专业 <br><br> 总GPA:3.xx/4.00 <br> xxxxx成绩均80+ </div> </div> </div> <div class="div-middle"> <div class="div-middle-topic">荣誉/证书</div> <div class="div-middle-content"> <div class="div-middle-content-left">校长奖学金</div> <div class="div-middle-content-right">2021.10</div> <div class="div-middle-content-left">CET-6</div> <div class="div-middle-content-right">2021.12</div> <div class="div-middle-content-left">计算机二级</div> <div class="div-middle-content-right">2021.3</div> <div class="div-middle-content-left">xxxx</div> <div class="div-middle-content-right">xxxxx</div> </div> </div> <div class="div-middle"> <div class="div-middle-topic">实践经历</div> <div class="div-middle-content"> <div class="div-middle-content-left">软件设计认知实习</div> <div class="div-middle-content-right">2020.9</div> <div class="div-middle-content-bottom" id="content"> 软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍 </div> </div> <div class="div-middle-content"> <div class="div-middle-content-left">企业小型项目实习</div> <div class="div-middle-content-right">2022.9</div> <div class="div-middle-content-bottom" id="content"> 软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍 </div> </div> <div class="div-middle-content"> <div class="div-middle-content-left">Web APP开发</div> <div class="div-middle-content-right">2022.3</div> <div class="div-middle-content-bottom" id="content"> 软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍 </div> </div> <div class="div-middle-content"> <div class="div-middle-content-left">Web项目</div> <div class="div-middle-content-right">2022.6</div> <div class="div-middle-content-bottom" id="content"> 软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍软件设计认知实习介绍 </div> </div> </div> <div class="div-middle"> <div class="div-middle-topic">技能</div> <div class="div-middle-content"> <div class="div-middle-content-bottom"> 编程语言:熟练使用C/C++,Python,Java语言,了解shell,Matlab等函数式语言。 <br> 机器学习:了解numpy,matplotlib,sklearn。 </div> </div> </div> <div class="div-middle"> <div class="div-middle-topic">其他</div> <div class="div-middle-content"> <div class="div-middle-content-bottom"> 个人博客:http://xxxx.xxx/ <br> GitHub:https://github.com/dawnstaryrx </div> </div> </div></body></html>css

html { background-color: #d8e3e7; font-family: 'Noto Serif SC', serif;}body { max-width: 900px; margin: 0 auto;}header { margin-top: 30px; text-align: center;}header>#header-top { font-weight: 700; font-size: 50px; margin-bottom: 10px;}.td-left { width: 100px; font-weight: 600;}.div-middle-topic { font-weight: 700; border-bottom-color: black; border-bottom-width: 1px; border-bottom-style: solid; margin-top: 20px; margin-bottom: 10px;}.div-middle-content { padding-left: 30px;}.div-middle-content-left { width: 400px; font-weight: 700; float: left;}.div-middle-content-right { float: left; text-align: right; width: 465px;}.div-middle-content-bottom { clear: both;}#content { font-family: '楷体';}

关键词:简历,实现

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭