Mryqu's Notes


  • 首页

  • 搜索
close

玩玩无序列表ul和有序列表ol

时间: 2013-10-18   |   分类: FrontEnd     |   阅读: 236 字 ~2分钟

写博客有时候用到列表,这里好好玩一玩。

CSS list-style-type 属性

属性介绍

|值|描述 |—– |none|无标记。 |disc|默认。标记是实心圆。 |circle|标记是空心圆。 |square|标记是实心方块。 |decimal|标记是数字。 |decimal-leading-zero|0开头的数字标记。(01, 02, 03, 等。) |lower-roman|小写罗马数字(i, ii, iii, iv, v, 等。) |upper-roman|大写罗马数字(I, II, III, IV, V, 等。) |lower-alpha|小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |upper-alpha|大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |lower-greek|小写希腊字母(alpha, beta, gamma, 等。) |lower-latin|小写拉丁字母(a, b, c, d, e, 等。) |upper-latin|大写拉丁字母(A, B, C, D, E, 等。) |hebrew|传统的希伯来编号方式 |armenian|传统的亚美尼亚编号方式 |georgian|传统的乔治亚编号方式(an, ban, gan, 等。) |cjk-ideographic|简单的表意数字 |hiragana|标记是:a, i, u, e, o, ka, ki, 等。(日文片假名) |katakana|标记是:A, I, U, E, O, KA, KI, 等。(日文片假名) |hiragana-iroha|标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名) |katakana-iroha|标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名) |inherit|规定应该从父元素继承 list-style-type 属性的值。

示例

<ul>
<li style="list-style: none !important;">none</li>
<li style="list-style: disc !important;">disc</li>
<li style="list-style: circle !important;">circle</li>
<li style="list-style: square !important;">square</li>
<li style="list-style: decimal !important;">decimal</li>
<li style="list-style: decimal-leading-zero !important;">decimal-leading-zero</li>
<li style="list-style: lower-roman !important;">lower-roman</li>
<li style="list-style: upper-roman !important;">upper-roman</li>
<li style="list-style: lower-alpha !important;">lower-alpha</li>
<li style="list-style: upper-alpha !important;">upper-alpha</li>
<li style="list-style: lower-greek !important;">lower-greek</li>
<li style="list-style: lower-latin !important;">lower-latin</li>
<li style="list-style: upper-latin !important;">upper-latin</li>
<li style="list-style: hebrew !important;">hebrew</li>
<li style="list-style: armenian !important;">armenian</li>
<li style="list-style: georgian !important;">georgian</li>
<li style="list-style: cjk-ideographic !important;">cjk-ideographic</li>
<li style="list-style: hiragana !important;">hiragana</li>
<li style="list-style: katakana !important;">katakana</li>
<li style="list-style: hiragana-iroha !important;">hiragana-iroha</li>
<li style="list-style: katakana-iroha !important;">katakana-iroha</li>
<li style="list-style: inherit !important;">inherit</li>
</ul>
  • none
  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • lower-greek
  • lower-latin
  • upper-latin
  • hebrew
  • armenian
  • georgian
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha
  • inherit

CSS list-style-position 属性

属性介绍

|值|描述 |—– |inside|列表项目标记放置在文本以内,且环绕文本根据标记对齐。 |outside|默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 |inherit|规定应该从父元素继承 list-style-position 属性的值。

示例

<ul>
<li style="list-style-position: inside !important;">inside</li>
<li style="list-style-position: outside !important;">outside</li>
<li style="list-style-position: inherit !important;">inherit</li>
</ul>
  • inside
  • outside
  • inherit

CSS list-style-image 属性

属性介绍

|值|描述 |—– |URL|图像的路径。 |none|默认。无图形被显示。 |inherit|规定应该从父元素继承 list-style-image 属性的值。

标题:玩玩无序列表ul和有序列表ol
作者:mryqu
声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处!

#html# #css# #列表# #ul# #ol#
FilenameFilter和FileFilter介绍
数据库非XA驱动和XA驱动列表
  • 文章目录
  • 站点概览

Programmer & Architect

662 日志
27 分类
1472 标签
GitHub Twitter FB Page
    • CSS list-style-type 属性
    • CSS list-style-position 属性
    • CSS list-style-image 属性
© 2009 - 2023 Mryqu's Notes
Powered by - Hugo v0.120.4
Theme by - NexT
0%