个人简历模板web
根據自己以前使用的簡單簡歷表格，對其進行了web前端還原，也算對自己初步學習知識的一個小小的記錄。
下面是簡歷預覽效果，很簡潔的那種：
?
代碼中沒什么太困難的地方，主要記錄下自己遇到的幾個小問題吧：
1、最開始的簡歷是word版本，里面的表格線是可以很簡單的拖動的，其實原簡歷表格效果除了外邊框和第一列邊框基本是整齊的，其他的邊框線很雜亂，不好完全還原，要設置很多的不同寬度樣式。所以我在excel表格中簡單的還原了word表格，重新分配了下。最后對整個表格進行了重新規劃，用table標簽樣式設置了整體的表格寬，然后使用table中的td標簽單獨設置了每個單元格的寬度占10%，最后照片占兩列寬。
2、使用了<b>標簽進行了加粗字體，對需要填寫的簡歷項目進行加粗顯示。
3、對于照片還有后面合并需要占多行或多列的數據使用了，<colspan>以及<rowspan>進行設置。
4、對于簡歷，編程能力等需要填寫的內容，在相應的td中使用多段文字。并對該行設置class后單獨設置樣式。使用text-indent設置首行縮進，line-height設置行高等。
5、最后一個難點是行間距，采用<p>標簽中的margin：5px設置。
以下是代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>莫某某個人簡歷</title><style>h1{text-align: center;}body{text-align: center;}table{border:2px solid;width:720px;border-collapse: collapse;margin:0 auto;}table td{text-align:center;width:10%;height:50px;border:1px solid;}.char{text-indent: 2em;text-align: left;line-height: 1.2em;}p{margin: 5px auto;}</style> </head> <body> <h1><b>某某莫個人簡歷</b></h1> <table><tr><td><b>姓名</b></td><td>某某莫</td><td><b>性別</b></td><td>男</td><td><b>民族</b></td><td>漢族</td><td><b>籍貫</b></td><td>湖南長沙</td><td colspan="2" rowspan="3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544267836720&di=54a698c73d068dd941acb91bafa6dbc9&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20170821%2Fc0dc6fce5aa7428b90e602fb05bb70a0.jpeg" width="140" height="152"></td></tr><tr><td><b>身份證號</b></td><td colspan="3"></td><td colspan="2"><b>參加工作時間</b></td><td colspan="2"></td></tr><tr><td><b>出生年月</b></td><td colspan="3"></td><td colspan="2"><b>資格證書</b></td><td colspan="2"></td></tr><tr><td><b>學歷</b></td><td></td><td><b>畢業學校</b></td><td colspan="2"></td><td><b>專業</b></td><td colspan="2"></td><td><b>學位</b></td><td></td></tr><tr><td><b>身體狀況</b></td><td>良好</td><td><b>優秀品質</b></td><td colspan="3">不斷學習、工作負責</td><td><b>現居住地</b></td><td colspan="3">長沙市</td></tr><tr><td><b>學習經歷</b></td><td colspan="9" class="char"><p align="left">1</p><p align="left">2</p></td></tr><tr ><td><b>工作簡歷</b></td><td colspan="9" class="char"><p><b>一、</b></p><p>1</p><p><b>二、</b></p><p>2</p></td></tr><tr><td><b>編程能力</b></td><td colspan="9" class="char"><p>1.</p><p>2.</p><p>3.</p><p>4.</p></td></tr><tr><td><b>個人評價</b></td><td colspan="9" class="char"><p>1.</p><p>2.</p></td></tr> </table> </body> </html> View Code?
轉載于:https://www.cnblogs.com/mjion/p/10088139.html
總結
- 上一篇： Maven镜像源
- 下一篇： consul通过web接口的kv存储操作