時間軸線是一種常見的網頁設計元素,它可以展示時間序列的信息。在實現時間軸線時,我們通常使用css來控制元素的位置、大小、樣式等。下面我們將介紹一些常用的時間軸線css代碼。
/* 容器樣式 */ .timeline { position: relative; max-width: 1300px; margin: 0 auto; } /* 時間軸線樣式 */ .timeline::before { content: ''; position: absolute; top: 0; left: 50%; margin-left: -2px; width: 4px; height: 100%; background-color: #ccc; } /* 時間節點樣式 */ .timeline li { position: relative; width: 50%; padding: 50px 0; list-style: none; } /* 時間節點圖標樣式 */ .timeline li::before { content: ''; position: absolute; top: 0; right: 50%; margin-right: -10px; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; border: 4px solid #ccc; } /* 時間節點內容樣式 */ .timeline li div { position: relative; right: -50%; padding: 15px; background-color: #f2f2f2; border-radius: 6px; } /* 時間節點內容標題樣式 */ .timeline li div h2 { margin-top: 0; color: #333; } /* 時間節點內容詳情樣式 */ .timeline li div p { margin-bottom: 0; color: #666; }
以上css代碼可以實現一個簡單的時間軸線。其中,我們使用了偽元素`::before`來生成時間軸線和時間節點圖標。我們還使用了絕對定位、相對定位等技巧來控制元素的位置。
除了以上代碼外,我們還可以根據需求進行修改和調整,例如修改背景色、字體樣式等,來適應不同的網頁設計風格和需求。
上一篇css超鏈接怎么去顏色
下一篇css超鏈接字體的顏色