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

hismile2012

hismile2012

2016-02-19 23:28

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐dl,dt,dd,ul,li,ol区别及应用,无聊中的都看过来。

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).如果想给列表加背景色,可以用如下代码: 查看更多css教程

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

以下是引用片段:
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;

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

ulli的区别

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...)。

查看本站更多网页制作教程。

展开更多 50%)
分享

猜你喜欢

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

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

div ul dl dt ol的解释

Web开发
div ul dl dt ol的解释

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS元素div ul dl dt ol简单解释

Web开发
CSS元素div ul dl dt ol简单解释

ul与li的区别

Web开发
ul与li的区别

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

应用WEB标准实例:ul li制作导航

Web开发
应用WEB标准实例:ul li制作导航

dl、dt、dd 标记来改造163邮箱的广告条

Web开发
dl、dt、dd 标记来改造163邮箱的广告条

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

完全掌握纯CSS布局网页

完全掌握纯CSS布局网页

CSS教程:简单理解em

CSS教程:简单理解em
下拉加载更多内容 ↓