国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

HTML

我們使用了HTML5標(biāo)簽<section>，時(shí)間軸中所有的內(nèi)容包括標(biāo)題、簡(jiǎn)介、時(shí)間和圖像都放在.cd-timeline-block的DIV中，多個(gè)DIV形成一個(gè)序列，并把這些DIV放在<section>中。注意要看到本例演示效果，需要你的瀏覽器支持HTML5和CSS3。

<section id="cd-timeline" class="cd-container"> 
    <div class="cd-timeline-block"> 
        <div class="cd-timeline-img cd-picture"> 
            <img src="img/cd-icon-picture.svg" alt="Picture"> 
        </div> 
 
        <div class="cd-timeline-content"> 
            <h2>HTML5+CSS3實(shí)現(xiàn)的響應(yīng)式垂直時(shí)間軸</h2>             
            <p>網(wǎng)頁(yè)時(shí)間軸一般用于展示以時(shí)間為主線的事件，如企業(yè)網(wǎng)站常見(jiàn)的公司發(fā)展歷程等。本文將給大家介紹一款基于HTML5和CSS3的漂亮的垂直時(shí)間軸，它可以響應(yīng)頁(yè)面布局，適用于HTML5開(kāi)發(fā)的PC和移動(dòng)手機(jī)WEB應(yīng)用。</p> 
            <a ; 
  display: table; 
  clear: both; 
} 
.cd-timeline-block:first-child { 
  margin-top: 0; 
} 
.cd-timeline-block:last-child { 
  margin-bottom: 0; 
} 
@media only screen and (min-width: 1170px) { 
  .cd-timeline-block:nth-child(even) .cd-timeline-content { 
    float: right; 
  } 
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before { 
    top: 24px; 
    left: auto; 
    right: 100%; 
    border-color: transparent; 
    border-right-color: white; 
  } 
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { 
    float: right; 
  } 
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { 
    left: auto; 
    right: 122%; 
    text-align: right; 
  } 
} 

CSS3中可以使用@media判斷設(shè)備的屏幕尺寸，根據(jù)不同的尺寸執(zhí)行不同的css樣式。本例中還用到了CSS3的陰影、圓角等效果，文中不再詳述，大家可以參考網(wǎng)上好多關(guān)于CSS3的基礎(chǔ)教程，你也可以直接下載源碼包，本例的css全部整理在style.css文件中。當(dāng)然你也可以在本例的基礎(chǔ)上使用JS和CSS3來(lái)給時(shí)間軸增加一些過(guò)渡動(dòng)畫(huà)，效果可能會(huì)更好。