前篇博客分享了一下自己初入github的過程，傻瓜式一步步搭建好主頁后，終於該做正事兒了——寫簡歷。在腦袋中構思了很多版本，最后終於決定，先寫一個最傳統的版本，於是我在箱子中翻出我word版本的簡歷，對照寫一個html版本的。
word版本看起來是這個樣子的
html版看起來是這樣子的
本來以為很簡單的事情，沒想到折騰好久，反反復復修改，終於弄出一個滿意的版本,有興趣的同學可以到我的github上看看
技術點兒分析
源碼
1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <title>Trditional Resume</title> 5 <meta charset="UTF-8"> 6 <link type="text/css" rel="StyleSheet" href="css/reset.css"/> 7 <link type="text/css" rel="StyleSheet" href="css/main.css"/> 8 <style type="text/css"> 9 body{ 10 background-image:url(images/bg.png); 11 } 12 .item-title{ 13 width:100px; 14 padding:4px; 15 line-height: 1.8; 16 } 17 .item-content{ 18 padding:4px; 19 line-height: 1.8; 20 } 21 li{ 22 padding:7px 0px; 23 } 24 li::before{ 25 content:url(./images/icons/yes.png); 26 padding-right:6px; 27 vertical-align: middle; 28 } 29 .item-wrap{ 30 display:-moz-box; 31 display:-webkit-box; 32 display:box; 33 padding:6px 0px; 34 border-bottom:solid 1px #aaa; 35 margin-bottom:6px; 36 width: 100%; 37 } 38 .item-box-left{ 39 width: 100px; 40 } 41 .item-box-right{ 42 width: 700px; 43 } 44 .item-title-hl{ 45 font-size:18px; 46 padding:4px; 47 background-color: #ddd; 48 border-bottom:solid 2px #ccc; 49 } 50 .project-title{ 51 font-size:18px; 52 line-height: 1.8; 53 padding:4px; 54 } 55 .project-sub-title{ 56 padding:4px; 57 line-height: 1.8; 58 width:70px; 59 } 60 #goTop{ 61 position:fixed; 62 right:100px; 63 bottom:100px; 64 background-image:url(images/icons/top.png); 65 width:32px; 66 height:32px; 67 -webkit-box-reflect: below 0px -webkit-gradient(linear, center top, center bottom, from(transparent),color-stop(0.2, transparent), to(white)); 68 opacity: 0.5; 69 } 70 .reflect{ 71 background-image:url(images/icons/top.png); 72 width:32px; 73 height:32px; 74 -webkit-transform: scaleY(-1); 75 -moz-transform: scaleY(-1); 76 -ms-transform: scaleY(-1); 77 transform: scaleY(-1); 78 filter:alpha(opacity='80'); 79 opacity: 0.8; 80 } 81 .shadow{ 82 position: relative; 83 top:-32px; 84 left:0px; 85 height:32px; 86 width:32px; 87 background-image: -moz-linear-gradient(center bottom, rgb(227,227,227) 30%, rgba(255,255,255,0) 100%); 88 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))); 89 filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=#e8e8e8, EndColorStr=#ffffff); 90 } 91 </style> 92 <script type="text/javascript" src="js/jquery.js"></script> 93 </head> 94 <body style="margin:0px auto;width:800px;"> 95 <header> 96 <h1 style="color:#e8e8e8; font-size: 30px; font-weight:bold;text-align:right;text-shadow: 2px 2px 2px #333, 0px 0px 5px #666; margin-top:15px;">dolphinX</h1> 97 <section style="padding:6px 0px;"> 98 <hr/> 99 </section> 100 </header> 101 <article style="padding:10px 0px;"> 102 <section> 103 <table style="width:100%"> 104 <tr> 105 <td class="item-title">求職意向：</td> 106 <td class="item-content">Web工程師</td> 107 <td class="item-title">英語水平：</td> 108 <td class="item-content">CET-6</td> 109 </tr> 110 <tr> 111 <td class="item-title">電話號碼：</td> 112 <td class="item-content">18210047844</td> 113 <td class="item-title">郵箱：</td> 114 <td class="item-content"> 115 <a title="給我發郵件" href="mailto:byron_sun@outlook.com">byron_sun@outlook.com</a> 116 </td> 117 </tr> 118 <tr> 119 <td class="item-title">性別：</td> 120 <td class="item-content">男</td> 121 <td class="item-title">出生日期：</td> 122 <td class="item-content">1989.05</td> 123 </tr> 124 <tr> 125 <td class="item-title">博客:</td> 126 <td class="item-content" colspan="3"> 127 <a title="看看我的博客" href="http://www.cnblogs.com/dolphinX/" target="_blank">http://www.cnblogs.com/dolphinX/</a> 128 </td> 129 </tr> 130 </table> 131 </section> 132 <section style="margin:4px 0px; height:2px; background-color:#888;"></section> 133 <section class="item-wrap"> 134 <section class="item-box-left"> 135 <span class="item-title-hl">專業技能</span> 136 </section> 137 <section class="item-box-right"> 138 <ul> 139 <li>精通 HTML、JavaScript、CSS</li> 140 <li>熟悉 HTML5、CSS3、ECMAScript5</li> 141 <li>熟練使用jQuery及Ajax開發</li> 142 <li>熟悉HTTP協議基本知識</li> 143 <li>熟練使用ASP.NET進行Web Application開發</li> 144 <li>了解基本Web安全及優化知識</li> 145 <li>熟練使用SQL Server，熟悉常用SQL DDL、DML語句，熟悉索引及存儲過程</li> 146 </ul> 147 </section> 148 </section> 149 <section class="item-wrap"> 150 <section class="item-box-left"> 151 <span class="item-title-hl">教育經歷</span> 152 </section> 153 <section class="item-box-right" style="margin-bottom:10px;"> 154 <table> 155 <tr> 156 <td style="width:150px;">2007.09~2011.06</td> 157 <td style="width:250px;">**工業大學(211)</td> 158 <td>軟件工程</td> 159 </tr> 160 </table> 161 </section> 162 </section> 163 <section class="item-wrap"> 164 <section class="item-box-left"> 165 <span class="item-title-hl">工作經歷</span> 166 </section> 167 <section class="item-box-right"> 168 <table> 169 <tr> 170 <td style="padding:8px 0px; width:150px;">2011.05~今</td> 171 <td style="padding:8px 0px; width:250px;">北京****科技有限公司</td> 172 <td>Software Engineer</td> 173 </tr> 174 <tr> 175 <td>2010.07~2011.05</td> 176 <td>天津**軟件有限公司</td> 177 <td>開發實習生</td> 178 </tr> 179 </table> 180 </section> 181 </section> 182 <section class="item-wrap"> 183 <section class="item-box-left"> 184 <span class="item-title-hl">項目經驗</span> 185 </section> 186 <section class="item-box-right"> 187 <section> 188 <table style="margin-bottom:10px; border-bottom:dashed 1px #ccc;"> 189 <tr> 190 <td colspan="2" class="project-title">2013.10 ~ 今 New UI upgrade</td> 191 </tr> 192 <tr> 193 <td class="project-sub-title" valign="top">項目描述:</td> 194 <td class="item-content">對公司產品UI進行升級，包括頁面風格扁平化、單頁面化、按鈕最少化，達到頁面簡潔、大方、易用效果。</td> 195 </tr> 196 <tr> 197 <td class="project-sub-title" valign="top">使用技術:</td> 198 <td class="item-content">ASP.NET、JavaScript、CSS、HTML、jQuery</td> 199 </tr> 200 <tr> 201 <td class="project-sub-title" valign="top">項目收獲:</td> 202 <td class="item-content"> 203 項目期間學習了《Don’t make me think》，結合設計過程中遇到問題對用戶體驗理解深入。頁面盡量是不言而喻的，不讓用戶思考該怎么做，同時對程序可拓展性、可配置性有了切身實踐。 204 </td> 205 </tr> 206 </table> 207 <table style="margin-bottom:10px; border-bottom:dashed 1px #ccc;"> 208 <tr> 209 <td colspan="2" class="project-title">2013.05 ~ 2013.09 SchoolStream Flat Theme</td> 210 </tr> 211 <tr> 212 <td class="project-sub-title" valign="top">項目描述:</td> 213 <td class="item-content"> 214 配合New UI發布對站點Theme更新，做出一套扁平化Theme，通過對字體大小、框架配色、通用控件外觀的調整，使系統的UI美觀大方、簡潔、易用。 215 </td> 216 </tr> 217 <tr> 218 <td class="project-sub-title" valign="top">使用技術:</td> 219 <td class="item-content">ASP.NET、JavaScript、CSS、HTML</td> 220 </tr> 221 <tr> 222 <td class="project-sub-title" valign="top">項目收獲:</td> 223 <td class="item-content"> 224 瀏覽器兼容性：在功能上要保證所有的瀏覽器表現一致，在動畫效果上可以嘗試一些新的特效，保證在新式瀏覽器上可以展現。 225 <br/> 226 回歸測試：要准確預估改動對整個系統影響，及早確定測試范圍。 227 </td> 228 </tr> 229 </table> 230 <table style="margin-bottom:10px; border-bottom:dashed 1px #ccc;"> 231 <tr> 232 <td colspan="2" class="project-title">2012.12 ~ 今 SchoolStream My Desktop、Login Page</td> 233 </tr> 234 <tr> 235 <td class="project-sub-title" valign="top">項目描述:</td> 236 <td class="item-content"> 237 My Desktop和Login Page是SchoolStream產品首頁及各個應用入口，通過響應式的展現方式方便用戶理解與使用。 238 </td> 239 </tr> 240 <tr> 241 <td class="project-sub-title" valign="top">使用技術:</td> 242 <td class="item-content">JavaScript、CSS、Ajax、jQuery、ASP.NET、Web Service</td> 243 </tr> 244 <tr> 245 <td class="project-sub-title" valign="top">項目收獲:</td> 246 <td class="item-content"> 247 通過對首頁HTML結構的重新調整及UI的重新設計，使產品首頁在易用性得到極大提高，對JavaScript和CSS代碼重寫，提高的程序運行效率及瀏覽器兼容性。對JavaScript最佳實踐及面向對象可復用設計有了深入了解，熟悉了CSS定位及布局知識，熟練使用jQuery，對瀏覽器兼容性問題有了深刻認識。 248 </td> 249 </tr> 250 </table> 251 <table style="margin-bottom:10px; border-bottom:dashed 1px #ccc;"> 252 <tr> 253 <td colspan="2" class="project-title">2012.09 ~ 今 Common Web Control</td> 254 </tr> 255 <tr> 256 <td class="project-sub-title" valign="top">項目描述:</td> 257 <td class="item-content">SchoolStream產品中通用Web控件開發，包括Dialog、Tree、Tab、List View、Single Button，頁面可以直接調用組件進行常見功能開發。</td> 258 </tr> 259 <tr> 260 <td class="project-sub-title" valign="top">使用技術:</td> 261 <td class="item-content">ASP.NET、WebControl、JavaScript、CSS、設計模式</td> 262 </tr> 263 <tr> 264 <td class="project-sub-title" valign="top">項目收獲:</td> 265 <td class="item-content"> 266 通過對現有自定義控件修改及開發新控件，對軟件設計兼容性、拓展性有了深刻認識，理解、熟練使用策略模式、工廠模式、觀察者模式、單例模式熟悉JavaScript面向對象開發及CSS定位布局，強化了瀏覽器兼容性意識。 267 </td> 268 </tr> 269 </table> 270 <table style="margin-bottom:10px; border-bottom:dashed 1px #ccc;"> 271 <tr> 272 <td colspan="2" class="project-title">2012.05 ~ 2012.09 Authority System Upgrade</td> 273 </tr> 274 <tr> 275 <td class="project-sub-title" valign="top">項目描述:</td> 276 <td class="item-content">通過對現有用戶表及權限控制表拆分、重組，引入安全組及object role等概念，使權限系統支持多種賬戶類型存儲與處理。</td> 277 </tr> 278 <tr> 279 <td class="project-sub-title" valign="top">使用技術:</td> 280 <td class="item-content">ASP.NET、SQLServer、MVP架構、Unity IoC、觀察者、策略、工廠模式</td> 281 </tr> 282 <tr> 283 <td class="project-sub-title" valign="top">項目收獲:</td> 284 <td class="item-content"> 285 了解基於SQL Server的數據庫設計基本知識，設計符合3NF的數據庫結構，通過正確使用索引提高搜索效率，熟練應用OOP中的開放封閉原則、單一職責原則、里氏代換原則及設計模式進行程序設計，了解基於Unity的IoC及MVP模式。 286 </td> 287 </tr> 288 </table> 289 <table style="margin-bottom:10px;"> 290 <tr> 291 <td colspan="2" class="project-title">2011.07 ~ 2012.05 Teacher Web Page</td> 292 </tr> 293 <tr> 294 <td class="project-sub-title" valign="top">項目描述:</td> 295 <td class="item-content">一個與SIS集成的教師個人站點，為教師、學生、家長對學生在校學習及評價提供統一平台。</td> 296 </tr> 297 <tr> 298 <td class="project-sub-title" valign="top">使用技術:</td> 299 <td class="item-content">JavaScript、CSS、Ajax、jQuery、ASP.NET、Web Service</td> 300 </tr> 301 <tr> 302 <td class="project-sub-title" valign="top">項目收獲:</td> 303 <td class="item-content"> 304 通過了解、挖掘用戶需求、設計系統、實現系統的流程，培養了做產品的責任心及需求獲取、分析能力，程序設計能力。在開發過程中了解HTTP協議，熟悉HTML、CSS、JavaScript及web service、Ajax、jQuery，熟練使用Visual Studio 進行基於ASP.NET的Web Application開發。 305 </td> 306 </tr> 307 </table> 308 </section> 309 </section> 310 </section> 311 <section class="item-wrap"> 312 <section class="item-box-left"> 313 <span class="item-title-hl">自我評價</span> 314 </section> 315 <section class="item-box-right" style="margin-bottom:10px;"> 316 <ul> 317 <li>性格樂觀開朗，感染力強，能夠帶動團隊氛圍</li> 318 <li>對技術感興趣，廣泛關注行業知識、動向，喜歡鑽研技術原理</li> 319 <li>表達能力強，熱衷於技術分享，在公司負責初級技術培訓工作</li> 320 </ul> 321 </section> 322 </section> 323 <section class="item-wrap" style="border:0;"> 324 <section class="item-box-left"> 325 <span class="item-title-hl">興趣愛好</span> 326 </section> 327 <section class="item-box-right"> 328 看歷史相關書籍、寫技術博客，分享知識、羽毛球 329 </section> 330 </section> 331 <aside id="wrap" style="position:fixed; bottom:100px; right:100px;display:none; opacity:0.5;"> 332 <section style="background-image:url(images/icons/top.png); width:32px;height:32px;"></section> 333 <section class="reflect"></section> 334 <section class="shadow"></section> 335 </aside> 336 </article> 337 338 <script type="text/javascript"> 339 $(function(){ 340 $('#wrap').on('click', function(event) { 341 var obj=document.body.scrollTop>0? document.body:document.documentElement; 342 $(obj).animate({"scrollTop":0}, 1000); 343 $(this).animate({"opacity":0.5}, 1000); 344 }).on('mouseover', function(event) { 345 $(this).css('opacity',1); 346 }).on('mouseout',function(event) { 347 $(this).css('opacity',0.5); 348 }); 349 }); 350 $(document).scroll(function(event) { 351 var goTop=$('#wrap'); 352 var scrollTop=document.body.scrollTop || document.documentElement.scrollTop || 0; 353 if(scrollTop>0){ 354 if(goTop.css('display')=='none'){ 355 $('#wrap').fadeIn(500); 356 } 357 }else{ 358 if(goTop.css('display')!='none'){ 359 $('#wrap').fadeOut(500); 360 } 361 } 362 }); 363 </script> 364 </body> 365 </html>
看起來平淡無奇，實際確實沒什么高深的，都是最簡單的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
細心的朋友可以注意到頁面引用了一個reset.css，這是根據雅虎的reset.css簡單改動的一個版本，自己以前盲目的寫了很多，不但凌亂不堪，而且大部分無用，會導致瀏覽器repaint，降低頁面渲染效率
1 body{ 2 font-family:"Segoe UI","Times New Roman",Georgia,Serif;; 3 font-size: 14px; 4 } 5 6 body, div, dl, dt, dd, ul, ol, li, 7 h1, h2, h3, h4, h5, h6, pre, code, 8 form, fieldset, legend, input, button, 9 textarea, p, blockquote, th, td { 10 margin: 0; 11 padding: 0; 12 } 13 fieldset, img { 14 border: 0; 15 } 16 /* remember to define focus styles! */ 17 :focus { 18 outline: 0; 19 } 20 address, caption, cite, code, dfn, 21 em, strong, th, var, optgroup { 22 font-style: normal; 23 font-weight: normal; 24 } 25 26 h1, h2, h3, h4, h5, h6 { 27 font-size: 100%; 28 font-weight: normal; 29 } 30 abbr, acronym { 31 border: 0; 32 font-variant: normal; 33 } 34 35 input, button, textarea, 36 select, optgroup, option { 37 font-family: inherit; 38 font-size: inherit; 39 font-style: inherit; 40 font-weight: inherit; 41 } 42 code, kbd, samp, tt { 43 font-size: 100%; 44 } 45 /*@purpose To enable resizing for IE */ 46 /*@branch For IE6-Win, IE7-Win */ 47 input, button, textarea, select { 48 *font-size: 100%; 49 } 50 ol, ul { 51 list-style: none; 52 } 53 table { 54 border-collapse: collapse; 55 border-spacing: 0; 56 } 57 caption, th { 58 text-align: left; 59 } 60 sup, sub { 61 font-size: 100%; 62 vertical-align: baseline; 63 } 64 :link, :visited , ins { 65 text-decoration: none; 66 } 67 blockquote, q { 68 quotes: none; 69 } 70 blockquote:before, blockquote:after, 71 q:before, q:after { 72 content: ''; 73 content: none; 74 }
關於使用section、aside等標簽不是裝逼的辯解
其實最開始我也很看不慣html5的section、nav、aside等標簽，明明和div一樣，覺得使用這個純屬裝逼，后來接觸到一些關於html結構化和語義化的知識后才認識到自己的淺薄，使用了這些標簽后能夠使計算機更容易理解網頁內容，這些標簽都是有語義的，比如nav標簽里放的是頁面導航，footer放的是頁面的copyright等，搜索引擎等機器可以更針對性的查找、理解其需要的內容，關於這部分知識有興趣可以看看web語義化
一直被忽略的::before/::after偽元素
每條前面的對勾以前我會直接逐個寫到html中，看了一些網站源碼才發現::berore/::after的妙處
li::before{ content:url(./images/icons/yes.png); padding-right:6px; vertical-align: middle; }
簡簡單單這樣就搞定了，content可以制定內容，文字、圖片都可以
關於::與:也就是偽元素與偽類區別
簡單講偽元素是為了標示某些元素如first-line等，而偽類是為了區別一個元素的不同類別如:hover,:visited,越說越不明白，看看這個吧
使用disply:box, box-flex 屬性布局
看到這種兩欄兒布局，大家第一反應是什么，我反正上來想到的是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.雖然現在不急着換工作，但朋友看了我的簡歷內容后都覺得寫的弱爆了，都是空談，看不出具體會什么，希望熱心的朋友也能給出這方面的修改意見