CSS_列表

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54730634 list-style-type改变列表项的标志。
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54730634

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 小写英文字母(a, b, c, d, e, 等。)
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, 等。(日文片假名)

<html>
    <head>
        <style type="text/css">
            .disc{
                list-style-type:disc;
            }
            .circle{
                list-style-type:circle;
            }
            .square{
                list-style-type:square;
            }
            .decimal{
                list-style-type:decimal;
            }
            .lower-roman{
                list-style-type:lower-roman;
            }
            .lower-alpha{
                list-style-type:lower-alpha;
            }
            .lower-greek{
                list-style-type:lower-greek;
            }
            .lower-latin{
                list-style-type:lower-latin;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="disc">disc 实心圆,默认</li>
            <li class="circle">circle 空心圆</li>
            <li class="square">square 方块</li>
            <li class="decimal">decimal 数字</li>
            <li class="lower-roman">lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) </li>
            <li class="lower-alpha">lower-alpha 小写英文字母(a, b, c, d, e, 等。)  </li>
            <li class="lower-greek">lower-greek 小写希腊字母(alpha, beta, gamma, 等。) </li>
            <li class="lower-latin">lower-latin 小写拉丁字母(a, b, c, d, e, 等。) </li>
        </ul>
    </body>
</html>

list-style-position

inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

<html>
    <head>
        <style type="text/css">
            .inside{
                list-style-position:inside;
            }
            .outside{
                list-style-position:outside;
            }
        </style>
    </head>
    <body>
    <ul class="inside">
        <li>inside inside inside</li>
        <li>inside inside inside</li>
        <li>inside inside inside</li>
    </ul>

    <ul>
        <li>normal normal normal</li>
        <li>normal normal normal</li>
        <li>normal normal normal</li>
    </ul>

    <ul class="outside">
        <li>outside outside outside</li>
        <li>outside outside outside</li>
        <li>outside outside outside</li>
    </ul>

    </body>
</html>

列表位置

list-style-image

以图片作为标志

list-style-image:url(url);

none 无
inherit 继承

<html>
    <head>
        <style type="text/css">
            .image{
                list-style-image:url("素材/五角星.png");
            }
        </style>
    </head>
    <body>

    <ul class="image">
        <li>图片 图片 图片 </li>
        <li>图片 图片 图片 </li>
        <li>图片 图片 图片 </li>
    </ul>

    </body>
</html>

图片

list-style

简写,将所有属性按照一定顺序写在list-style后,可以不设置某个值,未设置的值将采用默认值。

li {list-style : url(example.gif) square inside}

相关文章
|
前端开发
CSS实现列表滚动效果
CSS实现列表滚动效果
618 0
|
前端开发 开发者
CSS列表属性:list-style系列属性详解
CSS列表属性:list-style系列属性详解
1095 40
|
前端开发
纯css3经典列表式手风琴插件
这是一款十分经典的纯css3列表手风琴插件。该插件使用css兄弟选择器和:target伪类来实现。
|
前端开发
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
该博客文章详细介绍了HTML和CSS的基础知识,包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法,并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
前端开发
CSS列表
【5月更文挑战第4天】CSS列表。
146 3
|
前端开发
CSS列表属性
CSS列表属性。
189 5
|
前端开发
css实战——清除列表中最后一个元素的下边距
css实战——清除列表中最后一个元素的下边距
247 0
编程笔记 html5&css&js 015 HTML列表
编程笔记 html5&css&js 015 HTML列表
166 1

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    567
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    432
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    433
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    282
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    546
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    724
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1405
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    314
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1167
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    508