zoukankan      html  css  js  c++  java
  • CSS列表属性

    list-style-type

    list-style-type表示定义列表标记的类型,默认值disc表示一个实心圆点。一些常用的属性值:none无任何标记,disc实心圆,circle空心圆,square实心方块,decimal从1开始的数字(1,2,3等),decimal-leading-zero以0开头的数字(01,02,03等), lower-alpha小写英文字母(a, b, c等),upper-alpha大写英文字母(A,B.C等)

    list-style-position

    <ul>
      <li>你好</li>
      <li>你好</li>
      <li>你好</li>
    </ul>
    <ul style="list-style-position: inside;">
      <li>你好</li>
      <li>你好</li>
      <li>你好</li>
    </ul>
    

    结果:

    • 你好
    • 你好
    • 你好
    • 你好
    • 你好
    • 你好

    该属性定义列表标记项的位置,默认值outside表示标记放在文本外,也就是li元素的外边。属性值inside表示标记放在文本内,这个值比较常用。inherit继承

    list-style-image

    用一个图片定义列表项标记,它会覆盖默认的实心圆,默认值none

    ul {
      list-style-image: url('a.jpg');
      list-style-type: circle;
    }
    

    除了list-style-image还定义了list-style-type,这样即使图片出错了也能保证布局不会影响,推荐的做法。

    列表相关的CSS属性默认都会继承父元素的值

    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    图片自适应居中
    常用正则记录
    继承
    HTML学习
    js原型与原型链理解
    mac 及mac下开发常用快捷键命令
    服务器返回的各种HTTP状态码介绍(转)
    webstorm使用笔记
    《Javascript Dom 高级程序设计》读书笔记
    ECMAScript6学习笔记
  • 原文地址:https://www.cnblogs.com/yesyes/p/15356392.html
Copyright © 2011-2022 走看看