HTML+CSS实现个人简历
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS实现个人简历
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
剛學完CSS，寫個簡歷，有點丑的哈哈哈，主要是為了kunkun寫的。
jianli.html如下：（圖片自己替換啊）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>簡歷制作my Dong</title><link rel="stylesheet" href="jianli.css"> </head> <body><!-- 先定一個大的容器 --> <div class="container"><div class="topline" ><div class="top_left" ></div><div class="top_right"><p>個人簡歷</p></div></div><div class="mid"><div class="ikun" ><img src="images/ikun.png" ><div class="ikun_mid"><h3><span>蔡徐坤</span><br><p style="color: #4088A5">求職意向:個人練習生</p></h3></div><div class="ikun_right"><div class="ikun_r1"><p>24歲</p><img src="images/1.svg" width="30px" height="30px" style="transform: translate(5px,10px)"></div><div class="ikun_r2"><p>15812345678</p><img src="images/2.svg" width="30px" height="30px" style="transform: translate(5px,10px)"></div><div class="ikun_r3"><p>1632461234@qq.com</p><img src="images/3.svg" width="30px" height="30px" style="transform: translate(5px,10px)"></div><div class="ikun_r4"><p>湖南省長沙市</p><img src="images/4.svg" width="30px" height="30px" style="transform: translate(5px,10px)"></div></div></div><div class="edu"><h3 style="margin-bottom: -8px;"><span style="border-bottom: 3px solid black">教育背景</span></h3><hr><div class="normal"><p>2002.07~2006.07</p><p style="margin-left: 100px">中南大學</p><p style="margin-left: 100px">籃球專業（專科）</p></div><p style="margin-top: -10px">主修課程：唱、跳、RAP、打籃球</p></div><div class="work"><h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">實習經驗</span></h3><hr><div class="normal"><p>2012.04~至今</p><p style="margin-left: 100px">中南哇唧唧哇本科生院</p><p style="margin-left: 100px">預備Idol</p></div><ul style="margin-top: -10px;margin-left: -15px"><li>主修課程：唱、跳、RAP、打籃球</li><li>為了愛與正義，為了世界和平，我們ikun要站出來；</li><li>我就是中南之光。</li></ul><div class="normal"><p>2010.03~2012.03</p><p style="margin-left: 100px">中南哇唧唧哇研究生院</p><p style="margin-left: 100px">預備Idol研究生</p></div><ul style="margin-top: -10px;margin-left: -15px"><li>主修課程：唱、跳、RAP、打籃球</li><li>為了愛與正義，為了世界和平，我們ikun要站出來；</li><li>我就是中南之光。</li></ul><br></div><div class="school"><h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">校園經歷</span></h3><hr><div class="normal"><p>2009.03~2011.06</p><p style="margin-left: 100px">中南大學</p><p style="margin-left: 100px">校園形象大使</p></div><ul style="margin-top: -10px;margin-left: -15px"><li>帶領自己的團隊完成練習計劃；</li><li>為了愛與正義，為了世界和平，我們ikun要站出來；</li><li>我就是中南之光。</li></ul></div><div class="tech"><h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">技能證書</span></h3><hr><p>中南大學校園十佳歌手；</p><p>中南大學舞蹈最佳solo；</p><p>中南大學籃球比賽最有價值球員MVP。</p></div><div class="self"><h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">自我評價</span></h3><hr><p>大家好，我是練習時長兩年半的個人練習生，我深耕中南十余載，歷盡千辛萬苦，終學得一技之長，希望我能為我的粉絲們帶來快樂，跟著我左手右手一個慢動作，右手左手慢動作重播。</p></div></div><div class="topline" ><div class="top_left1" ></div><div class="top_right"></div></div></div> </body> </html>jianli.css如下：?
/* 容器為柵格布局 */ .container{display: grid;box-shadow: 0px 10px 50px 10px lightgrey; /*簡歷周圍陰影*/width: 900px;margin: 100px auto;/*background: red;*/} /* 簡歷上方線條 */ .topline{display: flex;flex-direction: row; } .top_left{background-color: #248CB1;height: 30px;width: 30px;/*transform: translate(-30px,0); !* 向左偏移 *!*/ } .top_left1{background-color: #248CB1;height: 30px;width: 200px;/*transform: translate(-30px,0); !* 向左偏移 *!*/ }.top_right{background-color: black;height: 30px;width: 100%;/*transform: translate(-30px,0);*/margin-bottom: 20px; } .top_right p{transform: translate(0,-10px);color: whitesmoke;font-weight: bold; /* 粗體 */ }/* mid */ .mid{margin-left: 30px; }/*照片*/ .ikun{display: flex;flex-direction: row;align-items: end; } .ikun_mid{margin-left: 50px;display: flex;flex-direction: column;} .ikun_mid span{font-size: 40px; }.ikun_right{display: flex;flex-direction: column;margin-left: 230px;align-items: flex-end; } .ikun_r1,.ikun_r2,.ikun_r3,.ikun_r4{display: flex;flex-direction: row;margin-bottom: -15px; }.normal{display: flex;flex-direction: row;font-weight: bold; }效果如下：?
總結
以上是生活随笔為你收集整理的HTML+CSS实现个人简历的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ip_vs实现分析(2)
- 下一篇： html5个人简历代码模板,个人简历HT