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

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

 

html版看起来是这样子的

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

 

技术点儿分析

源码

1   2   3   4     5   
        6   
        7   
        8    92    93  94  95   
      
        96     
       
dolphinX
 97     
       
         98       
        
 99     
       
100   
      
101   
      
       102     
       
        103       
        
         104         
           105           
106           
107           
108           
109         
110         
           111           
112           
113           
114           
117         
118         
           119           
120           
121           
122           
123         
124         
           125           
126           
129         
130       
         
          
           
求职意向：
           
Web工程师
           
英语水平：
           
CET-6
          
          
           
电话号码：
           
18210047844
           
邮箱：
           
115 byron_sun@outlook.com116 
          
          
           
性别：
           
男
           
出生日期：
           
1989.05
          
          
           
博客:
           
127 http://www.cnblogs.com/dolphinX/128 
          
         
        
131     
       
132     
       
133     
       
        134       
        
         135         
         专业技能136       
        
137       
        
         138         
         
          139           
          
精通 HTML、JavaScript、CSS
140           
          
熟悉 HTML5、CSS3、ECMAScript5
141           
          
熟练使用jQuery及Ajax开发
142           
          
熟悉HTTP协议基本知识
143           
          
熟练使用ASP.NET进行Web Application开发
144           
          
了解基本Web安全及优化知识
145           
          
熟练使用SQL Server，熟悉常用SQL DDL、DML语句，熟悉索引及存储过程
146         
         
147       
        
148     
       
149     
       
        150       
        
         151         
         教育经历152       
        
153       
        
         154         
         
          155           
            156 
157 
158 
159 
160         
          
           
            
2007.09~2011.06
            
**工业大学(211)
            
软件工程
           
          
         
161       
        
162     
       
163     
       
        164       
        
         165         
         工作经历166       
        
167       
        
         168         
         
          169           
            170 
171 
172 
173 
174           
            175 
176 
177 
178 
179         
          
           
            
2011.05~今
            
北京****科技有限公司
            
Software Engineer
           
           
            
2010.07~2011.05
            
天津**软件有限公司
            
开发实习生
           
          
         
180       
        
181     
       
182     
       
        183       
        
         184         
         项目经验185       
        
186       
        
         187         
         
          188            
          
           189           
             190 
191 
192 
             193 
194 
195 
196 
             197 
198 
199 
200 
             201 
202 
205 
206 
           
            
             
2013.10 ~ 今 New UI upgrade
            
            
             
项目描述:
             
对公司产品UI进行升级，包括页面风格扁平化、单页面化、按钮最少化，达到页面简洁、大方、易用效果。
            
            
             
使用技术:
             
ASP.NET、JavaScript、CSS、HTML、jQuery
            
            
             
项目收获:
             
203 项目期间学习了《Don’t make me think》，结合设计过程中遇到问题对用户体验理解深入。页面尽量是不言而喻的，不让用户思考该怎么做，同时对程序可拓展性、可配置性有了切身实践。204 
            
           
          
207         
          
           208           
             209 
210 
211 
             212 
213 
216 
217 
             218 
219 
220 
221 
             222 
223 
228 
229 
           
            
             
2013.05 ~ 2013.09 SchoolStream Flat Theme
            
            
             
项目描述:
             
214 配合New UI发布对站点Theme更新，做出一套扁平化Theme，通过对字体大小、框架配色、通用控件外观的调整，使系统的UI美观大方、简洁、易用。215 
            
            
             
使用技术:
             
ASP.NET、JavaScript、CSS、HTML
            
            
             
项目收获:
             
224 浏览器兼容性：在功能上要保证所有的浏览器表现一致，在动画效果上可以尝试一些新的特效，保证在新式浏览器上可以展现。225 
226 回归测试：要准确预估改动对整个系统影响，及早确定测试范围。227 
            
           
          
230         
          
           231           
             232 
233 
234 
             235 
236 
239 
240 
             241 
242 
243 
244 
             245 
246 
249 
250 
           
            
             
2012.12 ~ 今 SchoolStream My Desktop、Login Page
            
            
             
项目描述:
             
237 My Desktop和Login Page是SchoolStream产品首页及各个应用入口，通过响应式的展现方式方便用户理解与使用。238 
            
            
             
使用技术:
             
JavaScript、CSS、Ajax、jQuery、ASP.NET、Web Service
            
            
             
项目收获:
             
247 通过对首页HTML结构的重新调整及UI的重新设计，使产品首页在易用性得到极大提高，对JavaScript和CSS代码重写，提高的程序运行效率及浏览器兼容性。对JavaScript最佳实践及面向对象可复用设计有了深入了解，熟悉了CSS定位及布局知识，熟练使用jQuery，对浏览器兼容性问题有了深刻认识。248 
            
           
          
251         
          
           252           
             253 
254 
255 
             256 
257 
258 
259 
             260 
261 
262 
263 
             264 
265 
268 
269 
           
            
             
2012.09 ~ 今 Common Web Control
            
            
             
项目描述:
             
SchoolStream产品中通用Web控件开发，包括Dialog、Tree、Tab、List View、Single Button，页面可以直接调用组件进行常见功能开发。
            
            
             
