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. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  2. iOS多线程中,队列和执行的排列组合结果分析

    本文是对以往学习的多线程中知识点的一个整理. 多线程中的队列有:串行队列,并发队列,全局队列,主队列. 执行的方法有:同步执行和异步执行.那么两两一组合会有哪些注意事项呢? 如果不是在董铂然博客园看到 ...

  3. LBS上传到百度地图

    准备: 第一步:注册百度地图开发者账号 第二步:使用开发者账号注册相对应秘钥 在LBS后台添加所需要上传的字段 1,添加WebClientHelper帮助类 2,LBS帮助类 private stri ...

  4. Android NDK编译本地文件以及引用第三方so文件

    LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LOCAL_LDLIBS :=-llog LOCAL_MODULE := DeviceAPI LO ...

  5. Android 6.0 运行时权限处理

    在运行时请求权限 从Android 6.0(API级别23)开始,用户权限授予应用程序在应用程序运行时,当他们安装程序.这种方法简化了应用程序的安装过程,因为用户不需要安装或更新应用程序时授予权限.这 ...

  6. 【代码笔记】iOS-轮询弹出框

    一,效果图. 二,工程图. 三,代码. RootViewController.m #import "RootViewController.h" //加入弹出框的头文件 #impor ...

  7. CMMI4级实践中的5个经典问题及解答

    这五个问题相当经典而且比较深,需要做过CMMI4.5级的朋友才能看懂这些问题.这5个问题是一位正在实践CMMI4级的朋友提出来的,而解答则是我的个人见解. 五个疑问是:   A.流程,子流程部分不明白 ...

  8. #一周五# win10通用平台,无处不在的Xamarin,msbuild开源,MVP卢建晖的Asp.NET 5系列 (视频)

    又到周五,本周博主的大部分时间都花在深圳了.最近winhec的消息太多了,我只想补充一点,就是winhec时隔7年之后回归,大多数的媒体都还在沿用之前的“硬件工程大会(Hardware Enginee ...

  9. Windows Azure服务

    一. 存储服务 Azure存储服务是云端的文件存储服务,通过http/https访问和权限控制有以下三种特性 1.本地数据中心冗余 (Local Redundant Storage,LRS) 在一个位 ...

  10. JavaSpring

    http://www.cnblogs.com/suoning/p/5656403.html   1.序列化 JSON.stringify(obj)   序列化 JSON.parse(str)     ...