比特之理 » CSS“高仿”Latex简历|とある東雲研究所の分所

首页 > Latex > CSS“高仿”Latex简历

CSS“高仿”Latex简历

2014年1月27日 Vespa 发表评论阅读评论

孔子曾经曰过，做简历有三种人，普通青年用Word做简历，文艺青年用Latex做简历，还有一种青年用PHP+CSS做简历。。。

庄子也曰过：孔子曰的对！！

我不知道哪根筋不对，居然想用CSS+PHP火拼Latex的简历效果，捣鼓了一下午，感觉再也不会爱了。。。以后还是乖乖做个文艺青年吧。。

话说会不会真的有嫌弃Word但是又不会Latex的CSS达人用这种方法做简历，然后去打印网页的。。。虽然我觉得正常人省事的做法是拿一份别人做好的漂亮的Tex或者Word模板，然后改两下。。

本文模板修改自郦橙锦妖的作品；另外，据考证。。她的简历是WORD做的。。

演示模板请戳：DEMO

PHP

<div class="paper">
<div class="baner2" style="height:135px;">
  <div class="baner" style="height:92px;">
    <div class="maininfo">
    <img class="avatar" src="./touxiang2.png" >
    <div id="name">VESPA KYLEN</div>
    <div class="email contact_info">kylensherlock@gmail.com</div>
    <div class="website contact_info">
    <a href="http://www.kylen314.com">www.kylen314.com</a>
    </div>
    <div class="school contact_info">ZheJiang University ISEE</div>
  </div><!--end maininfo-->
</div><!--end baner-->
</div><!--end baner2-->

<div id="main" style="background-color:#FFF;">
  <div class="education edu_exp_info">EDUCATION</div>

  <div class="edu_item">

    <div class="whenwhere">
      <span>09.2008-06.2012</span>
      <span>GuangDong</span>
    </div>

    <div class="graycir"></div>

    <div class="edu_detail">
        <span class="detail1">South China University of Technology</span>
        <span class="detail2">EI GPA:xx/4</span>
        <ol class="detail3">
          <li>The main responsible person the national innovation project</li>
          <li>Mathematical Contest in Modeling XXX prize</li>
        </ol>
    </div>
  </div><!--end edu_item-->

  <div class="edu_item">

  <div class="whenwhere">
    <span>09.2012-03.2015</span>
    <span>ZheJiang</span>
  </div>
 
  <div class="graycir"></div>

  <div class="edu_detail">
    <span class="detail1">ZheJiang University</span>
    <span class="detail2">ISEE GPA:xx/4</span>
    <ol class="detail3">
      <li>Undergraduate Mathematical Contest in Modeling XXX prize</li>
      <li>Authorized a software copyright on household ele-power analysis</li>
    </ol>
  </div>
  </div><!--end edu_item-->


<div class="experience edu_exp_info">EXPERIENCE</div>
<div class="edu_item">

    <div class="whenwhere">
      <span>07.2011-09.2011</span>
      <span>GuangDong</span>
    </div>

    <div class="graycir"></div>

    <div class="edu_detail">
        <span class="detail1">Tencent</span>
        <span class="detail2">Weibo Apartment</span>
        <ol class="detail3">
          <li>Developed a tool for forwarding package</li>
          <li>Participate an online project for lottering in QQ weibo</li>
        </ol>
    </div>
  </div><!--end edu_item-->

 <div class="edu_item">

    <div class="whenwhere">
      <span>XX.XXXX-XX.XXXX</span>
      <span>XXXXXXXXX</span>
    </div>

    <div class="graycir"></div>

    <div class="edu_detail">
        <span class="detail1">XXXXXXXX</span>
        <span class="detail2">XXXXXXXX</span>
        <ol class="detail3">
          <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
          <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
          <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        </ol>
    </div>
  </div><!--end edu_item-->
  
   <div class="edu_item">

    <div class="whenwhere">
      <span>XX.XXXX-XX.XXXX</span>
      <span>XXXXXXXXX</span>
    </div>

    <div class="graycir"></div>

    <div class="edu_detail">
        <span class="detail1">XXXXXXXX</span>
        <span class="detail2">XXXXXXXX</span>
        <ol class="detail3">
          <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
          <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
          <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        </ol>
    </div>
  </div><!--end edu_item-->
