jquery垂直时间轴Blueprint: Vertical Timeline

jquery垂直时间轴Blueprint: Vertical Timeline
 点击预览  点击下载

jquery时间轴-这是一个简单的响应时间轴交替的颜色标签。一个图标字体用于在时间轴上的图标的航点和媒体查询一些例子说明如何调整的时间表较小的屏幕。时间轴的主要结构是一个无序列表。

使用步骤

HTML

  1. <ul class="cbp_tmtimeline"> 
  2.     <li> 
  3.         <time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span> <span>18:30</span></time> 
  4.         <div class="cbp_tmicon cbp_tmicon-phone"></div> 
  5.         <div class="cbp_tmlabel"> 
  6.             <h2>Ricebean black-eyed pea</h2> 
  7.             <p>Winter purslane...</p> 
  8.         </div> 
  9.     </li> 
  10.     <li> 
  11.         <time class="cbp_tmtime" datetime="2013-04-11T12:04"><span>4/11/13</span> <span>12:04</span></time> 
  12.         <div class="cbp_tmicon cbp_tmicon-screen"></div> 
  13.         <div class="cbp_tmlabel"> 
  14.             <h2>Greens radish arugula</h2> 
  15.             <p>Caulie dandelion maize...</p> 
  16.         </div> 
  17.     </li> 
  18.     <li> 
  19.         <time class="cbp_tmtime" datetime="2013-04-13 05:36"><span>4/13/13</span> <span>05:36</span></time> 
  20.         <div class="cbp_tmicon cbp_tmicon-mail"></div> 
  21.         <div class="cbp_tmlabel"> 
  22.             <h2>Sprout garlic kohlrabi</h2> 
  23.             <p>Parsnip lotus root...</p> 
  24.         </div> 
  25.     </li> 
  26.     <li> 
  27.         <time class="cbp_tmtime" datetime="2013-04-15 13:15"><span>4/15/13</span> <span>13:15</span></time> 
  28.         <div class="cbp_tmicon cbp_tmicon-phone"></div> 
  29.         <div class="cbp_tmlabel"> 
  30.             <h2>Watercress ricebean</h2> 
  31.             <p>Peanut gourd nori...</p> 
  32.         </div> 
  33.     </li> 
  34.     <li> 
  35.         <time class="cbp_tmtime" datetime="2013-04-16 21:30"><span>4/16/13</span> <span>21:30</span></time> 
  36.         <div class="cbp_tmicon cbp_tmicon-earth"></div> 
  37.         <div class="cbp_tmlabel"> 
  38.             <h2>Courgette daikon</h2> 
  39.             <p>Parsley amaranth tigernut...</p> 
  40.         </div> 
  41.     </li> 
  42. </ul> 

