使用CSS和font-awesome给博客添加时间线

想给自己的about页面修饰一下，于是就想添加个个人时间线功能希望能通过时间线功能把自己的故事展现给别人面前，于是就参考网上别人的方法使用CSS + font-awesome实现了简单的时间线功能，效果如下图（也可以直接访问我的about页面

1. 首先下载boostrap和font-awesome
   在这里我也顺带更新了Freemind中的font-awesome的版本到4.5.0

2. 主要还是通过div结合CSS的伪类来实现

   HTML部分如下(只包含第一部分)，

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   <div class="line-warp"> <div class="timeline-header"> <span class="badge"><span class="fa fa-clock-o"></span>My Timeline</span> </div> <div class="line-item"> <div class="line-icon-warp "> <span class="fa-stack fa-lg" > <i class="fa fa-circle fa-stack-2x" style="color: #FFC125"></i> <i class="fa fa-lightbulb-o fa-stack-1x" style="color: #ffffff"></i> </span> <span class="badge"> &nbsp;&nbsp;Just Now&nbsp;&nbsp; </span> </div> <div class="line-content-box"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; Talk is cheap, show me the code...<br> 　　　パ..パ・゜<br> 　　（ ° Д ° ）<br> ＿＿（＿っ /￣￣￣￣￣/＿ &nbsp;&nbsp;Inputing...<br> 　　　　＼/＿＿＿＿＿/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正在输入...<br> </div> </div> </div>

**CSS部分**
这里的实现主要是通过before和first-child伪类实现在气泡前方添加时间线和图标（图标是使用的font-awesome通过字体大小控制图标大小），贴上代码：

<!--hexoPostRenderEscape:<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*Time line*/</span></span><br><span class="line"> <span class="comment">/*时间轴大容器*/</span></span><br><span class="line"><span class="selector-class">.line-warp</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">80%</span>;</span><br><span class="line">    <span class="attribute">min-width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*timeline*/</span></span><br><span class="line"><span class="selector-class">.line-warp</span><span class="selector-pseudo">:before</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="attribute">left</span>:<span class="number">21px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">2px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#adadad</span>;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">    <span class="comment">/* 每一行*/</span></span><br><span class="line"><span class="selector-class">.line-item</span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line">   <span class="comment">/* 左边的图标 容器*/</span></span><br><span class="line"><span class="selector-class">.line-icon-warp</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*   通过修改font-size来控制图标大小*/</span></span><br><span class="line"><span class="selector-class">.line-icon-warp</span> <span class="selector-tag">span</span><span class="selector-pseudo">:first-child</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">22px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.line-icon-warp</span> <span class="selector-class">.badge</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">13px</span>;</span><br><span class="line">&#125;</span><br><span class="line"> <span class="comment">/*右边 内容*/</span></span><br><span class="line"><span class="selector-class">.line-content-box</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">155px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#e5e5e5</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: .<span class="number">25em</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">1em</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">&quot;Calibri&quot;</span>, <span class="string">&quot;Arial&quot;</span>, <span class="string">&quot;Microsoft YaHei&quot;</span>, <span class="string">&quot;黑体&quot;</span>;</span><br><span class="line">    <span class="attribute">-webkit-transition</span>: all .<span class="number">2s</span> linear;</span><br><span class="line">    <span class="attribute">-moz-transition</span>: all .<span class="number">2s</span> linear;</span><br><span class="line">    <span class="attribute">transition</span>: all .<span class="number">2s</span> linear;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 用来画内容框左边的小箭头*/</span></span><br><span class="line"><span class="selector-class">.line-content-box</span><span class="selector-pseudo">:before</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">left</span>: -<span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">7px</span> solid transparent;</span><br><span class="line">    <span class="attribute">border-right</span>: <span class="number">7px</span> solid <span class="number">#e5e5e5</span>;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>:hexoPostRenderEscape-->

1. 在这里有一个问题就是如何实现时间线中的绘画气泡样式，我借鉴了别人使用的纯CSS截取div边框的方式实现箭头。 详细方法可以参照这里或者这里

2. 最终使用boostrap的panel把时间线框起来。

有兴趣的可以直接去我主题的github页面参考css/style.css和博客源代码中的about页面about/index.html的代码，其中也包括了简介部分。