如皋网站建设-如皋网站优化-如皋SEO-如皋网页设计

如皋网站建设咨询热线:15862770030
网站首页 > 网站建设知识 > 网站建设之CSS项目列表中自定义li列表项图标式项目符号

网站建设之CSS项目列表中自定义li列表项图标式项目符号

时间:2017/8/29 20:40:49 标签:

上一节介绍了无序列表ul和有序列表ol的使用方法和二者的差异,无序列表和有序列表二者既有差异,也没有绝对的分割线,在引用独立样式的时候,二者是可以互相变化的。这一节对其中一个重要的应用单独讲解,就是给具体的列表项自定义一个项目符号,实现比较简单,就是在css里面定义几个类,li列表项再引入需要的css即可,我们的案例中是对3个列表项分别引入一个logo商标,也就是一个小图片,下面案例中1.gif,2.gif,3.gif分别是相同尺寸的3个小图片,完整测试代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul{
font-size:24px;
}
.wuling{
                list-style-image:url(1.gif);
                }
.benchi{
                list-style-image:url(2.gif);
                }
.toyota{
                list-style-image:url(3.gif);
                }

</style>
</head>

<body>
<ul>
  <li class="wuling">我是神车五菱</li>
  <li class="benchi">我是奔驰</li>
  <li class="toyota">我是丰田</li>
</ul>
</body>
</html>

上一篇:网站建设之CSS样式中利用position进行元素的绝对定位和相对定位
下一篇:没有资料