溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“HTML5+CSS3怎么實現響應式垂直時間軸”，在日常操作中，相信很多人在HTML5+CSS3怎么實現響應式垂直時間軸問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5+CSS3怎么實現響應式垂直時間軸”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
網頁時間軸一般用于展示以時間為主線的事件，如企業網站常見的公司發展歷程等。本文將給大家介紹一款基于HTML5和CSS3的漂亮的垂直時間軸，它可以響應頁面布局，適用于HTML5開發的PC和移動手機WEB應用。
我們使用了HTML5標簽<section>，時間軸中所有的內容包括標題、簡介、時間和圖像都放在.cd-timeline-block的DIV中，多個DIV形成一個序列，并把這些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實現的響應式垂直時間軸</h3>
<p>網頁時間軸一般用于展示以時間為主線的事件，如企業網站常見的公司發展歷程等。本文將給大家介紹一款基于HTML5和CSS3的漂亮的垂直時間軸，它可以響應頁面布局，適用于HTML5開發的PC和移動手機WEB應用。</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圖像作為圖標，你也可以換成png，gif格式圖像。
我們使用:before偽類在時間軸#cd-timeline的前面創建一條垂直線，那么時間軸各個節點的內容都會基于這垂直線。
#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;
}
好，接下來我們要做的是，根據用戶瀏覽器窗口的大小來調整時間軸的布局，當瀏覽器窗口非常大時，時間軸的各節點內容會分布在垂直線的兩邊（垂直線居中），當瀏覽器窗口足夠小如手機，iPad中豎屏瀏覽時，時間軸的各節點內容會排列在垂直線的右邊（垂直線靠左），這個俗稱響應式布局。
.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判斷設備的屏幕尺寸，根據不同的尺寸執行不同的css樣式。本例中還用到了CSS3的陰影、圓角等效果，文中不再詳述，大家可以參考網上好多關于CSS3的基礎教程，你也可以直接下載源碼包，本例的css全部整理在style.css文件中。當然你也可以在本例的基礎上使用JS和CSS3來給時間軸增加一些過渡動畫，效果可能會更好。
到此，關于“HTML5+CSS3怎么實現響應式垂直時間軸”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
