不知道園友們在使用智聯招聘等網站填寫簡歷的時候對要求輸入的內容有沒有一種無力感,不吐槽了反正就一句話,按照它提供的格式我無法兒寫簡歷,並且面試的時候總會被問道有沒有本身做品,哥們兒每天上班,下班也不勤奮,真沒什麼我的做品,總不能把公司裏作的東西拿出來看吧。。。css
因而乎我想寫一份符合本身要求的簡歷,本身又在作前段開發工做,爲何不寫一個在線簡歷呢,這樣寫什麼是我說了算,並且能寫一些小效果,用來展現一下本身所學,也算半個我的做品吧。設想師美好的,可是html
想寫個web版簡歷沒問題,可是得放在網上讓人看到才行,總不能每次都掏出U盤要求人家插上,右手食指雙擊index.html文件來看吧。。。html5
我的主頁師須要的,可是想搭建一個我的主頁須要買個域名,買個VPS(或者空間)來存放代碼,但資金壓力這對我這種資深屌絲而言實在是不小,並且我也不須要多大存儲空間,支持SQLServer、PHP神碼的,我就是想放幾個html頁面。css3
平時工做都是使用微軟的一套解決方案,ASP.NET、SQLServer,沒有接觸太多流行的非微軟平臺技術,在網上一艘,發現實在是太落後了,當前如日中天的代碼託管平臺github能夠完美解決的個人需求,並且是免費的。簡單介紹一下,但願對和我同樣處於刀耕火種的兄弟們能夠大步跨入新時代git
首先固然是訪問github主頁註冊一個帳號,這個很少說了,建立完帳號登陸成功後,找到 「New respository」 按鈕,添加一個repositorygithub
而後填寫一些我的主頁信息web
Repository name的格式爲 你的用戶名+github,com(不要學我用test,確定不行),這樣之後你就能夠經過 你的用戶名.github.io(和填寫的不徹底同樣)來訪問主頁了。還能夠就寫主頁的介紹,這個在自動生成的網頁中會體現出來,下面的東西好理解,完過後點擊「Create Repository」 按鈕面試
這樣一個Repository就建立好了,點擊設置按鈕,把它轉化爲我的主頁瀏覽器
點擊「Automatic Page Generator」 按鈕,能夠看到咱們以前填寫的一些內容框架
沒問題後點擊「Continue to Layouts」按鈕爲主頁選個主題
選好以後點擊「Publish」按鈕,回到主界面,等1~10分鐘後,就能夠經過「你的用戶名+github.io」訪問咱們的主頁了,這時候咱們還能夠添加本身的頁面或者修改主頁
前篇博客分享了一下本身初入github的過程,傻瓜式一步步搭建好主頁後,終於該作正事兒了——寫簡歷。在腦殼中構思了不少版本,最後終於決定,先寫一個最傳統的版本,因而我在箱子中翻出我word版本的簡歷,對照寫一個html版本的。
原本覺得很簡單的事情,沒想到折騰很久,反反覆覆修改,終於弄出一個滿意的版本,有興趣的同窗能夠到個人github上看看
源碼
看起來平淡無奇,實際確實沒什麼高深的,都是最簡單的html與css。。。不過最開始我圖快全都用簡單的table佈局實現,後來在不斷修改中,也用了一些心思,學到了一些新知識。爲了用一些html5和CSS3的東西,只好捨棄了瀏覽器兼容性,目前我只在最新版本Chrome和Firefox上測試過,並且因爲家裏沒有Windows環境,Mac上滾動條表現形式和Windows上不太同樣,因此。。。。
上面提到最開始我除了主框架所有使用table佈局,後來改成html5版本,捨棄了大部分table(並非不用table了,table在數據展現方面仍是頗有優點的),頁面佈局其實是這樣的了
1 <!DOCTYPE html> 2 <html> 3 <head></head> 4 <body> 5 <header></header> 6 <article> 7 <section></section> 8 <section></section> 9 <section></section> 10 <section></section> 11 <aside></aside> 12 </article> 13 </body> 14 </html>
細心的朋友能夠注意到頁面引用了一個reset.css,這是根據雅虎的reset.css簡單改動的一個版本,本身之前盲目的寫了不少,不但凌亂不堪,並且大部分無用,會致使瀏覽器repaint,下降頁面渲染效率
其實最開始我也很看不慣html5的section、nav、aside等標籤,明明和div同樣,以爲使用這個純屬裝逼,後來接觸到一些關於html結構化和語義化的知識後才認識到本身的淺薄,使用了這些標籤後可以使計算機更容易理解網頁內容,這些標籤都是有語義的,好比nav標籤裏放的是頁面導航,footer放的是頁面的copyright等,搜索引擎等機器能夠更針對性的查找、理解其須要的內容,關於這部分知識有興趣能夠看看web語義化
每條前面的對勾之前我會直接逐個寫到html中,看了一些網站源碼才發現::berore/::after的妙處
li::before{ content:url(./images/icons/yes.png); padding-right:6px; vertical-align: middle; }
簡簡單單這樣就搞定了,content能夠制定內容,文字、圖片均可以
關於::與:也就是僞元素與僞類區別
簡單講僞元素是爲了標示某些元素如first-line等,而僞類是爲了區別一個元素的不一樣類別如:hover,:visited,越說越不明白,看看這個吧
看到這種兩欄兒佈局,你們第一反應是什麼,我反正上來想到的是table,而後是float,而後是display:inline-block,這幾種佈局的侷限性很明顯,再也不贅述,看看CSS3中的解決方案
<section style="display:box"> <section style="box-flex:2;">lefft</section> <section style="box-flex:3;">right</section> </section>
display:box屬性賦予了咱們劃分容器的能力,父容器有了display:box(真正使用須要添加瀏覽器前綴)屬性後,其子元素div或section就再也不向標準block元素那樣獨佔一行了,幾個div能夠共處一行,每一個div佔多少呢?咱們可使用width屬性爲期賦予絕對寬度,也可使用box-flex(使用須要瀏覽器前綴)屬性按比例劃分,上面例子中left section佔父容器寬度的2/(2+3)也就是2/5,右邊是3/5。關於相關屬性box-ordinal-group, box-orient, box-pack, box-align有興趣同窗能夠去網上查查資料
這個簡單的效果讓我折騰了一個小時,悲劇的是text-shadow我很早就使用過,用法能夠看看CSS3的文字陰影—text-shadow,我不明白的是怎麼弄就能讓文字凸出來或者凹下去,每次就是瞎試,今天小研究了一下貌似明白了什麼。
首先是文字顏色與背景顏色的統一,兩個顏色相似才能方便作出這種效果,而後是陰影的顏色用反色,白色文字就用黑色陰影,至於凹凸就要看位移的正負了。個人這個的css是這樣的
color:#e8e8e8; /*頁面背景也是這個顏色*/ text-shadow: 2px 2px 2px #333, 0px 0px 5px #666;/*移位兩次,正數就會凸出來,陰影顏色接近反色*/ font-size: 30px; font-weight:bold; text-align:right; margin-top:15px;
因爲使用截屏工具,那個圖標不明顯,其實頁面滾動條再也不頂部的時候,頁面上有個如今網站很常見的回到頂部圖標的
難住個人倒不是這個圖標的顯示控制,這個很簡單,把元素設position設爲fixed,而後根據頁面滾動條位置決定是否出現,Mac下滾動條是能夠爲負數的,這塊兒得處理一下。
1 <aside id="wrap" style="position:fixed; bottom:100px; right:100px;display:none; opacity:0.5;"> 2 <section style="background-image:url(images/icons/top.png); width:32px;height:32px;"></section> 3 <section class="reflect"></section> 4 <section class="shadow"></section> 5 </aside>
1 $(function(){ 2 $('#wrap').on('click', function(event) { 3 var obj=document.body.scrollTop>0? document.body:document.documentElement; 4 $(obj).animate({"scrollTop":0}, 1000); 5 $(this).animate({"opacity":0.5}, 1000); 6 }).on('mouseover', function(event) { 7 $(this).css('opacity',1); 8 }).on('mouseout',function(event) { 9 $(this).css('opacity',0.5); 10 }); 11 }); 12 $(document).scroll(function(event) { 13 var goTop=$('#wrap'); 14 var scrollTop=document.body.scrollTop || document.documentElement.scrollTop || 0; 15 if(scrollTop>0){ 16 if(goTop.css('display')=='none'){ 17 $('#wrap').fadeIn(500); 18 } 19 }else{ 20 if(goTop.css('display')!='none'){ 21 $('#wrap').fadeOut(500); 22 } 23 } 24 });
難住個人是倒影部分,關於這個倒影純屬那個啥了,原本處理很簡單,其實就是我源代碼中保留的部分,頁面放一個aside加上style完事兒
1 #goTop{ 2 position:fixed; 3 right:100px; 4 bottom:100px; 5 background-image:url(images/icons/top.png); 6 width:32px; 7 height:32px; 8 -webkit-box-reflect: below 0px -webkit-gradient(linear, center top, center bottom, from(transparent),color-stop(0.2, transparent), to(white)); 9 opacity: 0.5; 10 }
效果和上面截圖相似,悲劇的是隻有Chrome支持,最起碼的節操要求我至少把Firefox搞定,反覆嘗試終於找到了解決辦法,具體說來是這樣的
1 <aside id="wrap" style="position:fixed; bottom:100px; right:100px;display:none; opacity:0.5;"> 2 <section style="background-image:url(images/icons/top.png); width:32px;height:32px;"></section> 3 <section class="reflect"></section> 4 <section class="shadow"></section> 5 </aside>
id爲wrap的aside就是整個回到頂部部分,第一個section是上面那個沒有倒影的圖片,class爲reflect的section是倒影圖片
1 .reflect{ 2 background-image:url(images/icons/top.png); 3 width:32px; 4 height:32px; 5 -webkit-transform: scaleY(-1); 6 -moz-transform: scaleY(-1); 7 -ms-transform: scaleY(-1); 8 transform: scaleY(-1); 9 filter:alpha(opacity='80'); 10 opacity: 0.8; 11 }
其實就是插入一樣圖片,而後使 transform: scaleY(-1); 倒置圖片,加上必定的透明,但是這還沒完,這樣的效果是這樣的
對比一下預期效果
卻是有倒影了,可是倒影沒有消失最後,好像有個向下的按鈕似的。。。因此加入了class爲shadow的section,就是爲了讓倒影逐漸消失
1 .shadow{ 2 position: relative; 3 top:-32px; 4 left:0px; 5 height:32px; 6 width:32px; 7 background-image: -moz-linear-gradient(center bottom, rgb(227,227,227) 30%, rgba(255,255,255,0) 100%); 8 background-image: -webkit-gradient(linear, center bottom, center top, color-stop(0.3, rgb(227,227,227)), color-stop(0.7, rgba(255,255,255,0))); 9 filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=#e8e8e8, EndColorStr=#ffffff); 10 }
把section上移32px使其處於reflect正上方,而後對這層作一個透明漸變,使reflect處於相應位置的圖像部分也透明漸變,終於達到預期效果。關於-moz-linear-gradient/-webkit-gradient的使用能夠看看理解CSS3線性漸變
原本就是本着玩玩兒的目的寫這個在線簡歷的,沒想到收穫比我預期的大得多,熟悉了不少本身只知其一;不知其二的東西,並且製做過程當中產生了不少新想法,建議有想法的同窗們也試試,即便不想換工做,製做過程當中會有想不到的收穫。
接下來會陸續作一些相似的,不一樣樣式的簡歷,可能要反覆修改,應該進度會比較慢,主要是鍛鍊一下JavaScript, html5, CSS3技巧,能夠在個人github上看看個人進度,儘可能儘快push 更新。
PS.雖然如今不急着換工做,但朋友看了個人簡歷內容後都以爲寫的弱爆了,都是空談,看不出具體會什麼,但願熱心的朋友也能給出這方面的修改意見