HTML5 CSS3實現的響應式垂直時間軸

2021-08-27 19:58:21 字數 1230 閱讀 2220

網頁時間軸一般用於展示以時間為主線的事件，如企業**常見的公司發展歷程等。本文將給大家介紹一款基於html5和css3的漂亮的垂直時間軸，它可以響應頁面布局，適用於html5開發的pc和移動手機web應用。

檢視演示

html

我們使用了html5標籤，時間軸中所有的內容包括標題、簡介、時間和影象都放在.cd-timeline- block的div中，多個div形成乙個序列，並把這些div放在中。注意要看到本例演示效果，需要你的瀏覽器支援 html5和css3。

網頁時間軸一般用於展示以時間為主線的事件，如企業**常見的公司發展歷程等。本文將給大家介紹一款基於html5和css3的漂亮的垂直時間軸，它可以響應頁面布局，適用於html5開發的pc和移動手機web應用。


閱讀全文


2015-01-06


...
本例使用了svg影象作為圖示，你也可以換成png，gif格式影象。

css我們使用:before偽類在時間軸#cd-timeline的前面建立一條垂直線，那麼時間軸各個節點的內容都會基於這垂直線。

#cd-timeline  


#cd-timeline::before
好，接下來我們要做的是，根據使用者瀏覽器視窗的大小來調整時間軸的布局，當瀏覽器視窗非常大時，時間軸的各節點內容會分布在垂直線的兩邊（垂直線居 中），當瀏覽器視窗足夠小如手機，ipad中豎屏瀏覽時，時間軸的各節點內容會排列在垂直線的右邊（垂直線靠左），這個俗稱響應式布局。

.cd-timeline-block  


.cd-timeline-block:after  


.cd-timeline-block:first-child  


.cd-timeline-block:last-child  


@media only screen and (min-width: 1170px)  


.cd-timeline-block:nth-child(even) .cd-timeline-content::before  


.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more  


.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date  


}
**於：

HTML5 CSS3 響應式布局

響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。優點 面對不同解析度裝置靈活性強 能夠快捷解決多裝置顯示適應問題 缺點 相容各種裝置工作量大，效率低下 累贅，會...

HTML5 CSS3移動端響應式網頁製作

1.響應式可以簡單理解為 能夠適應所有的裝置螢幕 2.h5相較於xhtml增強了語義化。3.box sizing border box 內減模式 4.固比的布局，固定的模組要用絕對定位的方式將其固定住。5.陰影屬性 box shadow 水平陰影的位置 垂直陰影的位置 模糊羽化 陰影的尺寸 陰影的顏...

HTML5 CSS3樣式 屬性

href 路徑 src 路徑 標籤的屬性 border 邊框 cellspacing 外邊距 cellpadding 內邊距 align 位置 bgcolor 背景色 background 背景 bordercolor 邊框顏色 table中 colspan 跨2列 rowspan 跨 行 type...