PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> HTML >> 

列表元素ul ol li dl dt dd讲解

列表元素ul ol li dl dt dd讲解

来源:phperz.com  作者:phperz.com  发布时间:2008-07-19
DIV CSS网页布局中常用的列表元素ul ol li dl dt dd,对搜索引擎
DIV CSS网页布局中常用的列表元素ul ol li dl dt dd,对搜索引擎非常友好,在seo中站有很重要的位址,推荐大家使用。而块级元素div尽量少用,和table一样,嵌套越少越好

ol 有序列表。

以下为引用的内容:
<html>
<head>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>

<body>
<ol class="decimal">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>www.phperz.com</li>
</ol>

<ol class="lroman">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>www.phperz.com</li>
</ol>

<ol class="uroman">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>www.phperz.com</li>
</ol>

<ol class="lalpha">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>www.phperz.com</li>
</ol>

<ol class="ualpha">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>www.phperz.com</li>
</ol>
</body>

</html>

表现为:

 

在内容前会自动加上顺序,list-style-type: upper-roman是控制列表顺序的样式。

ul 无序列表,表现为li前面是大圆点或方点而不是123

以下为引用的内容:
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>

<body>
<ul class="disc">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>www.phperz.com</li>
</ul>

<ul class="circle">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>www.phperz.com</li>
</ul>

<ul class="square">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>www.phperz.com</li>
</ul>

<ul class="none">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>www.phperz.com</li>
</ul>
</body>

</html>

表现为:

 

用图片自定义无序列表前面的样式。

以下为引用的内容:
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url(/templets/images/ico_7.gif)
}
</style>
</head>

<body>
<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>www.phperz.com</li>
</ul>
</body>

</html>

表现为:

 

很多人为忽略 dl dt dd的用法,用dl dt dd来做文章列表对搜索引擎抓取非常友好。

dl 内容块
dt 内容块的标题
dd 内容

可以这么写:

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>www.phprez.com</dd>
</dl>

dt 和dd中可以再签入 ol ul li和p

这些标签在使用div布局的时候,会方便很多。

Tags: css   div   ul   ol   li   dl   dt   dd   seo   li    
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号