html css 漂亮的列表 <ul> <li>,Css <ul><li>列表的样式的控制

您的位置：首页 - 教程 - CSS - 正文

Css

• 列表的样式的控制

  列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。

  列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。

  样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。

  1．列表符号

  列表符号是指显示于每一个列表项目前的符号标识。

  基本格式如下：

  list-style-type：参数

  参数取值范围：

  ·disc：圆形

  ·circle：空心圆

  ·square：方块

  ·decimal：十进制数字

  ·lower-roman：小写罗马数字

  ·upper-roman：大写罗马数字

  ·lower-alpha：小写希腊字母

  ·upper-alpha：大写希腊字母

  ·none：无符号显示

  参数中的disc是默认选项。

  2．图形符号

  图形符号指原来列表的项目符号将可以使用图形来代替。

  基本格式如下：

  list-style-image：URL

  URL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。

  3．列表位置

  列表位置描述列表在何处显示。

  基本格式如下：

  list-style-position：参数

  参数取值范围：

  ·inside：在BOX模型内部显示

  ·outside：在BOX模型外部显示

  这里又出现了一个新的概念：BOX模型。BOX是指一种容器，包含了应用样式规则的对象，具体介绍将在后文中给出。 ========================================================================================

  使用无序列表：即UL

  看一个最简单的例子：

  • Item 1
  • Item 2
  • Item 3
  • Item 4

  这是一个未加修饰的纵向列表

  1：设置列表的边界

  #base {

  border: 1px solid #000;

  margin: 2em;

  width: 10em;

  padding: 5px;

  }

  html中这样写，就会呈现一个带边框的无序列表

  • Item 1
  • Item 2
  • Item 3
  • Item 4

  2：设定列表的图像

  可以设定列表的样式为左边带一个图像，样式如下：

  ul {

  list-style-type: disc;

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

  list-style-position: inside;

  }

  disc表示实心的圆，list-style-image表示列表用到的小图像，如果这个图像的url

  不正确时，disc才会起作用，inside表示列表是在区块内部的。

  3：如何在段落中使用列表

  样式如下：

  #inline-list {

  border: 1px solid #000;

  margin: 2em;

  width: 80%;

  padding: 5px;

  font-family: Verdana, sans-serif;

  }

  #inline-list p {

  display: inline;

  }

  #inline-list ul, #inline-list li {

  display: inline;

  margin: 0;

  padding: 0;

  color: #339;

  font-weight: bold;

  }

  4：水平导航

  #h-contain {

  padding: 5px;

  border: 1px solid #000;

  margin-bottom: 25px;

  }

  #pipe ul {

  margin-left: 0;

  padding-left: 0;

  display: inline;

  }

  #pipe ul li {

  margin-left: 0;

  padding: 3px 15px;

  border-left: 1px solid #000;

  list-style: none;

  display: inline;

  }

  #pipe ul li.first {

  margin-left: 0;

  border-left: none;

  list-style: none;

  display: inline;

  }

  #h-contain定一个一个边界为1的区块，水平导航用的也是inline方式，li.first定义第一个

  列表元素没有左边那个象素为1的border。

  下面的样式是tab方式的水平导航：

  #tabs ul {

  margin-left: 0;

  padding-left: 0;

  display: inline;

  }

  #tabs ul li {

  margin-left: 0;

  margin-bottom: 0;

  padding: 2px 15px 5px;

  border: 1px solid #000;

  list-style: none;

  display: inline;

  }

  #tabs ul li.here {

  border-bottom: 1px solid #ffc;

  list-style: none;

  display: inline;

  }

  li的class如果为here，则是选中的

  评论：