CSS列表是網頁設計中常用的一種布局形式,可以方便地展示一些有序或無序的信息。下面介紹一些CSS列表的使用方法。
基本列表樣式
ul { list-style-type: disc; /* 圓點,默認值 */ } ol { list-style-type: decimal; /* 數字 */ }
去除列表樣式
ul, ol { list-style: none; /* 所有樣式都去除 */ }
自定義列表樣式
ul { list-style-image: url("路徑/文件名.png"); /* 圖片作為標志 */ } ol { list-style: none; /* 去掉數字或點 */ counter-reset:計數器名; /* 初始化計數器 */ } li::before { content: counter(計數器名) "、"; /* 計數器的值和分隔符 */ counter-increment:計數器名; /* 計數器值自增1 */ }
收起展開列表
ul { display: none; /* 初始收起 */ } .parent:hover >ul { display: block; /* 懸停在父元素上展開 */ }
嵌套列表樣式
ul ul { list-style-type: circle; /* 嵌套列表的標志調整 */ }
綜上所述,掌握基本的列表樣式并靈活運用,可以提高網頁的美觀度和信息表達能力。