`

网页布局中常用的列表元素ul ol li dl dt dd讲解

CSS 
阅读更多
DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好
  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提供了很多元素辅助布局。
分享到:
评论

相关推荐

    div+css布局必了解的列表元素ul ol li dl dt dd详解

    值得注意的是,在dl中不仅可以包含dt和dd,还可以嵌套其他列表元素如ol、ul、li,甚至是段落p,从而实现复杂的嵌套列表结构。 在使用div布局时,我们应尽量减少块级元素div的使用,因为它们与table一样,过多的嵌套...

    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用.doc

    以下将详细介绍HTML列表中的一些主要元素:`&lt;dl&gt;`, `&lt;dt&gt;`, `&lt;dd&gt;`, `&lt;ul&gt;`, `&lt;li&gt;`, 和 `&lt;ol&gt;` 的区别及应用。 1. **无序列表(Unordered List)** 无序列表通常用于显示不需按特定顺序排列的项目。它使用`&lt;ul&gt;`...

    dl、dt、dd列表标签实例

    我们平时常用的是&lt;ul&gt;&lt; li&gt;标签,不过dd、dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版。&lt;dl&gt;&lt;/dl&gt;&lt;dt&gt;&lt; /dt&gt;&lt;dd&gt;&lt; /dd&gt; &lt;dl&gt;&lt;/dl&gt;用来创建一个普通的列表,&lt;dt&gt;&lt; /dt&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 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法

    &lt;dl&gt; 标签用于结合 &lt;dt&gt; (定义列表中的项目)和 &lt;dd&gt; (描述列表中的项目)。 #实例 复制代码代码如下:&lt;dl&gt; &lt;dt&gt;计算机&lt;/dt&gt; &lt;dd&gt;用来计算的仪器 … …&lt;/dd&gt; &lt;dt&gt;显示器&lt;/dt&gt; &lt;dd&gt;以视觉方式显示信息的装置 … …&lt;/...

    DL-Dt-DD(做表格Css实现)

    Dt-DD(做表格Css实现).html`、`DL-Dt-Dd(替代 UL OL 方法).html`和`简单示例.html`这些文件,我们可以看到如何实际操作这些概念,观察不同的实现方法和样式调整,以了解如何在实际项目中应用DL-DT-DD实现表格。...

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

    这段代码首先将ul元素设置为向左浮动,ul内的li元素同样设置为向左浮动,并清除默认的列表样式,从而达到既横向排列又去点的效果。 在讲完列表的横向排列后,我们再来扩展一下关于列表样式的其他知识点。CSS为ul、...

    DIV CSS网页布局中常用的列表元素

    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 ...dt 和dd中可以再加入 ol ul li和

    HTML5&CSS3网页制作:列表元素.pptx

    HTML5和CSS3是网页设计的核心技术,它们...在实际工作中,结合CSS3的样式属性,如`list-style-type`可以改变列表项的符号,`display`属性可以实现列表的布局调整,使得列表元素在网页设计中具有极大的灵活性和实用性。

    农作务介绍页制作-列表元素制作网页.pptx

    网页设计与制作中,列表元素是构建网页结构和组织信息的重要工具。HTML语言提供了三种基本的列表类型:无序列表、有序列表和定义列表,它们各自有着特定的应用场景。 无序列表(Unordered List)通常用于展示那些...

    典型的网页布局

    这种布局结构主要用于创建网页中的菜单或列表,其核心在于利用`div`元素来包裹整个菜单区域,并通过`ul`和`li`元素来构建具体的列表项。 1. **`div`元素**:用于定义一个区块或者部分网页内容,可以包含其他元素。...

    Bootstrap CSS布局之列表

    本文实例为大家分享了Bootstrap CSS布局中的列表布局,供大家参考,具体内容如下 列表 普通列表ul li 有序列表ol li 去点列表.list-unstyled 内联列表.list-inline 定义列表dl dt dd 水平定义列表dl-...

    Web程序开发:第4章 HTML列表元素.pptx

    例如,一个`&lt;ul&gt;`内的`&lt;li&gt;`可以包含另一个`&lt;ul&gt;`或`&lt;ol&gt;`,同样,`&lt;ol&gt;`内的`&lt;li&gt;`也可以嵌套其他列表。这种结构允许创建复杂的层次关系: ```html &lt;ul&gt; &lt;li&gt;顶级列表项1 &lt;ul&gt; &lt;li&gt;子级列表项1&lt;/li&gt; &lt;li&gt;子级...

    前端与移动开发之列表

    ①dl是外面大框框 dt名字 dd里面小项目 dt和dd并列 ②dl里面只能包含dt和dd ③dt一般写术语或名词 ④dd一般是对dt中内容的解释说明 ⑤dd和dt是兄弟关系 使用场景:对术语或名词的解释说明

    IE7下在DD DT中插入a元素结果列表显示逐级向左

    根据 HTML4.01 规范可知,LI DD DT 元素只应存在于其对应的 UL OL DL 元素中,而由 UL OL DL 元素创建的列表从 HTML 规范的定义上说不应该包含具有其他意义的非列表元素 (‘display’ 不为 ‘list-item’ ),但在...

    HTML列表标签dl、ul、ol 的使用示例

    在示例的最后部分,一个定义列表`&lt;dl&gt;`中嵌套了一个有序列表`&lt;ol&gt;`,用于展示"四大天王"的列表,这种嵌套方式使得信息层次更加清晰。 总结起来,HTML的`&lt;dl&gt;`、`&lt;ul&gt;`和`&lt;ol&gt;`列表标签提供了一种有效的方式来组织和...

Global site tag (gtag.js) - Google Analytics