20
2011
02
2011-02-20

DIV+CSS中li的强大用法详解

  WEB2.0时代注定是DIV+CSS时代,TABLE已成为过去!DIV+CSS中,li往往是最常的标签之一,这里就谈谈li的详尽用法。

  <li> 标签主要是定义列表项目,往往栏目,列表,链接,各种排列都会用到li.

  <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。也可以不用于其中单独使用。所有主流浏览器都支持 <li> 标签。然而在 HTML 4.01 中,li 元素的 "type" 和 "value" 属性是不被赞成使用的。

  <li>的常用属性

  1. class  规定元素的类名(classname)
  2. id  规定元素的唯一 id
  3. style 规定元素的行内样式(inline style)
  4. title 规定元素的额外信息(可在工具提示中显示)
  5. dir ltr | rtl 设置元素中内容的文本方向。
  6. lang language_code 设置元素中内容的语言代码。
  7. xml:lang language_code 设置 XHTML 文档中元素内容的语言代码。
  8. list-style-type 设置列表项目相关内容,其取值具体看下面:

  disc : CSS1 默认值。实心圆

  circle : CSS1 空心圆

  square : CSS1 实心方块

  decimal : CSS1 阿拉伯数字

  lower-roman : CSS1 小写罗马数字

  upper-roman : CSS1 大[写罗马数字

  lower-alpha : CSS1 小写英文]字母

  upper-alpha : CSS1 大写英文字母

  none : CSS1 不使用项目符号

  armenianl : CSS2 未支持。传统的亚美尼亚数字

  cjk-ideographic : CSS2 未支持。浅白的表意数字

  georgian : CSS2 未支持。传统的乔治数字

  lower-greek : CSS2 未支持。基本的希腊小写字母

  hebrew : CSS2 未支持。传统的希伯莱数字

  hiragana : CSS2 未支持。日文平[假名字符

  hiragana-iroha : CSS2 未支持。日文平]假名序号

  katakana : CSS2 未支持。日文片假名字符

  katakana-iroha : CSS2 未支持。日文片假名序号

  lower-latin : CSS2 未支持。小写拉丁字母

  upper-latin : CSS2 未支持。大写拉丁字母

  CSS使用方法 list-style-type:disc;

  <li>具体用法举例

  1)。

  运用CSS格式化列表符:

  ul li{

  list-style-type:none;

  }

  2)。

  如果你想将列表符换成图像,则:

  ul li{

  list-style-type:none;

  list-style-image: url(icon.gif);

  }

  3)。

  为了左对齐,可以用如下代码:

  ul{

  list-style-type:none;

  margin:0px;

  }

  4)。

  如果想给列表加背景色,可以用如下代码:

  ul{

  list-style-type: none;

  margin:0px;

  }

  ul li{

  background:#CCC;

  }

  5)。

  如果想给列表加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;这一行必须要加的,这样才能块状显示!

  6)。

  LI中的元素水平排列,关键FLOAT:LEFT:

  ul{

  list-style-type:none;

  width:100%;

  }

  ul li{

  width:80px;

  float:left;

  }

  WEB2.0时代如果你还不会使用<li>我只能说你OUT了。相信以上信息会对网页设计师起到很大的作用,如有不正确的地方请指出。

  喜欢本文的读者还喜欢:[DIV+CSS设计排版首页时请对DIV加上height属性]

« 上一篇下一篇 »

评论列表:

1.武汉SEO  2011/2/21 1:41:41 回复该留言
里面部分符号是中文标点,有符号的请大家不要直接复制使用,直接复制英文字母别的符号手写下.
2.Mcbub  2011/9/6 18:42:18 回复该留言
学习很多哈哈
3.武汉网站建设  2012/3/22 19:23:49 回复该留言
不错,分享了

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。