用html和CSS做个人简历
生活随笔
收集整理的這篇文章主要介紹了
用html和CSS做个人简历
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
很多剛學web的同學第一個項目應該都是做一個個人簡歷，這個是查了多方資料的剛剛寫出來的一個簡歷，所以可能會參考網上的一些代碼，兄弟們拿去復制就可以。里面有的注釋可能不太對勁，不要太在意，畢竟我也是一個剛學一周的小菜鳥。也希望大佬們多來指正。
?
? <!DOCTYPE html> <html lang="zh"> <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"><title>我的簡歷</title><style >*{box-sizing: border-box;/* 將所有的box-sizing換成border-box */}body {background: #eee;margin: 30px 0;}article {width: 21cm;min-height: 29.7cm;/* A4紙的大小 */background: white;margin: 0 auto;/* 左右居中 */overflow: auto;/* 如果內容被修剪，則瀏覽器會顯示滾動條，以便查看其余內容 */padding: 1em;/* 內邊距 */}</style><style>body{}article{padding-top: 20px;}p{margin: .3em 0;}/* p的行間距 */h1{font-size: 25px;margin-top: 0;}ol,ul{list-style: none;}/* 不要ol和ul之前的數字，因為它會影響到后面的寬度*/h3,h4,h5,h6{margin: 0;}h4,h5,h6{font-weight: normal;}/* 取消這幾個標題的加粗 */.bio{position: relative;}.bio img{position: absolute;/* 讓圖片頂上去和文字保持水平 */top:0;right: 0;}ul{margin: 0;padding: 0;/* 使ul標簽和li標簽文字能夠對齊 */}</style><style>.work{}.work>h2{}/* >選擇器 */.work>ol{list-style-position: inside;margin-top: 0;padding: 0;}.work>ol>li{margin: 12px 0;}.work header{display: flex;color: #666;margin-bottom: 12px;}.work header>h3{font-size: 18px;color: #333;}.work header>h4{margin-left: 1em;font-size: 18px;}.work header>span{font-size: 18px;margin-left: auto;}.work li{color: #666;}.work strong{color: #F60;}/* strong標簽里的字的顏色 */</style><style>.projects{}.projects p{color: #666;}/* p段字體的顏色 */.projects strong{color: #f60;}.projects > ol{list-style-position: inside;margin-top: 0;/* 使li標簽和ol標簽的文字能夠對齊 */padding: 0;}.projects >ol >li{margin-bottom: 24px;/* ol標簽和li標簽之前的間距 */}.projects > ol > li > header{display: flex;/* 把鏈接和文案分開 */justify-content: space-between;}.projects > ol > li h3{display: inline-block;color: #333;}</style><style>.major{}.major > ol{list-style-position: inside;margin-top: 0;padding: 0;}.major > ol > li > header{display: flex;justify-content: space-between;}.major > ol > li h2{display: inline-block;}.major h4{font-weight: normal;color: #666;}.major strong{color: #f60;}.tupian img{position: relative;bottom: 5px;left: 500px;}.major >.wrapper{display: flex;justify-content: space-between;/* 使兩個盒子并列分布 */}.major >.wrapper:first-child{margin-right: 24px;/* 兩個盒子之間的間距，first-child是第一個元素，因為我們不確定哪個盒子是第一個 */}.major >.wrapper>#tupian{margin-bottom: 18px;}.major >.wrapper>ul>li{line-height: 1.5;margin-bottom: 8px;}</style><style>.huojiang{}/* 基本和上面都是一樣的 */.huojiang > ol{list-style-position: inside;margin-top: 0;padding: 0;}.huojiang > ol > li > header{display: flex;justify-content: space-between;}.huojiang > ol > li h2{display: inline-block;}.huojiang h4{font-weight: normal;color: #666;}.huojiang strong{color: #f60;}</style> </head> <body><article><section class="bio"><h1>*</h1><img src="images/zheng.jpg" alt="" width="150" height="200"/><p>女| 21歲 | web前端開發工程師 | 地址</p><p>手機：* | 微信：* | 郵箱：8</p></section><section><h2>教育經歷</h2><p><span><time>2018年</time>~<time>2022年</time></span>*大學   計算機與信息工程學院   計算機科學與技術   本科</p> </section><hr /><!-- 畫個橫線 --><section class="work"><!-- 給他設個名字，方便css中調用 --><h2>工作經歷</h2><ol><li><header><h3>**集團</h3><h4>財務助理</h4><span><time>2018年12月</time>~<time>2019年2月</time></span></header><ul><li>負責每天匯總分店營業額，整理財務報表。</li></ul></li><li><header><h3>*文化有限公司</h3><h4>助理</h4><span><time>2019年7月</time>~<time>2020年8月</time></span></header><ul><li>負責監<strong>*軟件</strong>工作是否異常，<strong>做一些簡單修改</strong>。</li><!-- strong是加粗 --><li>如果出現重大異常需要及時和*的人交流，<strong>并協助修改代碼</strong>。</li></ul></li><li><header><h3>***</h3><h4>***<strong>***</strong></h4><span><time>2019年8月</time>~<time>2019年9月</time></span></header><ul><li>***</li></ul></li></ol></section><hr /><section class="projects"><h2>項目經歷</h2><ol><li><header><h3>遇見匠音</h3><a href="#">項目預覽</a></header><p>一款針對提高大學生音樂素養的一個<strong>大創項目</strong></p></li><li><header><h3>弦上音樂</h3><a href="#">項目預覽</a></header><p>一個以私人訂制展開的音樂課程班的<strong>大創項目</strong></p></li></ol></section><hr /><section class="huojiang"><h2>獲獎經歷</h2><ol><li><header><h4>挑戰杯大賽<strong>校級三等獎</strong></h4></header></li><li><header><h4>大學生創業項目<strong>自治區級</strong></h4></header></li><li><header><h4>一篇期刊論文<strong>國家級</strong>（普刊）</h4><a href="#">論文預覽</a></header></li></ol></section><section class="major"><hr /><h2>專業技能</h2><div class="wrapper"><ul><li><header><h4>鋼琴社會<strong>8級</strong>證書</h4></header></li><li><header><h4>聲樂社會<strong>8級</strong>證書</h4></header></li><li><header><h4>*<strong>簽約作者</strong></h4></header></li><li><header><h4><strong>雅思</strong>六分</h4></header></li></ul><div id="tupian" style="width: 500px; height: 270px;"><!-- 為了使這個表格在文案的后面所以這個盒子要放在這里 --><table width="250" height="200" border="1" cellspacing="0" cellpadding="10" align="center" /><!-- 表格的一些屬性 --><!--表格標題--><caption>證書時間表</caption><thead><!--只是表示結構，表格中的特有標簽--><tr><!--行--><th>證書1</th><!--單元格--><th>級別</th><th>年齡</th> </tr></thead><tbody><tr><!--行--><td>鋼琴8級</td><!--單元格--><td>國家級</td><td>12</td> </tr><tr><!--行--><td>聲樂8級</td><!--單元格--><td>國家級</td><td>15</td> </tr></tbody></table></div></div></section></article> </body> </html>?這個是做出來的效果，可以參考一下。
總結
以上是生活随笔為你收集整理的用html和CSS做个人简历的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【51单片机快速入门指南】5：软件SPI
- 下一篇： html带圈的数字号码,html – 带