</div><!--end main-->

<div class="footer">
<div class="project_area">
<div class="project pro_skill_info">PROJECT</div>
<div class="footer_list">

 <div class="graycir2"></div>
 <span class="footer_item">
 <span class="project1">Algorithm Research</span>
 <span class="project2">Vision based gesture tracking system</span>
 </span>
 
<div class="graycir2"></div>
<span class="footer_item">
<span class="project1">Software Development</span>
 <span class="project2">Attendance System for ISEE</span></span>
 
 
<div class="graycir2"></div>
<span class="footer_item">
<span class="project1">UI</span>
 <span class="project2">XXXXXXXXXXXXXXXXXXXXXX</span></span>
 
 <div class="graycir2"></div>
<span class="footer_item">
<span class="project1">Android APP</span>
 <span class="project2">XXXXXXXXXXXXXXXXXXXXXX</span></span>
 
  <div class="graycir2"></div>
<span class="footer_item">
<span class="project1">VI</span>
 <span class="project2">XXXXXXXXXXXXXXXXXXXXXX</span></span>
 
  <div class="graycir2"></div>
<span class="footer_item">
<span class="project1">Market Research</span>
 <span class="project2">XXXXXXXXXXXXXXXXXXXXXX</span></span>
 
 
</div><!--end footer_list-->
</div><!--end project_area-->

<div class="skill_area">
<div class="skill pro_skill_info">SKILL & HOBBY</div>
<div class="footer_list">

<?php
function skilllevel($level)
  {
    for($i=0;$i<$level;$i++)
  	echo "<span class='skillcir' style='background-color: #757679;'></span>";
    for($i=$level;$i<3;$i++)
  	echo "<span class='skillcir'></span>";	
  }
  
$skill=array("C++","Python","Matlab","Mathematica","CSS","HTML","PHP","JS","Japanese","English","Cantonese","Mandarin");
$skilllevel=array(3,2,3,2,2,1,2,1,2,2,3,3);
$skill_c=count($skill);
for($i=0;$i<$skill_c;)
{
   echo "<div class='graycir2'></div>";
   echo "<span class='footer_item'>";
   echo "<span class='skill1'>".$skill[$i]."</span>";
   skilllevel($skilllevel[$i]);
   $i++;
   if($i<$skill_c)
   {
   echo "<span class='skill1'>".$skill[$i]."</span>";
   skilllevel($skilllevel[$i]);
   }
    $i++;
    echo "</span>";
}
?>

</div><!--end footer_list-->
</div><!--end project_area-->
</div><!--end footer-->

<div class="baner" style="height:20px; float:left; width:100%"></div>
</div><!--end paper-->

CSS

div.paper{
width:900px;
margin: auto;
background-color:#FFF;
}

div.baner{background-color:#AD292E;}

div.baner2{
background-color:#E7E6DE;
position: relative;
}

img.avatar{
border:10px solid #E7E6DE;
float:left;
}

div.maininfo{
position: relative;
left: 30px;
top: 15px;
}

#name{
color: #FFF;
font-size: 30px;
font-weight: 100;
position: relative;
font-family: fantasy;
top: 40px;
left: 20px;
}

.email:before,.website:before,.school:before{
 position: relative;
 top: 6px;
 padding-right: 5px;
}

.education:before,.experience:before,.project:before,.skill:before{
 position: relative;
 top: 3px;
 padding-right: 10px;
}

.email:before{content:url(./mail_b.png);}
.website:before{content:url(./website_b.png);}
.school:before{content:url(./school_b.png);}
.education:before{content:url(./education_b.png);}
.experience:before{content:url(./experience_b.png);}
.project:before{content:url(./project_b.png);}
.skill:before{content:url(./skill_b.png);}

.contact_info{
float:left;
position: relative;
left: 10px;
top: 45px;
font-size: 15px;
font-family: cursive;
margin-right: 8px;
color:#757699;
}

#main
{
position: relative;
padding-top: 1px;
float:left;
width:100%;
}