使用技术:
             
ASP.NET、WebControl、JavaScript、CSS、设计模式
            
            
             
项目收获:
             
266 通过对现有自定义控件修改及开发新控件，对软件设计兼容性、拓展性有了深刻认识，理解、熟练使用策略模式、工厂模式、观察者模式、单例模式熟悉JavaScript面向对象开发及CSS定位布局，强化了浏览器兼容性意识。267 
            
           
          
270         
          
           271           
             272 
273 
274 
             275 
276 
277 
278 
             279 
280 
281 
282 
             283 
284 
287 
288 
           
            
             
2012.05 ~ 2012.09 Authority System Upgrade
            
            
             
项目描述:
             
通过对现有用户表及权限控制表拆分、重组，引入安全组及object role等概念，使权限系统支持多种账户类型存储与处理。
            
            
             
使用技术:
             
ASP.NET、SQLServer、MVP架构、Unity IoC、观察者、策略、工厂模式
            
            
             
项目收获:
             
285 了解基于SQL Server的数据库设计基本知识，设计符合3NF的数据库结构，通过正确使用索引提高搜索效率，熟练应用OOP中的开放封闭原则、单一职责原则、里氏代换原则及设计模式进行程序设计，了解基于Unity的IoC及MVP模式。286 
            
           
          
289         
          
           290           
             291 
292 
293 
             294 
295 
296 
297 
             298 
299 
300 
301 
             302 
303 
306 
307 
           
            
             
2011.07 ~ 2012.05 Teacher Web Page
            
            
             
项目描述:
             
一个与SIS集成的教师个人站点，为教师、学生、家长对学生在校学习及评价提供统一平台。
            
            
             
使用技术:
             
JavaScript、CSS、Ajax、jQuery、ASP.NET、Web Service
            
            
             
项目收获:
             
304 通过了解、挖掘用户需求、设计系统、实现系统的流程，培养了做产品的责任心及需求获取、分析能力，程序设计能力。在开发过程中了解HTTP协议，熟悉HTML、CSS、JavaScript及web service、Ajax、jQuery，熟练使用Visual Studio 进行基于ASP.NET的Web Application开发。305 
            
           
          
308         
         
309       
        
310     
       
311     
       
        312       
        
         313         
         自我评价314       
        
315       
        
         316         
         
          317           
          
性格乐观开朗，感染力强，能够带动团队氛围
318           
          
对技术感兴趣，广泛关注行业知识、动向，喜欢钻研技术原理
319           
          
表达能力强，热衷于技术分享，在公司负责初级技术培训工作
320         
         
321       
        
322     
       
323      
       
        324       
        
         325         
         兴趣爱好326       
        
327       
        
         328         看历史相关书籍、写技术博客，分享知识、羽毛球329       
        
330     
       
331     
       
        332       
        
333       
        
334       
        
335     
       
336   
      
337 338   364 365 

看起来平淡无奇，实际确实没什么高深的，都是最简单的html与css。。。不过最开始我图快全都用简单的table布局实现，后来在不断修改中，也用了一些心思，学到了一些新知识。为了用一些html5和CSS3的东西，只好舍弃了浏览器兼容性，目前我只在最新版本Chrome和Firefox上测试过，而且由于家里没有Windows环境，Mac上滚动条表现形式和Windows上不太一样，所以。。。。

页面结构

上面提到最开始我除了主框架全部使用table布局，后来改为html5版本，舍弃了大部分table(并不是不用table了，table在数据展示方面还是很有优势的)，页面布局实际上是这样的了

1  2  3  4  5     
     
 6     
     
       7         
      
 8         
      
 9         
      
10         
      
11         
      
12     
     
13 14 

reset

细心的朋友可以注意到页面引用了一个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等，搜索引擎等机器可以更针对性的查找、理解其需要的内容，关于这部分知识有兴趣可以看看

一直被忽略的::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中的解决方案

     
    
      
       lefft
      
    
      
       right
      
     

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我很早就使用过，用法可以看看，我不明白的是怎么弄就能让文字凸出来或者凹下去，每次就是瞎试，今天小研究了一下貌似明白了什么。

首先是文字颜色与背景颜色的统一，两个颜色类似才能方便做出这种效果，然后是阴影的颜色用反色，白色文字就用黑色阴影，至于凹凸就要看位移的正负了。我的这个的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 
     
      2       
      
3       
      
4       
      
5     
     

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  
     
      2       
      
3       
      
4       
      
5     
     

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的使用可以看看理解

最后

本来就是本着玩玩儿的目的写这个在线简历的，没想到收获比我预期的大得多，熟悉了很多自己一知半解的东西，而且制作过程中产生了很多新想法，建议有想法的同学们也试试，即使不想换工作，制作过程中会有想不到的收获。

接下来会陆续做一些类似的，不同样式的简历，可能要反复修改，应该进度会比较慢，主要是锻炼一下JavaScript, html5, CSS3技巧，可以在上看看我的进度，尽量尽快push 更新。

PS.虽然现在不急着换工作，但朋友看了我的简历内容后都觉得写的弱爆了，都是空谈，看不出具体会什么，希望热心的朋友也能给出这方面的修改意见