`
huanghuaibin
  • 浏览: 68329 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

HTML中UL、OL、LI的用法

    博客分类:
  • CSS
阅读更多

ul: unordered lists
ol: ordered lists
li: Lists

ol 有序列表。

<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
  表现为:

1……
2……
3……
  ul 无序列表,表现为li前面是大圆点而不是123

<ul>
<li>……</li>
<li>……</li>
</ul>
  很多人容易忽略 dl dt dd的用法

  

     dl 内容块
  dt 内容块的标题
  dd 内容
  可以这么写:

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
  dt 和dd中可以再加入 ol ul li和p
  理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。

 

LI代码的格式化:

      A).运用CSS格式化列表符:

以下是引用片段:
ul li{
list-style-type:none;
}

      B).如果你想将列表符换成图像,则:

以下是引用片段:
ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}

      C).为了左对齐,可以用如下代码:

以下是引用片段:
ul{
list-style-type:none;
margin:0px;
}

      D).如果想给列表加背景色,可以用如下代码:

以下是引用片段:
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}


      E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码:

以下是引用片段:
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }说明:display:block;这一行必须要加的,这样才能块状显示!


      F).LI中的元素水平排列,关键FLOAT:LEFT:

以下是引用片段:
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}

      <ul><li>的区别

      <LI> 的参数设定(常用):

      例如: <li type="square" value="4">

      type="square"

      只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type="disc":

以下是引用片段:
      符号 是当 type="disc" 时的列项符号。
      符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
      符号 是当 type="square" 时的列项符号。
      value="4"

      只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。

      <UL>称为无序清单标记。

      所谓无序清单就是在每一项前面加上 、、等符号,故又称符号清单。

      <UL> 的参数设定(常用):

      例如: <UL type="square">

      type="square"

      设定符号款式,其值有三种,如下,内定为 type="disc":

以下是引用片段:
      符号 是当 type="disc" 时的列项符号。
      符号 是当 type="circle" 时的列项符号。
      符号 是当 type="square" 时的列项符号。


      <ul>是项目列表,<li>是列表项,项目列表就是用符号来列的,所以你列出来默认的就是黑点,还有一个是<ol>这个是编号列表,用数字来列的,也是用<li>做列表项

      <li>是 list item 即列表项,但列表有很两种,所以外面得有 <ul> 或者 <ol> 用来区别无序列表(小点点)和有序列表(1,2,3...)。

分享到:
评论

相关推荐

    jquery 折叠ul li

    ### 使用jQuery实现ul li列表的折叠效果 在前端开发中,为了提高用户体验并优化界面布局,经常需要实现一些动态效果,比如菜单项的展开与折叠。这种效果可以通过jQuery轻松实现。接下来,我们将详细探讨如何利用...

    CSS的ul和li实现横向排列和去掉li的点

    首先,我们来探讨如何使用CSS实现无序列表ul和列表项li的横向排列以及如何去掉li项前面的默认样式——点。这一需求在网页设计中是非常常见的,特别是当需要制作水平导航栏时。 在CSS中,为了实现ul的横向排列,我们...

    HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法

    HTML &lt;dl&gt; 标签 #定义和用法 &lt;dl&gt; 标签定义了定义列表(definition list)。&lt;dl&gt; 标签用于结合 &lt;dt&gt; (定义列表中的项目)和 &lt;dd&gt; (描述列表中的项目)。...复制代码代码如下:&lt;ul&gt; &lt;li&gt;Coffee&lt;/li&gt; &lt;li&gt;Tea&lt;/li&gt; &lt;

    HTML li 标签.docx

    HTML li 标签定义列表项目,可以用在有序列表(&lt;ol&gt;)和无序列表(&lt;ul&gt;)中。它可以单独使用,也可以与其他标签结合使用,如 &lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt; 等。li 标签的基本语法如下: ```html &lt;ol&gt; &lt;li&gt;项目 1&lt;/li&gt; &lt;li&gt;...

    CSS中的ul与li样式详解共5页.pdf.zip

    这份名为"CSS中的ul与li样式详解共5页.pdf.zip"的压缩文件很可能包含了关于如何使用CSS来定制这些列表元素样式的深入讲解。 `&lt;ul&gt;` 标签用于创建一个无序列表,通常显示为带有圆点或小方块的项目符号。这些列表可以...

    div+css+ul-li制作横向导航栏

    3. `&lt;li&gt;`:列表项,用于在`&lt;ul&gt;`或有序列表`&lt;ol&gt;`中定义单个条目。 接下来,我们将逐步构建这个横向导航栏: **步骤1:HTML结构** 首先,我们需要创建一个`&lt;div&gt;`作为导航栏容器,然后在其中嵌套一个`&lt;ul&gt;`标签...

    dl,dt,dd,ul,li,ol区别及应用

    ol有序列表:&lt;ol&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;/ol&gt;表现为:1……2……3……ul无序列表,表现为li前面是大圆点而不是123:&lt;ul&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;/ul&gt;很多人容易忽略dldtdd的用法:dl内容块dt内容...

    HTML li 标签.doc

    HTML `&lt;li&gt;` 标签是用于创建列表项目的元素,它在有序列表 `&lt;ol&gt;` 和无序列表 `&lt;ul&gt;` 中起到核心作用。这个标签使得文本以特定的格式呈现,例如在无序列表中通常显示为圆点、方块或圆圈,在有序列表中则显示为数字或...

    ul, li, a怎么用(谷歌/火狐/ie6/7/8)中测试

    这里,我们主要关注的是HTML中的`&lt;ul&gt;`, `&lt;li&gt;`, `&lt;a&gt;`这三个元素在不同浏览器中的表现差异,并介绍一些解决兼容性问题的技巧。 首先,我们来理解一下这三个HTML元素的基本作用: - `&lt;ul&gt;` 代表无序列表,它是用来...

    详解HTML5中ol标签的用法

    在 HTML 4.01 中,`&lt;ol&gt;` 标签的几个属性(`start`, `compact`, `type`)被不赞成使用,但在 HTML 5 中,它们得到了不同的处理: - **start 属性**:在 HTML 5 中,`start` 属性是允许的,可以用来指定列表的起始...

    列表li上下交换位置动画

    首先,我们要明白`&lt;li&gt;`元素是HTML列表(无序列表`&lt;ul&gt;`或有序列表`&lt;ol&gt;`)中的基本组成部分,用于展示条目信息。在需要用户交互或动态排序的场景中,提供点击上移或下移的功能可以极大地提升用户体验。 要实现这个...

    HTML从入门到精通 第4章 列表

    在HTML中,列表是非常重要的元素之一,它们可以帮助用户更清晰地组织和展示信息。本章节将详细介绍HTML中的三种主要列表类型:无序列表、有序...掌握这些列表的使用方法对于创建结构良好且易于理解的网页至关重要。

    设置<li>让页面同时显示两列

    首先,`&lt;li&gt;`元素是HTML中无序列表(`&lt;ul&gt;`)或有序列表(`&lt;ol&gt;`)的组成部分,用于创建项目列表。在常规的列表中,每个`&lt;li&gt;`元素都会在新的一行开始。但是,为了实现两列布局,我们需要调整它们的默认行为。 传统...

    jQuery如何取网页中li的值.zip

    在HTML中,`&lt;li&gt;`(list item)元素用于创建无序列表(`&lt;ul&gt;`)或有序列表(`&lt;ol&gt;`)中的项目。每个`&lt;li&gt;`都代表列表的一个条目,可以包含文本、图像或其他HTML元素。 jQuery提供了多种方法来选取和操作DOM元素,...

    CSS 用ul li做圆角表格

    本文档将详细讲解如何使用HTML中的`&lt;ul&gt;`和`&lt;li&gt;`元素来构建一个具有圆角效果的表格,并通过CSS样式对表格进行美化。这种方法相较于传统的`&lt;table&gt;`标签更具灵活性,并能够更好地适应现代Web设计的需求。 #### 二、...

    第21章 加强版的OL列表元素

    最后,我们需要注意的是,尽管加强版的OL列表元素可以极大地提升页面的可读性和用户体验,但在使用过程中应遵循网页设计的最佳实践,确保列表结构清晰,易于理解,并兼顾无障碍性需求。 在提供的链接中,你可能找到...

    LI下拉框

    `&lt;li&gt;` 是HTML中的列表项标签,通常与`&lt;ul&gt;`(无序列表)或`&lt;ol&gt;`(有序列表)一起使用。在下拉框的上下文中,`&lt;li&gt;`元素通常被用作可选选项,隐藏在折叠菜单之下,只有当用户触发某些交互(如点击按钮或悬停)时才...

    li列表隔行不同色CSS设计

    在网页设计中,为了提升用户体验,我们经常需要对列表(如`&lt;ul&gt;`或`&lt;ol&gt;`)进行美化,使其在视觉上更具吸引力。"li列表隔行不同色CSS设计"是一个常见的需求,目的是使列表的每一行在颜色上有所区分,特别是鼠标悬停...

Global site tag (gtag.js) - Google Analytics