list-style.html 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <h3>List Styles UI</h3>
  2. <div id="editor">
  3. <h2>Default styles</h2>
  4. <figure class="table">
  5. <table style="width: 600px;">
  6. <tbody>
  7. <tr>
  8. <td colspan="2" style="text-align: center">
  9. <span class="text-big" style="font-weight: bold">Default styles</span>
  10. </td>
  11. </tr>
  12. <tr>
  13. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Bulleted</span></td>
  14. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Numbered</span></td>
  15. </tr>
  16. <tr>
  17. <td style="vertical-align:top; width: 50%">
  18. <ul>
  19. <li>UL List item 1</li>
  20. <li>UL List item 2</li>
  21. <li>UL List item 3</li>
  22. </ul>
  23. </td>
  24. <td style="vertical-align:top; width: 50%">
  25. <ol>
  26. <li>OL List item 1</li>
  27. <li>OL List item 2</li>
  28. <li>OL List item 3</li>
  29. </ol>
  30. </td>
  31. </tr>
  32. </tbody>
  33. </table>
  34. </figure>
  35. <h2>Bulleted lists</h2>
  36. <figure class="table">
  37. <table style="width: 600px;">
  38. <tbody>
  39. <tr>
  40. <td colspan="4" style="text-align: center">
  41. <span class="text-big" style="font-weight: bold">Type of list</span>
  42. </td>
  43. </tr>
  44. <tr>
  45. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Circle</span></td>
  46. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Disc</span></td>
  47. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Square</span></td>
  48. <td style="text-align: center"><span class="text-big" style="font-weight: bold">'👉'</span></td>
  49. </tr>
  50. <tr>
  51. <td style="vertical-align:top; width: 25%">
  52. <ul style="list-style-type: circle;">
  53. <li>UL List item 1</li>
  54. <li>UL List item 2</li>
  55. <li>UL List item 3</li>
  56. </ul>
  57. </td>
  58. <td style="vertical-align:top; width: 25%">
  59. <ul style="list-style-type: disc;">
  60. <li>UL List item 1</li>
  61. <li>UL List item 2</li>
  62. <li>UL List item 3</li>
  63. </ul>
  64. </td>
  65. <td style="vertical-align:top; width: 25%">
  66. <ul style="list-style-type: square;">
  67. <li>UL List item 1</li>
  68. <li>UL List item 2</li>
  69. <li>UL List item 3</li>
  70. </ul>
  71. </td>
  72. <td style="vertical-align:top; width: 25%">
  73. <ul style="list-style-type: '👉';">
  74. <li>UL List item 1</li>
  75. <li>UL List item 2</li>
  76. <li>UL List item 3</li>
  77. </ul>
  78. </td>
  79. </tr>
  80. </tbody>
  81. </table>
  82. </figure>
  83. <h2>Numbered lists</h2>
  84. <figure class="table">
  85. <table style="width: 800px;">
  86. <tbody>
  87. <tr>
  88. <td colspan="4" style="text-align: center">
  89. <span class="text-big" style="font-weight: bold">Type of list</span>
  90. </td>
  91. </tr>
  92. <tr>
  93. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Decimal</span></td>
  94. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Decimal-leading-zero</span></td>
  95. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Lower-latin</span></td>
  96. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Lower-roman</span></td>
  97. </tr>
  98. <tr>
  99. <td style="vertical-align:top; width: 25%">
  100. <ol style="list-style-type: decimal;">
  101. <li>OL List item 1</li>
  102. <li>OL List item 2</li>
  103. <li>OL List item 3</li>
  104. </ol>
  105. </td>
  106. <td style="vertical-align:top; width: 25%">
  107. <ol style="list-style-type: decimal-leading-zero;">
  108. <li>OL List item 1</li>
  109. <li>OL List item 2</li>
  110. <li>OL List item 3</li>
  111. </ol>
  112. </td>
  113. <td style="vertical-align:top; width: 25%">
  114. <ol style="list-style-type: lower-latin;">
  115. <li>OL List item 1</li>
  116. <li>OL List item 2</li>
  117. <li>OL List item 3</li>
  118. </ol>
  119. </td>
  120. <td style="vertical-align:top; width: 25%">
  121. <ol style="list-style-type: lower-roman;">
  122. <li>OL List item 1</li>
  123. <li>OL List item 2</li>
  124. <li>OL List item 3</li>
  125. </ol>
  126. </td>
  127. </tr>
  128. </tbody>
  129. </table>
  130. </figure>
  131. <h2>Nested/mixed lists (numbered and bulleted)</h2>
  132. <figure class="table">
  133. <table style="width: 1200px;">
  134. <tr>
  135. <td style="width: 50%">
  136. <ol style="list-style-type: lower-roman;">
  137. <li>OL 1.1 <code>OL[style: lower-roman]</code></li>
  138. <li>OL 1.2 <code>OL[style: lower-roman]</code>
  139. <ul style="list-style-type: square;">
  140. <li>UL 1.2.1 <code>OL[style: lower-roman] &gt; UL[style: square]</code></li>
  141. <li>UL 1.2.2 <code>OL[style: lower-roman] &gt; UL[style: square]</code></li>
  142. <li>UL 1.2.3 <code>OL[style: lower-roman] &gt; UL[style: square]</code></li>
  143. </ul>
  144. </li>
  145. <li>OL 1.3 <code>OL[style: lower-roman]</code></li>
  146. <li>OL 1.4 <code>OL[style: lower-roman]</code></li>
  147. <ol style="list-style-type: lower-alpha;">
  148. <li>OL 1.4.1 <code>OL[style: lower-roman] &gt; OL[style: lower-alpha]</code></li>
  149. <li>OL 1.4.2 <code>OL[style: lower-roman] &gt; OL[style: lower-alpha]</code></li>
  150. <li>OL 1.4.3 <code>OL[style: lower-roman] &gt; OL[style: lower-alpha]</code></li>
  151. </ol>
  152. </li>
  153. <li>OL 1.5 <code>OL[style: lower-roman]</code></li>
  154. <li>OL 1.6 <code>OL[style: lower-roman]</code></li>
  155. </ol>
  156. </td>
  157. <td style="width: 50%">
  158. <ol style="list-style-type: upper-alpha;">
  159. <li>OL 2.1 <code>OL[style: upper-alpha]</code>
  160. <ol style="list-style-type: lower-greek;">
  161. <li>OL 2.2.1 <code>OL[style: lower-alpha] &gt; OL[style: lower-greek]</code>
  162. <ul style="list-style-type: circle;">
  163. <li>UL 2.2.1.1 <code>... &gt; OL[style: lower-greek] &gt; UL[style: circle]</code></li>
  164. <li>UL 2.2.1.2 <code>... &gt; OL[style: lower-greek] &gt; UL[style: circle]</code></li>
  165. <li>UL 2.2.1.3 <code>... &gt; OL[style: lower-greek] &gt; UL[style: circle]</code></li>
  166. </ul>
  167. </li>
  168. <li>OL 2.2.2 <code>OL[style: lower-alpha] &gt; OL[style: lower-greek]</code></li>
  169. <li>OL 2.2.3 <code>OL[style: lower-alpha] &gt; OL[style: lower-greek]</code></li>
  170. </ol>
  171. </li>
  172. <li>OL 2.2 <code>OL[style: upper-alpha]</code></li>
  173. </ol>
  174. </td>
  175. </tr>
  176. </table>
  177. </figure>
  178. </div>