在github上寫我的簡歷——最簡單卻又不容易的內容羅列

時間 2019-11-12

原文原文鏈接

前篇博客分享了一下本身初入github的過程，傻瓜式一步步搭建好主頁後，終於該作正事兒了——寫簡歷。在腦殼中構思了不少版本，最後終於決定，先寫一個最傳統的版本，因而我在箱子中翻出我word版本的簡歷，對照寫一個html版本的。javascript

word版本看起來是這個樣子的

html版看起來是這樣子的

原本覺得很簡單的事情，沒想到折騰很久，反反覆覆修改，終於弄出一個滿意的版本,有興趣的同窗能夠到個人github上看看css

技術點兒分析

源碼html

  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>熟悉 HTML五、CSS三、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>

View Code

看起來平淡無奇，實際確實沒什麼高深的，都是最簡單的html與css。。。不過最開始我圖快全都用簡單的table佈局實現，後來在不斷修改中，也用了一些心思，學到了一些新知識。爲了用一些html5和CSS3的東西，只好捨棄了瀏覽器兼容性，目前我只在最新版本Chrome和Firefox上測試過，並且因爲家裏沒有Windows環境，Mac上滾動條表現形式和Windows上不太同樣，因此。。。。html5

頁面結構

上面提到最開始我除了主框架所有使用table佈局，後來改成html5版本，捨棄了大部分table(並非不用table了，table在數據展現方面仍是頗有優點的)，頁面佈局其實是這樣的了java

 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，下降頁面渲染效率jquery

 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 }

View Code

關於使用section、aside等標籤不是裝逼的辯解

其實最開始我也很看不慣html5的section、nav、aside等標籤，明明和div同樣，以爲使用這個純屬裝逼，後來接觸到一些關於html結構化和語義化的知識後才認識到本身的淺薄，使用了這些標籤後可以使計算機更容易理解網頁內容，這些標籤都是有語義的，好比nav標籤裏放的是頁面導航，footer放的是頁面的copyright等，搜索引擎等機器能夠更針對性的查找、理解其須要的內容，關於這部分知識有興趣能夠看看web語義化
css3

一直被忽略的::before/::after僞元素

每條前面的對勾之前我會直接逐個寫到html中，看了一些網站源碼才發現::berore/::after的妙處git

li::before{
      content:url(./images/icons/yes.png);    
      padding-right:6px;
      vertical-align: middle;
    }

簡簡單單這樣就搞定了，content能夠制定內容，文字、圖片均可以github

關於::與:也就是僞元素與僞類區別web

簡單講僞元素是爲了標示某些元素如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     }