看书《DIV+CSS商业案例与网页布局开发精讲》_制作列表和表单1_随手笔记

一、列表

1、列表最基本的功能是制作文章的标题，

随着css的列表属性被引入，列表的样式被赋予了很多新的属性，

甚至超过了其本身的功能限制。例如，使用列表标签制作导航栏

2、列表分为3种类型：

（1）有序列表

（2）无序列表

（3）定义列表（即字典列表）

3、有序列表：

有序列表的标记用<ol>表示，每个列表项用<li>表示

一般用来描述一些操作步骤

<ol>

<li>有序列表项</li>

<li>有序列表项</li>

......

</ol>

4、无序列表：

无序列表的标记用<ul>表示，每个列表项用<li>表示无序

<ul>

<li>有序列表项</li>

<li>有序列表项</li>

......

</ul>

5、定义列表：

定义列表的标记用<dl>表示，定义文字用<dt>表示，每个列表项用<dd>表示

主要用于进行名词解释或名词定义

<dl>

<dt>名词</dt><dd>名词的解释</dd>

<dt>名词</dt><dd>名词的解释</dd>

......

</dl>

6、CSS列表属性

（1）列表项目符号类型属性：list-style-type

  属性值：disc（圆点，默认值）、circle（圆圈）、square（正方形）、decimal（数字）等

（2）列表项目符号图像属性：list-style-image

  属性值：url(图片地址)、none、inherit

  注：为了解决浏览器的兼容问题，使用图片地址来定义列表项目符号的图形属性不多，一般是使列表项目符号图片为空，然后采取其他方式添加图片。

（3）列表项目符号位置属性：list-style-position

  属性值：inside、outside、inherit

  说明：inside：列表项目标记放置在文本内部，且环绕文本根据标记对齐

      outside：列表项目标记放置在文本外部，且环绕文本不根据标记对齐

      inherit：继承

7、当将CSS引入网页进行列表的样式控制后，有序列表和无序列表之间的区别其实并不明显，

      因为无序列表可以通过样式定义变为有序列表，只需改变list-style-type属性

8、overflow溢出属性

属性值：visible默认值、hidden、scroll、auto