.edu_exp_info{
position: relative;
font-size: 30px;
font-family: fantasy;
color: #AD292E;
padding-left: 200px;
line-height: 100%;
margin-top: 30px;
}

.edu_item{
position:relative;
clear: both;
width: 100%;
float: left;
}

.edu_item span{
display:block;
}

.whenwhere{
font-size: 15px;
font-family: cursive;
color: #757699;
width: 180px;
float: left;
padding-left: 34px;
border-right: solid 3px #E7E6DE;
padding-top: 20px;
}

.graycir{
border-radius: 50%;
border-color: #E7E6DE;
width: 20px;
height: 20px;
background-color: #E7E6DE;
position: relative;
left: 205px;
top: 20px;
}

.edu_detail{
float: left;
padding-left: 60px;
border-left: solid 3px #E7E6DE;
position: relative;
left: -3px;
margin-bottom: -5px;
}

.detail1{
font-size: 20px;
font-family: fantasy;
}

.detail2{
font-size: 20px;
font-family: Arial;
color:#AD292E;
}

.detail3{
font-family: Arial;
color: #757699;
list-style-type: circle;
margin-top: 0px;
margin-left: -20px;
}

.footer{
background-color:#E7E6DE;
float: left;
width:100%;
padding-bottom: 20px;
}

.project_area{float:left;}

.skill_area{
float:left;
margin-left: 20px;
}

.pro_skill_info{
font-size: 30px;
font-family: fantasy;
color: #AD292E;
padding-left: 30px;
position: relative;
top: 5px;
}

.footer_list{
border-left: solid 3px #757679;
position: relative;
left: 43px;
padding-left: 20px;
}

.footer_item{}

.graycir2{
border-radius: 50%;
border-color: #757679;
width: 20px;
height: 20px;
background-color: #757679;
position: relative;
left: -31px;
top: 20px;
clear: both;
}

.project1,.project2,.skill1{font-family: Arial;}

