在github上写个人简历——最简单却又不容易的内容罗列

时间:2024-03-02 15:43:28

前篇博客分享了一下自己初入github的过程,傻瓜式一步步搭建好主页后,终于该做正事儿了——写简历。在脑袋中构思了很多版本,最后终于决定,先写一个最传统的版本,于是我在箱子中翻出我word版本的简历,对照写一个html版本的。

word版本看起来是这个样子的

image

 

html版看起来是这样子的

本来以为很简单的事情,没想到折腾好久,反反复复修改,终于弄出一个满意的版本,有兴趣的同学可以到我的github上看看

 Trditional Resume

技术点儿分析

源码

  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>
View Code

看起来平淡无奇,实际确实没什么高深的,都是最简单的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 }
View Code

关于使用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有兴趣同学可以去网上查查资料

标题怎么凸出来

image

这个简单的效果让我折腾了一个小时,悲剧的是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.虽然现在不急着换工作,但朋友看了我的简历内容后都觉得写的弱爆了,都是空谈,看不出具体会什么,希望热心的朋友也能给出这方面的修改意见