dldtddulliol区别和应用.ppt

ul,li,ol, dl,dt,dd区别及应用 ol?有序列表:olli……/lili……/lili……/li/ol表现为：1……2……3…… 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; }? 二、定义列表: DL DT DD dl class=product-body-services  dt购物/dt  dda href=“#拍卖会/a/dd dda href=“#跳蚤街/a/dd dda href=“#淘金币/a/dd dda href=“#试用中心/a/dd dda href=“#电子书/a/dd dda href=“#全球购/a/dd /dl THANK YOU! * * ul?无序列表，表现为li前面是大圆点而不是123:ulli……/lili……/li/ul ul: unordered lists ol: ordered lists li: Lists 一、ul, ol, li的应用 定义列表和其他类型的列表稍有不同，它由两部分组成：名称和定义。 DT 指定名称，为内联元素。 DD 指定定义，为块级元素。 ?dl?dt?dd的用法: dl?内容块dt?内容块的标题dd?内容 dl —— define list——定义列表 dt —— define list title —— 用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。注意：其中不能包含 hx 元素。 dd —— define list define —— 用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解释。 dl 列表中有较为强烈的“描述”、“解释”、“补充”意义。 dt 和 dd 有明显的逻辑关系，dd 从属于 dt，dd 中的内容是对 dt 的“描述”、“解释”、“补充”。另外，dd 之间虽然是平行关系，但是其描述的内容是多角度的，不同于单纯的 li。 dl class=product-body-live  dt生活/dt  dda href=“#彩票/a/dd dda href=“#电影票/a/dd dda href=“#保险/a/dd dda href=“#视频/a/dd dda href=“#水电煤/a/dd dda href=“#理财/a/dd dda href=“#医药馆/a/dd /dl 淘宝网首页DL DT DD应用 *