利用HTML和CSS做的简历模板
生活随笔
收集整理的這篇文章主要介紹了
利用HTML和CSS做的简历模板
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
樣例
小圖標(biāo)的下載地址：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="./圖片/畢業(yè)證.svg" class="pimg"><span class="ptext">學(xué)歷:本科</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大學(xué)</span><span class="text" style="float: right">計算機(jī)科學(xué)與技術(shù)</span></div><div><span class="text"><b>主修課程：</b>數(shù)據(jù)結(jié)構(gòu)，計算機(jī)網(wǎng)絡(luò)，操作系統(tǒng)，計算機(jī)組成原理，Java語言程序設(shè)計基礎(chǔ)，編譯原理，現(xiàn)代數(shù)據(jù)庫，程序設(shè)計基礎(chǔ)，計算機(jī)科學(xué)導(dǎo)論，計算機(jī)專業(yè)英語，高等數(shù)學(xué)，線性代數(shù)等</span></div> </div><div class="cla"><div class="subtitle"><img src="./圖片/計算機(jī)水平.svg" class="subtitle-img"><span class="subtitle-text">專業(yè)技能</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="./圖片/設(shè)置.svg" class="subtitle-img"><span class="subtitle-text">項目經(jīng)驗</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>開發(fā)環(huán)境：</b> XXX</span></div><div><span class="text"><b>項目描述：</b> XXX</span></div><div><span class="text"><b>主要職責(zé)：</b> XXX</span></div><br> <div class="cla"><div><img src="./圖片/獎狀，勛章，榮譽(yù)，證書.svg" class="subtitle-img"><span class="subtitle-text">榮譽(yù)證書</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="./圖片/目標(biāo).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為例
右擊，選擇打印
注意將頁面和頁腳選項刪除
目標(biāo)打印機(jī)選擇：Micorosoft Print to PDF
總結(jié)
以上是生活随笔為你收集整理的利用HTML和CSS做的简历模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MacOS下DockerCE的使用方式
- 下一篇： 计算机属性设备管理器无图标,设备管理器图