web前端开发--列表

列表类型与标记符号:

列表类型 标记符号 备注
无序列表 <ul></ul> 常用
菜单列表 <menu></menu> 不常用
目录列表 <dir></dir> 不常用
有序列表 <ol></ol> 常用
定义列表 <dl></dl> 常用

 

 

 

 

 

 

 

无序列表:

基本语法:

<ul  type=" ">

  <li  type=" ">项目名称</li>

  <li  type=" ">项目名称</li>

  <li  type=" ">项目名称</li>

  ……

</ul>

无序列表标记type属性的值及说明:

说明
disc 实心圆形
circle 空心圆形
square 实心正方形

 

 

 

 

 

有序列表:

基本语法:

<ol  type=" "  start=" ">

  <li  type=" "  value="n">项目名称</li>

  <li  type=" "  value="n">项目名称</li>

  <li  type=" "  value="n">项目名称</li>

  ……

</ol>

有序列表属性、值及说明:

属性 说明
type 1 有序列表中列表项的项目符号为数字列表
A 有序列表中列表项的项目符号为大写字母列表
a 有序列表中列表项的项目符号为小写字母列表
Ι 有序列表中列表项的项目符号为大写罗马字母列表
i 有序列表中列表项的项目符号为小写罗马字母列表
start 数值 有序列表中列表项的起始数字

 

 

 

 

 

 

 

 

列表的嵌套(无序列表中嵌套有序列表):

基本语法:

<ul>

  <li>项目名称

    <ol>

      <li>项目名称</li>

      <li>项目名称

        <ul>

          <li>项目名称</li>

          <li>项目名称</li>

          ……

        </ul>

      </li>

     <li>项目名称</li> 

    </ol>

  </li>

  <li>项目名称</li>

  <li>项目名称</li>

</ul>

 

定义列表:

基本语法:

<dl>

  <dt>项目1</dt>

      <dd>项目描述1</dd>

      <dd>项目描述2</dd>

      <dd>项目描述3</dd>

   <dt>项目2</dt>

      <dd>项目描述1</dd>

      <dd>项目描述1</dd>

      ……

  <dt>项目n</dt>

</dl>

用途:一般用来展示联系人信息

posted on 2018-03-31 16:48  酸菜大战土豆丝儿  阅读(141)  评论(0编辑  收藏  举报

导航