7.1  在Web页面中使用有序、无序、定义列表

　　（1）有序列表

　　有序列表中的每一个列表项之前，都以一个数字或字母作为编号。

 <ol>

     <li>树莓</li>

     <li>草莓</li>

     <li>苹果</li>

 </ol>

　　在列表项中并没有包含任何数字编号，这是因为我们已经使用ol元素告诉浏览器这是一个有序列表。当浏览器看到这个有序列表时，就知道在每一个列表项之前放置一个数字作为编号。

　　有序列表编号的默认类型是阿拉伯数字，但可以使用type属性改变它。type属性可能的取值：

  • 1：阿拉伯数字（1,2,3...）
  • a：小写字母（a，b，c...）
  • A：大写字母（A，B，C...）
  • i：小写罗马字母（i，ii，iii...）
  • I：大写罗马字母（I，II，III...）

　　还可以使用start属性来定义有序列表编号的起始数字或字母。默认的起始编号是数字1。要修改起始编号，只需在ol标记中添加start属性。即使type属性可能是其它值，而不是阿拉伯数字，但start属性的值总是一个整数。

 <ol type="a" start="3">

     <li>树莓</li>

     <li>草莓</li>

     <li>苹果</li>

 </ol>

　　如果想单独改变某个列表项的编号值——比如，在列表中想使用字母g对第三个列表项进行编号，只需在该列表项的li标记中调价value属性即可。与start属性一样，value属性的值也总是一个整数。

 <ol type="a" start="3">

     <li>树莓</li>

     <li>草莓</li>

     <li value="8">苹果</li>

 </ol>

　　通过在<ol>中添加reversed属性，还可以完全反转列表项编号的顺序。在这种情况下，列表项的编号将是3,2,1，而不是默认的1,2,3。

 <ol reversed>

     <li>树莓</li>

     <li>草莓</li>

     <li>苹果</li>

 </ol>

　　（2）无序列表

　　除了在无序列表中不使用数字或字母作列表项的编号之外，无序列表与有序列表非常类似。无序列表中并不依赖列表项的顺序来表示重要性，无序列表在每一个列表项之前放置一个项目符号。

 <ul>

     <li>树莓</li>

     <li>草莓</li>

     <li>苹果</li>

 </ul>

　　在无序列表中，依然使用li元素来标识列表中的每一个列表项，无序列表使用ul元素进行标识，而不是ol元素。除此之外，用于创建无序列表和有序列表的代码相同。

　　（3）定义列表

　　在HTML中还可以创建第三种表，称为定义列表。顾名思义，定义列表用于显示术语及其定义。使用dl元素来创建定义列表，使用dt元素来包含定义术语，使用dd元素来包含实际的定义数据。

 <dl>

     <dt>W3C</dt>

     <dd>The World Wide Web Consortium was created in 1994 to develop standards and protocols for the World Wide Web.</dd>

     <dt>HTML</dt>

     <dd>Hypertext Markup Language is the authoring language used to create documents for the World Wide Web.</dd>

 </dl>

7.2  在Web页面中组合并嵌套多种类型的列表

　　在一个列表中还可以嵌套另一个列表，甚至在一种类型的列表中也可以嵌套另一种类型的列表。在一个列表中包含另一个列表，就是嵌套（nesting）的列表。

 <ol type="I">

     <li>Introduction</li>

     <li>Part I

         <ol type="A">

             <li>Dexcription</li>

             <li>Example</li>

             <ol type="1">

                 <li>Reference One</li>

                 <li>Reference Two</li>

             </ol>

         </ol>

     </li>

     <li>Part 2</li>

     <li>Summary</li>

 </ol>

7.3  定义列表样式

7.3.1  定制项目符号

　　格式化列表时，有三个属性特别有用，这三个属性只能用于格式化列表，而不能用于其它HTML元素：

  • list-style-img：将列表项之前的项目符号修改为指定的图片（可能的取值：url）
  • list-style-position：标识列表项中文本行的缩进方式（可能的取值：inside、outside）
  • list-style-type：改变每一个列表项之前的项目编号或所使用的字符（可能的取值：none、disc、circle、square、decimal...）
 <ol type="1">

     <li style="list-style-position: inside;">Reference One</li>

     <li style="list-style-type: square;">Reference Two</li>

 </ol>

7.3.2  定制间距
　　对于列表，margin属性和padding属性尤为重要，margin属性将影响整个列表项四周的间距，而padding属性将影响该列表四周的间距。

　　当在ul或ol标记中添加margin属性时，margin属性将影响整个列表四围的间距。但是当将其用于li标记时，margin属性将影响每一个列表项四围的间距。

　　padding属性用于控制列表项中文本四围与列表项边界之间的缓冲间距。

7.3.3  定制整个列表的布局

　　（1）垂直导航

　　改变列表的布局，最常见的原因就是将列表作为一个导航栏（navigation bar）使用。

 <!DOCTYPE html>

 <html>

 <head>

     <title>Vertical Nav</title>

     <meta charset="utf-8">

     <style type="text/css">

         body{

             font-family: '微软雅黑';

             font-size: 20px;

         }

         #navlist{

             border-bottom: 3px solid #ccc;

             width: 350px;

             padding-left: 0px;

             margin-left: 0px;

         }

         #navlist li{

             border-top: 2px solid #666;

             margin: 0;

             line-height: 200%;

         }

         #navlist li a{

             color: #900;

             padding-left: 15px;

             text-decoration: none;

             display: block;

         }

         #navlist li a:hover{

             color: #fff;

             background-color: #333;

         }

         .active{

             background-color: #900;

             color: #fff;

             padding-left: 15px;

         }

     </style>

 </head>

 <body>

     <ul id="navlist">

         <li class="active">Home</li>

         <li><a href="">School Calendar</a></li>

         <li><a href="">School Day Weather</a></li>

         <li><a href="">Class Notes and Supply Lists</a></li>

         <li><a href="">Teachers</a></li>

         <li><a href="">School Profile</a></li>

         <li><a href="">Bus Schedules</a></li>

     </ul>

 </body>

 </html>

