Board logo

標題: CSS 清單選項 (一) [打印本頁]

作者: 陳育霖    時間: 2023-8-12 07:49     標題: CSS 清單選項 (一)

清單選項符號: list-style-type
ul: disc 預設,實心圓點、circle 空心圓點、square 實心方塊、none 不顯示
ol: decimal 阿拉伯數字(1、2、3)、decimal-leading-zero 阿拉伯數字(01、02、03)、lower-roman/upper-roman 大小寫羅馬數字、lower-alpha/upper-alpha大小寫英文
  1. <ul style="list-style-type: circle">
  2.   <li>午餐</li>
  3.   <li>晚餐</li>
  4. <ul>
  5. <ol style="list-style-type: decimal">
  6.   <li>午餐</li>
  7.   <li>晚餐</li>
  8. <ol>
複製代碼
清單選項圖片: list-style-image
none 無、url 圖片位置
  1. ul {
  2.   list-style-image: url(blue.jpg);
  3. }
複製代碼
符號與編號位置: list-style-position
inside 內部、outside 外部
  1. ul {
  2.   list-style-position: outside;
  3. }
  4. ol {
  5.   list-style-position: inside;
  6. }
複製代碼





歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/) Powered by Discuz! 7.2