电脑店

您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文

CSS教程:6.2 项目列表

作者：佚名    责任编辑：admin    更新时间：2022-06-22

class="area">

传统的HTML语言提供了项目列表的基本功能，包括顺序式列表的<ol>标记和无顺序列表的<ul>标记等。当引入css后，项目列表被赋予了很多新的属性．甚至超越了它最初设计时的功能。本节主要围绕项目列表的基本css属性进行相关介绍，包括项目列表的编号、缩进和位置等。

一、列表的符号

通常的项目列表主要采用<ul>或者<ol>标记，然后配合<li>标记罗列各个项目。简单的列表代码如下，其显示效果如图1所示。

本案例文件位于网页CSS教程资源“第6章\04\list.htm”。

折叠展开XML/HTML 代码复制内容到剪贴板
  1. <html>
  2. <head>
  3. <title>项目列表</title>
  4. <style>
  5. ul{
  6. font-size:0.9em;
  7. color:#00458c;
  8. list-style-type:decimal; /* 项目编号 */
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <ul>
  14. <li>Home</li>
  15. <li>Contact us</li>
  16. <li>Web Dev</li>
  17. <li>Web Design</li>
  18. <li>Map</li>
  19. </ul>
  20. </body>
  21. </html>
图1 普通的项目列表
图1 普通的项目列表

在CSS中项目列表的编号是通过属性list-style-type来修改的。无论是<ul>标记还是<ol>标记．都可以使用相同的属性值，而且效果是完全相同的。例如修改<ul>标记的样式为：

折叠展开CSS 代码复制内容到剪贴板
  1. list-style-type:decimal; /* 项目编号 */

此时项目列表将按照十进制编号显示，这本身是<ol>标记的功能。换句话说，在css中<ul>标记与<ol>标记的分界线并不明显，只要利用list-style-type属性，二者就可以通用，显示效果如图1所示。

当给<ul>或者<ol>标记设置list-style-type属性时，在它们中间的所有<li>标记都将采用该设置；如果对<li>标记单独设置list-style-type属性，则仅仅作用在该条项目上，如下所示。

折叠展开XML/HTML 代码复制内容到剪贴板
  1. <html>
  2. <head>
  3. <title>项目列表</title>
  4. <style>
  5. ul{
  6. font-size:0.9em;
  7. color:#00458c;
  8. list-style-type:decimal; /* 项目编号 */
  9. }
  10. li.special{
  11. list-style-type:circle; /* 单独设置 */
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <ul>
  17. <li>Home</li>
  18. <li>Contact us</li>
  19. <li class="special">Web Dev</li>
  20. <li>Web Design</li>
  21. <li>Map</li>
  22. </ul>
  23. </body>
  24. </html>

此时的显示效果可以看到第3项的项目编号变成了空心圆，但是并没有影响其他编号。

通常使用的list-style-type属性的值除了上面看到的十进制编号和空心圆以外还有很多，常用的如下表所示。

关键字 显示效果 disc 实心圆 circle 空心圆 square 正方形 decimal 1，2，3，4，5，6，…… upper-alpha A，B，C，D，E，F，…… lower-alpha a，b，c，d，e，f，…… upper-roman Ⅰ，Ⅱ，Ⅲ，Ⅴ，Ⅵ，Ⅶ，…… none 不显示任何符号

二、图片符号

除了传统的各种项目符号外，CSS还提供了属性list-style-image，可以将项目符号显示为任意的图片。例如有下面一段代码。

折叠展开XML/HTML 代码复制内容到剪贴板
  1. <html>
  2. <head>
  3. <title>项目列表</title>
  4. <style>
  5. ul{
  6. font-size:0.9em;
  7. color:#00458c;
  8. list-style-image:url(icon1.jpg); /* 不显示项目符号 */
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <ul>
  14. <li>Home</li>
  15. <li>Contact us</li>
  16. <li>Web Dev</li>
  17. <li>Web Design</li>
  18. <li>Map</li>
  19. </ul>
  20. </body>
  21. </html>

在IE 8的显示效果如图2所示，在FireFox中的显示效果如图3所示，每个项目的符号都显示成了一个小图标，即icon1.jpg。

图2 图片符号 图3 图片符号在FireFox中的效果
图2 图3 图片符号在IE8和FireFox中的效果

如果仔细观察图片符号在两个浏览器中的显示效果，就会发现图标与文字之间的距离有着明显的区别，因此不推荐这种设置图片符号的方法。如果希望项目符号采用图片的方式，则建议将list-style-type属性的值设置为none。然后修改<li>标记的背景属性background来实现。例如下面这个例子。

本案例文件位于网页CSS教程资源“第6章\04\icon-style.htm”。

折叠展开XML/HTML 代码复制内容到剪贴板
  1. <html>
  2. <head>
  3. <title>项目列表</title>
  4. <style>
  5. ul{
  6. font-size:0.9em;
  7. color:#00458c;
  8. list-style-type:none; /* 不显示项目符号 */
  9. }
  10. li{
  11. background:url(icon1.jpg) no-repeat; /* 添加为背景图片 */
  12. padding-left:25px; /* 设置图标与文字的间隔 */
  13. }
  15. </style>
  16. </head>
  17. <body>
  18. <ul>
  19. <li>Home</li>
  20. <li>Contact us</li>
  21. <li>Web Dev</li>
  22. <li>Web Design</li>
  23. <li>Map</li>
  24. </ul>
  25. </body>
  26. </html>

这样通过隐藏<ul>标记中的项目列表，然后再设置<li>标记的样式，统一定制文字与图标之间的距离，就可以实现各个浏览器之间的效果一致，如图2所示。

DivCSS教程排行

程序编程推荐

热门文章

 [Flash教程]Flash制作米老鼠可爱表情…
 [网络故障处理]无线路由器有信号，但笔…
 [热门软件]微信春晚红包怎么玩？微…
 [Linux教程]无法启动系统
 [手机软件教程]camera360嘻哈大头效果教…
 [安卓开发]Android应用中的组件功能

相关文章

用HTML+CSS制作邮件网页的技巧总结
什么是html5纯CSS的三级联动级联菜单？
html5CSS按钮菜单代码介绍
HTML5+CSS3构建的动画切换的方法
div+css布局是什么呢？
CSS尺寸对照表介绍给大家
常用CSS2基本定义看看大家知道多少？
利用CSS创造多彩文字的方法
怎样设置或取得元素的CSS class
如何读写HTML元素的css 属性
MSSQL 基本语法及实例操作语句教程

图片文章

iPhone6 Plus wifi连接不上怎么办？

 　　【iPhone6 Plus wifi连接不上怎么办】　　1、首先将你的iphone6 plus手…

花钱大师在哪查询记录？

 　　花钱大师方便记账工具，可以统计分析你的日常消费状况，记录的每一笔消费都可以通过查询翻阅记录，接下…

Excel文件弹出隐私问题警告的解决方法

在使用excel时，我们常会遇到Excel文件弹出隐私问题警告，出现这样的问题应该是保存Excel表格当中包含了…

国内各大第三方iOS8输入法全面对比

 　　去年苹果发布的iOS7系统增加了国人倍受喜爱的九宫格输入法，然而该输入法无论是界面还是使用体验还…

万盛电脑知识网 | 设为首页 | 加入收藏 | 关于我们