CSS列表是Web開發中常用的樣式技術之一。列表是一種線性數據結構,通過CSS樣式可以實現非常豐富的列表展示效果。
/* 基本樣式 */ ul, ol { list-style: none; margin: 0; padding: 0; } /* 飾品樣式 */ /* 實心圓點 */ ul li:before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #000; margin-right: 10px; margin-bottom: 3px; } /* 空心圓點 */ ul li.bullet:before { content: ''; display: inline-block; width: 5px; height: 5px; border: 1px solid #000; border-radius: 50%; margin-right: 10px; margin-bottom: 3px; } /* 實心方塊 */ ol li:before { content: ''; display: inline-block; width: 5px; height: 5px; background-color: #000; margin-right: 10px; margin-bottom: 3px; } /* 模擬樹形列表(嵌套) */ ul.tree, ul.tree ul { list-style-type: none; margin: 0; padding: 0; } ul.tree li { position: relative; } ul.tree li:before, ul.tree li:after { content: ''; position: absolute; top: 0; } ul.tree li:before { left: -20px; width: 1px; height: 100%; border-left: 1px solid #ccc; } ul.tree li:after { left: -30px; width: 10px; height: 10px; border: 1px solid #ccc; border-radius: 50%; background-color: #fff; } ul.tree li:last-child:before { height: 50%; } ul.tree ul li:before { left: -15px; width: 15px; border-left: 1px solid #ccc; }
上面的代碼片段展示了一些常用的列表樣式技巧。我們可以看到,在編寫CSS列表時,可以用list-style屬性來指定列表項的符號類型。同時,我們還可以借助偽元素:before和:after來模擬各種復雜的符號形狀,實現更加炫酷的列表效果。
除此之外,我們還可以使用CSS3的一些新特性,例如border-radius屬性來實現圓角形狀;box-shadow屬性來實現陰影效果;transform屬性來實現旋轉、縮放等效果等等。
總之,CSS列表是一個非常實用的技能,能夠幫助我們實現各種炫酷的Web界面效果。在實際開發中,我們需要靈活運用各種樣式技巧,根據實際需求進行選取和組合,創造出屬于自己的Web UI風格。
上一篇css3圓角計算方法
下一篇css3場景動畫效果