• css中的列表样式


    在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化。

    css中对列表样式主要是对列表项目前列表符号的设置,其语法如下:

    list-style-type : disc | circle | square | decimal |
               lower-roman | upper-roman | lower-alpha | upper-alpha |
               none | armenian | cjk-ideographic | georgian | lower-greek |
              hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha |
               lower-latin | upper-latin

    通过取不同的list-style-type属性值,我们可以得到不同的项目符号。

    例:

    ul { list-style-type:disc;} /*实心圆*/
    
    ul { list-style-type:circle;} /*空心圆*/
    
    ul { list-style-type:square;} /*实心方块*/
    
    ul { list-style-type:none;} /*不显示项目符号*/
    
    ol { list-style-type:decimal;} /*阿拉伯数字*/
    
    ol { list-style-type:lower-roman;} /*小写罗马数字*/
    
    ol { list-style-type:upper-alpha;} /*大写英文字母*/
    

    如果对于css中所规定了的众多列表符号感到不满意,我们呀可以自定义列表的符号

    list-style-image : none | url ( url )
    

    使用这种方式,我们可以为项目列表设置任意的图片为列表符号。这里,我们所设的值为图片文件相对于网页文件的路径或绝对路径(来自网站的文件)。

    在列表样式中最为需要注意的是,列表样式只能在列表标签中设置(ulol),而不能设置在列表的自标签中(li)。

  • 相关阅读:
    [CF1398A-E] Codeforces Round 93
    bzoj3758 数数和bzoj3798 特殊的质数
    P4234 最小差值生成树
    [UOJ274] P6664 温暖会指引我们前行
    P4172 [WC2006]水管局长
    bzoj2959 长跑
    bzoj4998 星球联盟(lct+并查集维护动态双连通性)
    P1501 [国家集训队]Tree II
    link-cut-tree
    fhq-treap,splay 模板
  • 原文地址:https://www.cnblogs.com/wuxiaoshang/p/5774576.html
Copyright © 2020-2023  润新知