`
ITCheng
  • 浏览: 77198 次
  • 来自: 北京
社区版块
存档分类
最新评论

ol li ul li dl dt dd

    博客分类：
  • 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...）。




我们平时常用的是< ul>< li>标签，不过dd、dt标签也蛮不错，特别是发布程序的时候功能模块列表什么的可以使用它来排版。


< dl>< /dl>< dt>< /dt>< dd>< /dd>

< dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目，<dd>< /dd>用来创建列表中最下层项目，< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。看一下下边的例子您就会明白了：


dl ——define
list——定义列表
dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。

dd——define list define——用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解

 

 

 

实例如下一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style >
#d    {width:940px;margin:0 auto;}
#d dl   {float:left;text-align:left;width:292px;display:inline;margin:10px 0 8px 20px;border-right:1px solid #b4c5da;}
#d dt   {font-weight:bold;margin:0 0 10px;}
#d dd   {float:left;width:96px;margin:0;}
#d dd a {line-height:22px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>雪乌鸦的IT生活</title>
</head>
<body>
<div id="d" >
     <dl>
    <dt>帮助说明</dt>
    <dd><a href="http://edu.codepub.com" target="_blank">如何上传</a></dd>
    <dd><a href="http://edu.codepub.com" target="_blank">如何录制</a></dd>
    <dd><a href="http://edu.codepub.com" target="_blank">相册视频</a></dd>
    <dd><a href="http://edu.codepub.com" target="_blank">如何订阅</a></dd>
    <dd><a href="http://edu.codepub.com" target="_blank">如何分享</a></dd>
    <dd><a href="http://edu.codepub.com" target="_blank">管理主页</a></dd>
   </dl>
        <dl>
    <dt>帮助说明</dt>
    <dd><a href="http://edu.codepub.com" target="_blank">如何上传</a></dd>
    <dd><a href="http://edu.codepub.com" target="_blank">如何录制</a></dd>
    <dd><a href="http://edu.codepub.com" target="_blank">相册视频</a></dd>
    <dd><a href="http://edu.codepub.com" target="_blank">如何订阅</a></dd>
    <dd><a href="http://edu.codepub.com" target="_blank">如何分享</a></dd>
    <dd><a href="http://edu.codepub.com" target="_blank">管理主页</a></dd>
   </dl>
      </div>
</body>
</html>

 

二、

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>无标题文档</title>
<style type="text/css">

<!--
dt {
        float: left;
        width: 60px;

        margin: 0px;
        padding: 0px;
}
dd {
       
float: left;
        clear: none;
        width: 290px;
       
margin: 0px;
        padding: 0px;
}
dl {
        width: 350px;

        font-size: 9pt;
        line-height: 1.5em;
       
position:relative;
        margin: 0px;
        padding: 0px;

        left:15px;
}
.red {
        color: #FF3300;
}

#box {
        width: 500px;
        background-color: #F1F1F7;

}
#box #content {
        padding-top: 10px;
       
padding-right: 10px;
        padding-bottom: 10px;
        padding-left:
20px;
}
-->
</style>
</head>
<body>

<div id="box">
<div id="content">
<img
src=/Article/UploadFiles/200704/20070412091408274.gif align="left"/ >

<dl>
        <dt>商品名称：</dt>
       
<dd><strong>[好大的一只啊] </strong>忧惠：<span
class="red"><em>8.5折</em></span></dd>
       
<dt>商品简介：</dt>
       
<dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称
商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span
class="red";>详细介绍</span>]</dd>
       
<dt>店铺地址：</dt>
        <dd>商品名称</dd>
       
<dt>联系电话：</dt>
        <dd>0000-12345678 87654321
</dd>
</dl>
</div>
</div>
</body></html>

分享到：
| 表格细边框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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,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内容...

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

    列表元素ul、ol、li、dl、dt和dd是构建内容列表、导航链接和其他有序或无序信息的基石。了解并正确使用这些元素对于创建清晰、可访问且搜索引擎优化友好的网站至关重要。 首先，ul（无序列表）和ol（有序列表）是...

    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;用来创建...

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

    复制代码代码如下:&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;/dd&gt;&lt;/dl&gt; HTML &lt;ul&gt; 标签 #定义和用法 &lt;ul&gt; 标签定义无序列表。 #实例 无序 HTML 列表...

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

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

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

    CSS为ul、ol以及它们的子项li提供了多种`list-style`属性的值，允许我们自定义列表项前的标记类型。 - `list-style:square`：设置列表项前的标记为实心方形。 - `list-style:circle`：设置列表项前的标记为圆形。 -...

    前端与移动开发之列表

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

    HTML基本标签属性总结

    4种块结构：div-ul(ol)-li 导航菜单 div-dl-dt-dd 图文混编 table-tr-td 规整数据 form-table-tr-td 表单布局 块标签：基本块级标签 标题：h1-h6 段落：p 水平线：hr 常用布局标签 有序：ol-li ...

    蔚蓝网上书店首页代码

    &lt;div class="dd_close" id="dd_close"&gt;[removed]void(0);"&gt;关闭&lt;/a&gt;&lt;/div&gt; &lt;!--头部--&gt; &lt;header id="header"&gt; 您好！欢迎光临蔚蓝网 [登录&lt;/a&gt; | 免费注册] &lt;ul&gt; &lt;li&gt;客户服务&lt;/a&gt;&lt;/li&gt; &lt;li...

    dl,dt,dd制作的CSS垂直菜单

    `&lt;div id="menu"&gt; &lt;dl id="gallery"&gt; &lt;dt&gt;Gallery&lt;/dt&gt; &lt;dd&gt;Paul Cezanne&lt;/dd&gt; &lt;dd&gt;Henri Matisse&lt;/dd&gt; &lt;dd&gt;Vincent van Gogh&lt;/dd&gt; &lt;dd&gt;William Turner&lt;/dd&gt; &lt;dd&gt;John Constable&lt;/dd&gt;` 我们使用 dl,dt,dd 标签和 ...

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

    1. **定义列表（Definition List）：&lt;dl&gt;, &lt;dt&gt;, 和&lt;dd&gt;** `&lt;dl&gt;` 标签用于创建一个定义列表，通常用于术语和解释的关系。在这个列表中，`&lt;dt&gt;`（定义术语）标签用来标记术语，而`&lt;dd&gt;`（定义描述）标签则用来给出...

    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和

    Bootstrap CSS布局之列表

    定义列表dl dt dd 水平定义列表dl-horizontal ul, ol { margin-top: 0; margin-bottom: 10px; } ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; } 普通列表ul li 有序列表ol li 去点列表class=”list-...

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

    - `&lt;ul&gt;` 和 `&lt;/ul&gt;` 标签用于定义整个无序列表。 - `&lt;li&gt;` 标签用于定义列表中的每一项。 **示例代码：** ```html 无序列表示例 我们提供的软件类别包括： &lt;ul&gt; &lt;li&gt;系统程序&lt;/li&gt; &lt;li&gt;媒体工具&lt;/li&gt; &lt;li...

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

    定义列表使用`&lt;dl&gt;`标签开始，`&lt;dt&gt;`标签定义术语，而`&lt;dd&gt;`标签提供对术语的解释。例如： ```html &lt;dl&gt; &lt;dt&gt;HTML&lt;/dt&gt; &lt;dd&gt;超文本标记语言&lt;/dd&gt; &lt;dt&gt;CSS&lt;/dt&gt; &lt;dd&gt;层叠样式表&lt;/dd&gt; &lt;/dl&gt; ``` 这将创建一个定义...

    03-HTML列表.ppt

    最后，自定义列表（`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`）用于定义术语及其解释。`&lt;dl&gt;`是定义列表的容器，`&lt;dt&gt;`表示术语，`&lt;dd&gt;`则用于提供该术语的描述： ```html &lt;dl&gt; &lt;dt&gt;HTML&lt;/dt&gt; &lt;dd&gt;HyperText Markup Language&lt;/dd&gt; ...

Magicbox
Global site tag (gtag.js) - Google Analytics