利用HTML和CSS做的简历模板
生活随笔
收集整理的這篇文章主要介紹了
利用HTML和CSS做的简历模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
樣例
小圖標的下載地址：https://www.iconfont.cn/
下載地址：http://download.csdn.net/download/olivia12344321/19098756?spm=1001.2014.3001.5501
代碼
HTML
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>簡歷模板</title><link rel="stylesheet" href="./簡歷模板.css" > </head> <body> <div><span id="personname">XXX</span><br><br> <span><span><img src="./圖片/電話.svg" class="pimg"><span class="ptext" id="tel">電話:159XXXXXXX</span></span><span class="pspan"><img src="./圖片/郵箱.svg" class="pimg"><span class="ptext" >郵箱:XXXXXX@qq.com</span></span><br><br><span><img src="圖片/日歷.svg" class="pimg"><span class="ptext">出生年月：2000.01</span></span><span class="pspan"><img src="./圖片/畢業證.svg" class="pimg"><span class="ptext">學歷:本科</span></span> </span><br><br> <span ><img src="./圖片/01.jpg" id="personimg1" > </span> </div><div class="cla"><div class="subtitle"><img src="./圖片/教育.svg" class="subtitle-img"><span class="subtitle-text">教育背景</span></div><hr><div class="middle"><span class="text">XXX-XXXX</span><span class="text" id="school">XXX大學</span><span class="text" style="float: right">計算機科學與技術</span></div><div><span class="text"><b>主修課程：</b>數據結構，計算機網絡，操作系統，計算機組成原理，Java語言程序設計基礎，編譯原理，現代數據庫，程序設計基礎，計算機科學導論，計算機專業英語，高等數學，線性代數等</span></div> </div><div class="cla"><div class="subtitle"><img src="./圖片/計算機水平.svg" class="subtitle-img"><span class="subtitle-text">專業技能</span></div><hr><ul><li>XXX</li><li>XXX</li><li>XXX</li><li>XXX</li><li>XXX</li></ul> </div> <div class="cla"><div class="subtitle"><img src="./圖片/設置.svg" class="subtitle-img"><span class="subtitle-text">項目經驗</span></div><hr><div class="middle"><span class="text">XXX-XXXX項目</span><span class="text" style="float: right">時間</span></div><div><span class="text"><b>開發環境：</b> XXX</span></div><div><span class="text"><b>項目描述：</b> XXX</span></div><div><span class="text"><b>主要職責：</b> XXX</span></div><br> <div class="cla"><div><img src="./圖片/獎狀，勛章，榮譽，證書.svg" class="subtitle-img"><span class="subtitle-text">榮譽證書</span></div><hr><ol><li><span class="text">XX</span><span class="R" >2021年</span></li><li><span class="text">XX</span><span class="R" >2020年</span></li><li><span class="text">XX</span><span class="R" >2020年</span></li><li><span class="text">XX</span><span class="R" >2019年</span></li><li><span class="text">XX</span><span class="R" >2019年</span></li><li><span class="text">XX</span><span class="R" >2019年</span></li></div><div><div><img src="./圖片/目標.svg" class="subtitle-img"><span class="subtitle-text">自我介紹</span></div><hr><span class="text">XXXX</span> </div></body> </html>CSS
#personname{color: #3faadb;font-family: 楷體;font-size: 35px;} .pimg{width:20px;height: 20px; }.ptext{font-weight: bold; } .pspan{margin-left: 50px; } #personimg1{width: 120px;height: 160px;position: absolute;top:0px;right: 0px; }.subtitle-text{font-size: 20px;font-weight: bold;margin-left: 10px; }hr{size:15px;color: black;border-bottom:none; }.cla{margin-bottom: 15px; } #school{margin-left: 25%; } .middle{margin-bottom: 3px; }.R{float: right }.subtitle-img{width:25px;height: 25px; }如何打印
以Chrome為例
右擊，選擇打印
注意將頁面和頁腳選項刪除
目標打印機選擇：Micorosoft Print to PDF
總結
以上是生活随笔為你收集整理的利用HTML和CSS做的简历模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MacOS下DockerCE的使用方式
- 下一篇： PDF转HTML常用方法分享