　　（2）水平导航

　　默认情况下列表在页面上以垂直方式显示，其原因在于在HTML中列表是一个块级元素，块级元素将自动填充可用空间。只需使用display：inline样式属性设置，将列表定义为一个内联元素，而不是一个块级元素，就可以让列表以水平方式显示。

 <!DOCTYPE html>

 <html>

 <head>

     <title>Horizontal Nav</title>

     <meta charset="utf-8">

     <style type="text/css">

         body {

             font-family: '微软雅黑';

             font-size: 20px;

             }

         #navlist li {

             list-style-type: none;

             display: inline;

             width: 200px;

         }

         #navlist li a {

             color: #fff;

             background-color: #900;

             padding: .2em .4em;

             text-decoration: none;

         }

         #navlist li a:hover {

             color: #fff;

             background-color: #333;

         }

         .active {

             border: 1px solid #900;

             color: #000;

             padding: .2em 1em;

         }

     </style>

 </head>

 <body>

     <ul id="navlist">

         <li class="active">Home</li>

         <li><a href="">About Usss</a></li>

         <li><a href="">Services</a></li>

         <li><a href="">Clients</a></li>

         <li><a href="">Contact Us</a></li>

     </ul>

 </body>

 </html>

　　

[HTML/HTML5]7 使用列表的更多相关文章

  1. HTML5样式和列表、CSS链接的四种状态

    一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...

  2. Mozilla对HTML5规范支持列表

    翻译自Mozilla Developer Network 在2009年10月28日,HTML 5规范草稿在网络超文本应用技术工作组(WHATWG)中基本出于最后定稿阶段,这意味着HTML 5标准基本定 ...

  3. HTML5中 HTML列表／块／布局 韩俊强的博客

    从简单到复杂HTML5详解:每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 1.HTML列表 1.有序 2.无序 3.有序star属性 4.有序无序列表 代码: ...

  4. HTML5 第二章 列表和表格和媒体元素

    列表: (1)什么是列表? 列表就是信息资源的一种展示形式. (2)无序列表: 语法: <ul> <li>第1项</li> <li>第2项</li ...

  5. 50个最受网友欢迎的HTML5资源下载列表

    完整附件下载地址:http://down.51cto.com/data/413867 附件预览: HTML 5游戏源码精选(共含9个游戏源码) http://down.51cto.com/zt/227 ...

  6. HTML5自学之列表

    第5章. 网页列表与段落设计网页列表与段落是网页中的主要也是最常用的元素,其中,网页列表可以有序地编排一些信息资源,使其结构化和条理化,并以列表的样式显示出来,以便浏览者能更加快捷的获得相应信息.网页 ...

  7. css3 html5 手机设备 列表的弹回和加速移动

    <style type="text/css"> * { margin: 0; padding: 0; } .min { width: 350px; height: 40 ...

  8. 【转】39个让你受益的HTML5教程

    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟 ...

  9. 39个让你受益的HTML5教程

    1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!) By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成 ...

随机推荐

  1. jquery checkbox 实现单选

    最近在用javascript的时候发现网上实现checkbox单选的代码都已经过时了. 用着几年前的代码发现根本不行了 原因是jquery api已经更改 http://api.jquery.com/ ...

  2. 压力测试工具JMeter入门教程

    1.Jmeter 概要描叙 jmeter 是一款专门用于功能测试和压力测试的轻量级测试开发平台.多数情况下是用作压力测试,该测试工具在阿里巴巴有着广泛的使用,估计是不要钱吧,哈哈,功能上来说,整个平台 ...

  3. Canny边缘检测

    1.Canny边缘检测基本原理      (1)图象边缘检测必须满足两个条件:一能有效地抑制噪声:二必须尽量精确确定边缘的位置.      (2)根据对信噪比与定位乘积进行测度,得到最优化逼近算子.这 ...

  4. 数据结构 B-树和B+树的应用：数据搜索和数据库索引

    B-树 1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树:⑴树中每个结点至多有m 棵子树:⑵若根结点不是叶子结点 ...

  5. symfony安装笔记

    下载http://symfony.com/download,这里版本是2.8 将D:\ApacheServer\php路径添加到环境变量path中,在cmd命令行中可以执行php命令 打开php.in ...

  6. js函数的传参是按值传对递

    根据js高级程序设计第三版编写,对于函数的参数只能按值传递是这样解释的: ECMAScript 中所有函数的参数都是按值传递的.也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另 ...

  7. this关键字简单应用

    class PersonDemo3 { public static void main(String[] args) { Person p=new Person("张三",22); ...

  8. 简单讲解MVC(视图/模型/控制器)

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...

  9. hive相关

    HIVE JOIN:http://blog.csdn.net/yfkiss/article/details/8073608 HIVE资料: 一条记录map阶段输出KV,shuffle sort,输出K ...

  10. mysql查看修改字符集

    1.列出MYSQL支持的所有字符集: SHOW CHARACTER SET; 2.当前MYSQL服务器字符集设置 SHOW VARIABLES LIKE 'character_set_%'; 3.当前 ...