用HTML+bootstrap制作个人简历
生活随笔
收集整理的這篇文章主要介紹了
用HTML+bootstrap制作个人简历
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
用HTML+bootstrap制作個人簡歷
?
index.html
<!DOCTYPE html> <html lang="en"><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"><link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script><title>個人簡歷</title><style>body {background-color: pink;}.card {background-color: #66ccff;width: 720px;height: 200px;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;border-radius: 10px;text-align: center;/* line-height: 200px; */}.col-sm-7 {background-color: #666;}.col-sm-7 .card {background-color: white;}.col-sm-3 .card {background-color: #fff;}</style></head><body><div class="container"><div class="row"><div class=" col-sm-7"><div class="card"><div class="card-body" style="text-align: center;padding-top: 50px;"><h1 style="padding-bottom: 15px;">求職簡歷</h1><h2>求職意向：前端實習生</h2></div></div><div class="card"><pstyle="background-color: #ffccff;border-radius: 10px;height: 50px;width: 100%;line-height: 50px;">教育背景</p><table><thead><tr>xxxx學校 </tr><tr>xxxx學院 </tr><tr>xxxx-xx-xx </tr></thead><tbody><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></tbody></table></div><div class="card"><pstyle="background-color: #ffccff;border-radius: 10px;height: 50px;width: 100%;line-height: 50px;">工作經驗</p><table><thead><tr>xxxx公司 </tr><tr>xxxx崗位 </tr><tr>xxxx-xx-xx 至今 </tr></thead><tbody><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></tbody></table></div><div class="card"><pstyle="background-color: #ffccff;border-radius: 10px;height: 50px;width: 100%;line-height: 50px;">自我評價</p><table><thead><tr>xxxx公司 </tr><tr>xxxx崗位 </tr><tr>xxxx-xx-xx 至今 </tr></thead><tbody><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></tbody></table></div><div class="card"><pstyle="background-color: #ffccff;border-radius: 10px;height: 50px;width: 100%;line-height: 50px;">獲得榮譽</p><table><thead><tr>xxxx公司 </tr><tr>xxxx崗位 </tr><tr>xxxx-xx-xx 至今 </tr></thead><tbody><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></tbody></table></div><div class="card"><pstyle="background-color: #ffccff;border-radius: 10px;height: 50px;width: 100%;line-height: 50px;">學校經歷</p><table><thead><tr>xxxx公司 </tr><tr>xxxx崗位 </tr><tr>xxxx-xx-xx 至今 </tr></thead><tbody><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></tbody></table></div></div><div class=" col-sm-3" style="background-color: #ccc;"><div class="card" style="width: 300px;height: 400px;margin-top:20px"><div class="bg-img"><img src="/1.jpg" alt=""></div></div><div class="card" style="width: 300px;height: 400px;margin-top:20px"><div class="card-body">姓名：xxx</div><div class="card-body">年齡：xxx</div><div class="card-body">性別：xxx</div><div class="card-body">電話：xxx</div><div class="card-body">郵箱：xxxxx@xxxx.qq.com</div><div class="card-body">籍貫：xxx-xxx-xxx-xxx村</div></div><div class="card" style="width: 300px;height: 400px;margin-top:20px"><p>技能等級</p><br><div class="progress"><div class="progress-bar" style="width:750%"></div><i>c語言</i></div><br><div class="progress"><div class="progress-bar bg-success" style="width:60%"></div><i>java</i></div><br><div class="progress"><div class="progress-bar bg-info" style="width:80%"></div><i>javascript</i></div><br><div class="progress"><div class="progress-bar bg-warning" style="width:90%"></div><i>Html</i></div><br><div class="progress"><div class="progress-bar bg-danger" style="width:70%"></div><i>css</i></div></div></div></div></div></body> </html>喜歡趕緊收藏。
總結
以上是生活随笔為你收集整理的用HTML+bootstrap制作个人简历的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于SM总线控制器驱动的安装
- 下一篇： html 水平分割,HTML设置水平分割