CSS

  1. .cbp_tmtimeline { 
  2.     margin30px 0 0 0
  3.     padding0
  4.     list-stylenone
  5.     positionrelative
  6. }  
  7.   
  8. /* The line */ 
  9. .cbp_tmtimeline:before { 
  10.     content''
  11.     positionabsolute
  12.     top: 0
  13.     bottom: 0
  14.     width10px
  15.     background#afdcf8
  16.     left: 20%
  17.     margin-left-10px
  18.   
  19. .cbp_tmtimeline > li { 
  20.     positionrelative
  21.   
  22. /* The date/time */ 
  23. .cbp_tmtimeline > li .cbp_tmtime { 
  24.     displayblock
  25.     width25%
  26.     padding-right100px
  27.     positionabsolute
  28.   
  29. .cbp_tmtimeline > li .cbp_tmtime span { 
  30.     displayblock
  31.     text-alignright
  32.   
  33. .cbp_tmtimeline > li .cbp_tmtime span:first-child { 
  34.     font-size0.9em
  35.     color#bdd0db
  36.   
  37. .cbp_tmtimeline > li .cbp_tmtime span:last-child { 
  38.     font-size2.9em
  39.     color#3594cb
  40.   
  41. .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child { 
  42.     color#6cbfee
  43.   
  44. /* Right content */ 
  45. .cbp_tmtimeline > li .cbp_tmlabel { 
  46.     margin0 0 15px 25%
  47.     background#3594cb
  48.     color#fff
  49.     padding2em
  50.     font-size1.2em
  51.     font-weight300
  52.     line-height1.4
  53.     positionrelative
  54.     border-radius: 5px
  55.   
  56. .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel { 
  57.     background#6cbfee
  58.   
  59. .cbp_tmtimeline > li .cbp_tmlabel h2 {  
  60.     margin-top0px
  61.     padding0 0 10px 0
  62.     border-bottom1px solid rgba(2552552550.4); 
  63.   
  64. /* The triangle */ 
  65. .cbp_tmtimeline > li .cbp_tmlabel:after { 
  66.     right: 100%
  67.     bordersolid transparent
  68.     content" "
  69.     height0
  70.     width0
  71.     positionabsolute
  72.     pointer-events: none
  73.     border-right-color#3594cb
  74.     border-width10px
  75.     top: 10px
  76.   
  77. .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after { 
  78.     border-right-color#6cbfee
  79.   
  80. /* The icons */ 
  81. .cbp_tmtimeline > li .cbp_tmicon { 
  82.     width40px
  83.     height40px
  84.     font-family'ecoico'
  85.     speaknone
  86.     font-stylenormal
  87.     font-weightnormal
  88.     font-variantnormal
  89.     text-transformnone
  90.     font-size1.4em
  91.     line-height40px
  92.     -webkit-font-smoothing: antialiased; 
  93.     positionabsolute
  94.     color#fff
  95.     background#46a4da
  96.     border-radius: 50%
  97.     box-shadow: 0 0 0 8px #afdcf8
  98.     text-aligncenter
  99.     left: 20%
  100.     top: 0
  101.     margin0 0 0 -25px
  102.   
  103. .cbp_tmicon-phone:before { 
  104.     content"\e000"
  105.   
  106. .cbp_tmicon-screen:before { 
  107.     content"\e001"
  108.   
  109. .cbp_tmicon-mail:before { 
  110.     content"\e002"
  111.   
  112. .cbp_tmicon-earth:before { 
  113.     content"\e003"
  114.   
  115. /* Example Media Queries */ 
  116. @media screen and (max-width65.375em) { 
  117.   
  118.     .cbp_tmtimeline > li .cbp_tmtime span:last-child { 
  119.         font-size1.5em
  120.     } 
  121.   
  122. @media screen and (max-width47.2em) { 
  123.     .cbp_tmtimeline:before { 
  124.         displaynone
  125.     } 
  126.   
  127.     .cbp_tmtimeline > li .cbp_tmtime { 
  128.         width100%
  129.         positionrelative
  130.         padding0 0 20px 0
  131.     } 
  132.   
  133.     .cbp_tmtimeline > li .cbp_tmtime span { 
  134.         text-alignleft
  135.     } 
  136.   
  137.     .cbp_tmtimeline > li .cbp_tmlabel { 
  138.         margin0 0 30px 0
  139.         padding1em
  140.         font-weight400
  141.         font-size95%
  142.     } 
  143.   
  144.     .cbp_tmtimeline > li .cbp_tmlabel:after { 
  145.         right: auto
  146.         left: 20px
  147.         border-right-colortransparent
  148.         border-bottom-color#3594cb
  149.         top: -20px
  150.     } 
  151.   
  152.     .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after { 
  153.         border-right-colortransparent
  154.         border-bottom-color#6cbfee
  155.     } 
  156.   
  157.     .cbp_tmtimeline > li .cbp_tmicon { 
  158.         positionrelative
  159.         floatright
  160.         left: auto
  161.         margin-55px 5px 0 0px
  162.     }    

转载请注明:代码家园 » jquery垂直时间轴Blueprint: Vertical Timeline

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)