CSS列表属性允许你放置 改变列表项标志 或者将图像作为列表项标志。

CSS列表

从某中意义上讲 不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。

由于列表如此多样 这使得列表相当重要 所以说CSS中磊表的样式不太丰富确实是不完美的。

列表类型

要影响列表的样式 最简单的办法就是改变其标志类型。

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型 可以使用属性 list-style-type:

ul {list-style-type : square}

上面的声明把无需列表中的标志项改为方块。

列表项图像：

有时 常规的标志是不够的 你可能想对标志使用一个图像。这时可以使用属性

list-style-image

ul li {list-style-image:url(xxx.gif)}

只需要简单的使用一个URL()值 就可以使用图像作为标志。

列表标志的位置：

列表标志的位置使用属性 list-style-position来实现。

简写列表样式

为简单起见 可以将以上三个列表属性合并为一个方便的属性 list-style 就想这样

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

list-style的值可以按照任何顺序出现 而且这些值都可以忽略 只要提供一个值。其他的值就会填入默认值。

CSS列表实例：

1:无序列表中的不同类型的列表标记：

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ul.circle {

                list-style-type: circle;

            }

            ul.square {

                list-style-type: square;

            }

            ul.disc {

                list-style-type: disc;

            }

        </style>

    </head>

    <body>

        <ul class="disc">

            <li>苹果</li>

            <li>香蕉</li>

            <li>可口可乐</li>

        </ul>

        <ul class="square">

            <li>苹果</li>

            <li>香蕉</li>

            <li>可口可乐</li>

        </ul>

        <ul class="circle">

            <li>苹果</li>

            <li>香蕉</li>

            <li>可口可乐</li>

        </ul>

    </body>

</html>

2:在无序列表中的不同类型的列表标志

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ol.decimal {list-style-type: decimal}

            ol.lroman {list-style-type: lower-roman}

            ol.uroman {list-style-type: upper-roman}

            ol.lalpha {list-style-type: lower-alpha}

            ol.ualpha {list-style-type: upper-alpha}

        </style>

    </head>

    <body>

        <ol class="decimal">

            <li>咖啡</li>

            <li>茶</li>

            <li>可口可乐</li>

        </ol>

        <ol class="lroman">

            <li>咖啡</li>

            <li>茶</li>

            <li>可口可乐</li>

        </ol>

        <ol class="uroman">

            <li>咖啡</li>

            <li>茶</li>

            <li>可口可乐</li>

        </ol>

        <ol class="lalpha">

            <li>咖啡</li>

            <li>茶</li>

            <li>可口可乐</li>

        </ol>

        <ol class="ualpha">

            <li>咖啡</li>

            <li>茶</li>

            <li>可口可乐</li>

        </ol>

    </body>

</html>

3:将图像作为列表标志项

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ul.decimal {list-style-image: url(../img/1.png);}

        </style>

    </head>

    <body>

        <ul class="decimal">

            <li>咖啡</li>

            <li>茶</li>

            <li>可口可乐</li>

        </ul>

    </body>

</html>

4:定义列表标志项的位置

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*靠里*/
            ul.inside {list-style-position: inside;}
            /*靠外*/
            ul.outside {list-style-position: outside;}
        </style>
    </head>
    <body>
        <p>该列表的 list-style-position 的值是 "inside"：</p>
        <ul class="inside">
            <li>Earl Grey Tea - 一种黑颜色的茶</li>
            <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
            <li>Honeybush Tea - 一种令人愉快的果味茶</li>
        </ul>
        <p>该列表的 list-style-position 的值是 "outside"：</p>
            <ul class="outside">
            <li>Earl Grey Tea - 一种黑颜色的茶</li>
            <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
            <li>Honeybush Tea - 一种令人愉快的果味茶</li>
        </ul>
    </body>
</html>

HTML 学习笔记 CSS(列表)的更多相关文章

  1. amazeui学习笔记--css（常用组件8）--列表list

    amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...

  2. amazeui学习笔记--css（常用组件5）--评论列表Comment

    amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...

  3. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  4. amazeui学习笔记--css（常用组件14）--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  5. amazeui学习笔记--css（常用组件12）--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  6. amazeui学习笔记--css（常用组件9）--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  7. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  8. amazeui学习笔记--css（HTML元素1）--按钮Button

    amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...

  9. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

随机推荐

  1. objective-c系列-动态类型和动态绑定

    /* 静态类型: 变量的类型在编译之时就被确定下来. 动态类型: 对象的类型由对象的内存里的某个结构数据来决定它是什么类型, 而不是在编译之时就被确定下来的数据类型. 对象的类型只有在运行时才知道. ...

  2. 【代码笔记】iOS-传身份证号码可返回生日字符串

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. NS ...

  3. 详解 Spotlight on MySQL监控MySQL服务器

    前一章详解了Spotlight on Unix 监控Linux服务器 ,今天再来看看Spotlight on MySQL怎么监控MySQL服务器. 注:http://www.cnblogs.com/J ...

  4. 关于RichTextField2.0表情显示错乱的问题！

    flex4.5和4.6在textField.getCharBoundaries()这个方法的返回结果上是不一样的.getCharBoundaries()方法只会返回被渲染出来的文字的边框信息,也就是说 ...

  5. 表格table嵌套，边框合并问题

    [问题] 外层table与内层table嵌套,内外表格都需边框时,设置“border=1”,但边框会重复,造成某些地方边框粗,有些地方边框细的问题.   [解决办法]: 外表格样式: <tabl ...

  6. 安装centos 7后恢复windows 2008R2 (Windows7)启动项

    安装CentOS 7,安装之后发现Win2008R2的启动项不见了(Windows7同理).一般安装Linux过程中会自动识别windows系统并添加引导项,centos的问题在于默认不支持ntfs分 ...

  7. 字符输出流Writer简要概括

    偷个懒,直接参考上篇字符输入流Reader的形式,其实Reader和Writer本来就大同小异: 字符输出流Writer 本篇将对JAVA I/O流中的字符输出流Writer做个简单的概括: 总得来说 ...

  8. Centos中jdk的环境配置

    在Centos中,进行配置jdk的环境,这个还是折腾了我听挺久的.特别是,在一次配置中,导致后来我的root用户无法登录,并且用其他普通用户登录,使用su - root切换到root用户,都无法使用l ...

  9. 0006 《SQL必知必会》笔记02-计算字段与函数

    1.从数据库中检索出的数据往往并不是最后要展示的格式,可以在数据库端或者客户端应用程序中完成转换和格式化,但一般说来,在数据库服务器中完成要快很多. 2.拼接字段:将几个值连接到一起构成单个值.Ora ...

  10. SQL语句查询某表的所有字段及数据类型

    SQL语句查询某表的所有字段及数据类型 SELECT name AS column_name , TYPE_NAME(system_type_id) AS column_type , max_leng ...