css+font awesom 做的时间轴



css+font awesom 做的时间轴_第1张图片




<!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个--------------------------------




css+font awesom 做的时间轴_第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>

你可能感兴趣的:(css,bootstrap,时间轴)