css+font awesom 做的时间轴

来源：互联网发布：小企业网络贷款编辑：程序博客网时间：2024/04/29 20:39

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta name="renderer" content="webkit">       <!-- bootstrap3.3.5-->     <link href="../../components/bootstrap/css/bootstrap.css" rel="stylesheet">      <!--字体图标 4.4.0-->    <link href="../FontAwesome4.4/css/font-awesome.css" rel="stylesheet">    <!-- 全局js -->    <script src="../../js/jquery-1.11.3.min.js"></script>    <script src="../../components/bootstrap/js/bootstrap.min.js"></script>     <style>         body{             background-color: #efefef;         }           /*时间轴大容器*/         .line-warp{               position: relative;               width: 70%;               min-width: 600px;               margin: 0 auto;              margin-top: 100px;         }        /*  画一根时间线*/         .line-warp:before{             position: absolute;             content: '';             left:22px;             width: 4px;             height: 100%;             margin-top: 10px;             margin-bottom: 15px;             background: #adadad;         }             /* 每一行*/         .line-item{             position: relative;             margin-top: 30px;         }            /* 左边的图标 容器*/         .line-icon-warp{             position: absolute;             top: 0;             left: 0;         }        /*    通过修改font-size来控制图标大小*/         .line-icon-warp span{             font-size: 22px;         }          /*右边 内容*/         .line-content-box{             position: relative;             margin-left: 60px;             background: #fff;             border-radius: .25em;             padding: 1em         }         /* 用来画内容框左边的小箭头*/         .line-content-box:before{             content: '';             position: absolute;             top: 16px;             left: -14px;             height: 0;             width: 0;             border: 7px solid transparent;             border-right: 7px solid #fff         }     </style></head><body>        <div class="line-warp" >            <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: #ff9357"></i>                  <i class="fa fa-flag fa-stack-1x  " style="color: #ffffff"></i>                </span>            </div>            <div class="line-content-box">               我是一个兵            </div>           </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: #39998d"></i>                      <i class="fa fa-chrome fa-stack-1x  fa-1x " style="color: #ffffff"></i>                   </span>                </div>                <div class="line-content-box">                     从前有个<br>                    从前有个<br>                    从前有个<br> 从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                </div>            </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: #31699d"></i>                      <i class="fa fa-cloud fa-stack-1x  " style="color: #ffffff"></i>                   </span>                </div>                <div class="line-content-box">                    从前有个<br>                    从前有个<br>                    从前有个<br> 从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                </div>            </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: #b04149"></i>                      <i class="fa fa-bell fa-stack-1x  " style="color: #ffffff"></i>                   </span>                </div>                <div class="line-content-box">                    从前有个<br>                    从前有个<br>                    从前有个<br> 从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                </div>            </div>        </div></body></html>

----------------------------------------------------------------------------------第2个--------------------------------

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta name="renderer" content="webkit">       <!-- bootstrap3.3.5-->     <link href="components/bootstrap/css/bootstrap.css" rel="stylesheet">      <!--字体图标 4.4.0-->    <link href="components/FontAwesome4.4/css/font-awesome.css" rel="stylesheet">    <!-- 全局js -->    <script src="js/jquery-1.11.3.min.js"></script>    <script src="components/bootstrap/js/bootstrap.min.js"></script>     <style>         body{             background-color: #efefef;         }           /*时间轴大容器*/         .line-warp{               position: relative;               width: 70%;               min-width: 600px;               margin: 0 auto;              margin-top: 100px;         }        /*  画一根时间线*/         .line-warp:before{             position: absolute;             content: '';             left:22px;             width: 4px;             height: 100%;             margin-top: 10px;             margin-bottom: 15px;             background: #adadad;         }             /* 每一行*/         .line-item{             position: relative;             margin-top: 30px;         }            /* 左边的图标 容器*/         .line-icon-warp{             position: absolute;             top: 0;             left: 0;         }        /*    通过修改font-size来控制图标大小*/         .line-icon-warp span:first-child{             font-size: 22px;         }          /*右边 内容*/         .line-content-box{             position: relative;             margin-left: 140px;             background: #fff;             border-radius: .25em;             padding: 1em         }         /* 用来画内容框左边的小箭头*/         .line-content-box:before{             content: '';             position: absolute;             top: 16px;             left: -14px;             height: 0;             width: 0;             border: 7px solid transparent;             border-right: 7px solid #fff         }     </style></head><body>        <div class="line-warp" >            <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: #ff9357"></i>                  <i class="fa fa-flag fa-stack-1x  " style="color: #ffffff"></i>                </span>                <span> 2014-11-13 </span>            </div>            <div class="line-content-box">               我是一个兵            </div>           </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: #39998d"></i>                      <i class="fa fa-chrome fa-stack-1x  fa-1x " style="color: #ffffff"></i>                   </span>                    <span> 2014-11-12 </span>                </div>                <div class="line-content-box">                     从前有个<br>                    从前有个<br>                    从前有个<br> 从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                </div>            </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: #31699d"></i>                      <i class="fa fa-cloud fa-stack-1x  " style="color: #ffffff"></i>                   </span>                   <span> 2014-11-11 </span>                </div>                <div class="line-content-box">                    从前有个<br>                    从前有个<br>                    从前有个<br> 从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                </div>            </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: #b04149"></i>                      <i class="fa fa-bell fa-stack-1x  " style="color: #ffffff"></i>                   </span>                    <span> 2014-11-10 </span>                </div>                <div class="line-content-box">                    从前有个<br>                    从前有个<br>                    从前有个<br> 从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                    从前有个<br>                </div>            </div>        </div></body></html>

0 0