這篇文章主要介紹“HTML5+CSS3怎么實(shí)現(xiàn)響應(yīng)式垂直時(shí)間軸”，在日常操作中，相信很多人在HTML5+CSS3怎么實(shí)現(xiàn)響應(yīng)式垂直時(shí)間軸問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”HTML5+CSS3怎么實(shí)現(xiàn)響應(yīng)式垂直時(shí)間軸”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、成都網(wǎng)站制作與策劃設(shè)計(jì),洛川網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:洛川等地區(qū)。洛川做網(wǎng)站價(jià)格咨詢:18982081108

網(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)用。

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"> <p class="cd-timeline-block"> <p class="cd-timeline-img cd-picture"> <img src="img/cd-icon-picture.svg" alt="Picture"> </p> <p class="cd-timeline-content"> <h3>HTML5+CSS3實(shí)現(xiàn)的響應(yīng)式垂直時(shí)間軸</h3>            <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 href="http://www.xuebuyuan.com/javascript/285.html" class="cd-read-more" target="_blank">閱讀全文</a> <span class="cd-date">2015-01-06</span> </p> </p> <p class="cd-timeline-block"> ... </p> </p>

本例使用了svg圖像作為圖標(biāo)，你也可以換成png，gif格式圖像。

CSS

我們使用:before偽類在時(shí)間軸#cd-timeline的前面創(chuàng)建一條垂直線，那么時(shí)間軸各個(gè)節(jié)點(diǎn)的內(nèi)容都會(huì)基于這垂直線。

#cd-timeline {  position: relative;  padding: 2em 0;  margin-top: 2em;  margin-bottom: 2em; } #cd-timeline::before {  content: '';  position: absolute;  top: 0;  left: 18px;  height: 100%;  width: 4px;  background: #d7e4ed; }

好，接下來(lái)我們要做的是，根據(jù)用戶瀏覽器窗口的大小來(lái)調(diào)整時(shí)間軸的布局，當(dāng)瀏覽器窗口非常大時(shí)，時(shí)間軸的各節(jié)點(diǎn)內(nèi)容會(huì)分布在垂直線的兩邊（垂直線居中），當(dāng)瀏覽器窗口足夠小如手機(jī)，iPad中豎屏瀏覽時(shí)，時(shí)間軸的各節(jié)點(diǎn)內(nèi)容會(huì)排列在垂直線的右邊（垂直線靠左），這個(gè)俗稱響應(yīng)式布局。

.cd-timeline-block {  position: relative;  margin: 2em 0; } .cd-timeline-block:after {  content: "";  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ì)更好。

到此，關(guān)于“HTML5+CSS3怎么實(shí)現(xiàn)響應(yīng)式垂直時(shí)間軸”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

文章標(biāo)題：HTML5+CSS3怎么實(shí)現(xiàn)響應(yīng)式垂直時(shí)間軸-創(chuàng)新互聯(lián)
URL地址：http://www.chinadenli.net/article8/jgeop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站排名、App開(kāi)發(fā)、微信公眾號(hào)、靜態(tài)網(wǎng)站、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)