.project2{color: #757699;}

.skillcir{
border: solid 1px #757679;
border-radius: 50%;
width: 15px;
height: 15px;

float: left;
margin-left: 5px;
position: relative;
top: 2px;
}

.skill1{
float: left;
width:90px;
padding-left: 20px;
}

a{
text-decoration:none;
color:#757699;
}

以上除了那几幅红底图标，其余效果全是CSS实现，由于某人实在是CSS苦手，所以目测可维护性应该比较差。。。算了，别在意了。。

虽然最后总结起来这种方法唯一有可能比Latex好的地方在于有些地方可以用编程快速完成一些重复性的工作吧。。就像上面那份简历右下角那个的实现，可以直接建立两个数组来自动生成，如果以后有什么要添加的话，只要直接添加数组元素就行了；

<?php
function skilllevel($level)
  {
    for($i=0;$i<$level;$i++)
  	echo "<span class='skillcir' style='background-color: #757679;'></span>";
    for($i=$level;$i<3;$i++)
  	echo "<span class='skillcir'></span>";	
  }
  
$skill=array("C++","Python","Matlab","Mathematica","CSS",
   "HTML","PHP","JS","Japanese","English","Cantonese","Mandarin");
$skilllevel=array(3,2,3,2,2,1,2,1,2,2,3,3);
$skill_c=count($skill);
for($i=0;$i<$skill_c;)
{
   echo "<div class='graycir2'></div>";
   echo "<span class='footer_item'>";
   echo "<span class='skill1'>".$skill[$i]."</span>";
   skilllevel($skilllevel[$i]);
   $i++;
   if($i<$skill_c)
   {
   echo "<span class='skill1'>".$skill[$i]."</span>";
   skilllevel($skilllevel[$i]);
   }
    $i++;
    echo "</span>";
}
?>

除此之外，我完全想不到有什么更优于Latex的地方了，果然我就是闲的蛋疼。。。

哦，说起latex，最近发现运营了7年左右的“LaTeX工作室”因为数据库崩了，数据库瞬间空了，祝愿早日恢复~

嘛~这篇估计是春节前最后一篇了，所以就在此祝大家春节快乐先了~

【完】

本文内容遵从CC版权协议，转载请注明出自http://www.kylen314.com

分类: Latex 标签: CSS, Latex, PHP

Mathematica给图片去水印以前某道“选配偶”概率题的一点延拓

评论 (27) 发表评论

Mooction

2014年1月28日00:33 | #1

回复 | 引用

先占个沙发再说。。
Mooction

2014年1月28日00:43 | #2

回复 | 引用

然后。。带走资源，感谢分享
- Vespa
  
  2014年1月28日11:03 | #3
  
  回复 | 引用
  
  其实这也不是什么资源。。。
coder-v3

2014年1月28日15:37 | #4

回复 | 引用

呵呵，支持一个，其实可以自己做一个，融入自己的想法，面试的时候用。打印按钮还是要加的哈
- Vespa
  
  2014年1月28日19:59 | #5
  
  回复 | 引用
  
  面试的时候把自己的网站地址说出来么？
  - coder-v3
    
    2014年2月1日19:45 | #6
    
    回复 | 引用
    
    那肯定呀
    - Vespa
      
      2014年2月1日19:56 | #7
      
      回复 | 引用
      
      如果纯技术博客拿出来底气大一点。。
Alex

2014年1月29日14:49 | #8

回复 | 引用

挺好看的，带走了。
周良

2014年1月29日16:43 | #9

回复 | 引用
天羽ちよこ

2014年1月30日01:12 | #10

回复 | 引用

面试的话还是不要这么花哨比较好吧如果是纯技术博客可以说出来..
- Vespa
  
  2014年1月30日10:54 | #11
  
  回复 | 引用
  
  在理！其实我这个初衷只是为了玩一下CSS，如果不花哨就没有玩的价值了。。。虽然一点也不难。。额，完全转型成纯技术。。渣渣表示难度略大。。
小俊

2014年1月30日22:07 | #12

回复 | 引用

新年快乐
- Vespa
  
  2014年1月31日16:19 | #13
  
  回复 | 引用
  
  新年快乐~
isnowfy

2014年1月31日12:52 | #14

回复 | 引用

我现在基本都是用css写简历，然后用wkhtmltopdf生成pdf。。。
- Vespa
  
  2014年1月31日16:16 | #15
  
  回复 | 引用
  
  好神奇的工具~CSS渣渣表示，即便对于博客，我都有想过用Latex写，然后用一个PDF插件来显示博文。。
ehiuan

2014年2月3日23:37 | #16

回复 | 引用

我觉得不错啊，排版漂亮，打算拿去用。
- Vespa
  
  2014年2月4日11:52 | #17
  
  回复 | 引用
  
  其实版面设计不是我。。我只是负责实现。。
Leniy

2014年2月7日09:02 | #18

回复 | 引用

好it的做法，大牛
- Vespa
  
  2014年2月7日14:15 | #19
  
  回复 | 引用
  
  考虑到有些东西你不常练就会很快不知道怎么用。。
tiandi

2014年2月19日16:13 | #20

回复 | 引用

我发现楼主的作品都是闲的蛋疼之后的作品。
- Vespa
  
  2014年2月19日16:20 | #21
  
  回复 | 引用
  
  被你发现了。。。总不能写科研用的那些微波光子学啊，水声学啊什么之类的东西来吓人吧。。
xiao

2014年3月9日12:22 | #22

回复 | 引用

感觉好叼啊，我是hr当场就录用了
- Vespa
  
  2014年3月9日13:30 | #23
  
  回复 | 引用
  
  HR才不会接受一份全是叉叉的简历呢。。
  - xiao
    
    2014年3月9日13:32 | #24
    
    回复 | 引用
    
    最主要的是ie上全乱了…
    - Vespa
      
      2014年3月9日13:34 | #25
      
      回复 | 引用
      
      好像是。。。算了。。IE什么的，就别在意了
      - xiao
        
        2014年3月9日15:01 | #26
        
        回复 | 引用
静水流深

2015年12月23日16:34 | #27

回复 | 引用

我最后还是在网上找了个latex的经典模板糊弄过去了~

CSS“高仿”Latex简历

PHP

CSS

Categories

公告

CSS“高仿”Latex简历

PHP

CSS

Tag

Categories

公告