HTML & CSS 基础入门知识 列表及其样式

HTML & CSS 基础入门知识 列表及其样式
  网页中漂亮的导航、整齐规范的文章标题列表和图片列表等等。这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表、有序列表和定义列表三种类型。其中,无序列表应用最为广泛,下面,我们一块认识一下HTML列表。
 
  列表在文档编辑中也是十分常见的,我们可以结合word里的列表来对比学习HTML的列表元素。在word中有符号列表、编号列表、多级列表。在HTML中也提供了三种类型的列表,分别是无序列表、有序列表和定义列表。无序列表没有先后顺序之分,类似word中的符号列表,有序列表用数字或字母作为顺序,类似word中的编号列表,注意:定义列表是不同于word中的多级列表。简单说来,定义列表项可分为上下两部分,上面列出一个项目,下面是该项目的详细内容。
 
  无序列表
 
  无序列表以<ul>标签开始,</ul>标签结束,中间插入若干列表项,列表项以<li>标签开始,</li>标签结束。语法格式如下:
 
  有序列表
 
  有序列表以<ol>标签开始,</ol>标签结束,中间插入若干列表项,列表项以<li>标签开始,</li>标签结束。语法格式如下:
 
  定义列表
 
  定义列表以<dl>标签开始,</dl>标签结束,中间插入的每个列表项都分为两个部分,<dt> </dt>里面添加项目名称,<dd> </dd>里面添加项目内容或描述。定义列表语法格式如下:
 
  无序列表和有序列表的列表项前面都有标记,无序列表的项目前是符号(实心圆、空心圆或实心正方形),有序列表的项目前是编号(可以是数字、字母或罗马数字)。我们有两种方式来设置列表项前的符号类型,一种是直接在HTML的列表标签中设置type属性,另一种是用CSS的方式,设置CSS属性list-style-type。有了CSS,在HTML中设置type属性已经被抛弃了,推荐使用CSS属性list-style-type来设置列表项的标记类型。
 
  注:这三类列表中,无序列表使用最为广泛,常用于导航、文章标题列表、图片列表等有规律列表类内容的排版布局。在CSS属性list-style-type中,还可以设置值为none,表示去除列表项前的符号。

推荐阅读

    计算机主板BIOS设置详细-BIOS知识

    计算机主板BIOS设置详细-BIOS知识,,什么是电脑BIOS,一般电脑主板已经设置完毕后,电脑就开始按del键进入BIOS。系统启动BIOS,即微机的基本输入

    ps基础快捷键大全|ps基本快捷键大全

    ps基础快捷键大全|ps基本快捷键大全,,1. ps基本快捷键大全1、应用程序菜单快捷键之文件,如下图所示:2、应用程序菜单快捷键之编辑,如下图所示

    1394连接是什么1394网络适配器知识

    1394连接是什么1394网络适配器知识,,今天有网友在QQ群中问了这样一个问题:1394连接是什么?。由于笔者对1394连接不清楚,通过百度搜索与谷歌

    快捷键复制表格|快捷键复制表格样式

    快捷键复制表格|快捷键复制表格样式,,快捷键复制表格样式第一步:打开需要复制的excel表。第二步:选中要复制的数据,单击鼠标右键,选择“复制”

    埋雷大师扫雷设置图|扫雷基础教程

    埋雷大师扫雷设置图|扫雷基础教程,,1. 扫雷基础教程1.三个不并排的1中间的格子一定是雷,2周围只有两个没打开的格子这两个一定是雷。2.三个

    电脑主板品牌的一些基本知识

    电脑主板品牌的一些基本知识,,组装的电脑不再是什么奇怪的事情,不再是一个专业的专利,许多普通的电脑用户可以自己组装电脑,但是,毕竟用户电脑

    js设置样式|js设置样式类

    js设置样式|js设置样式类,,js设置样式    javascript改变CSS样式分为局部和全局,分别如下:  一、局部改变样式    有三种方法:直接

    保持笔记本电脑的一些知识和技巧

    保持笔记本电脑的一些知识和技巧,,笔记本的价格比前些年便宜很多,但和其他电脑相比还是贵的,所以我们在使用笔记本时一定要注意它的维护。下