关于CSS列表list-style-type的颜色和大小控制

来源:互联网 发布:游戏窗口化软件 编辑:程序博客网 时间:2024/06/06 03:36

CSS列表list-style-type的颜色和大小控制 

    看一下源码:

   <ul class="artul">
   <li><ahref="#">这里是SEO网站的文章列表标题目</a></li>
   <li><ahref="#">这里是很长的SEO网站的文章列表标题目</a></li>
   <li><ahref="#">这里是关于SEO网站的文章列表标题目</a></li>
   <li><ahref="#">这里是一些最新的SEO网站的文章列表标题目</a></li>
   <li><ahref="#">这里是近期SEO网站的文章列表标题目</a></li>
   <li><ahref="#">这里是SEO常看的网站的文章列表标题目</a></li>
   <li><ahref="#">这里是关于SEO网站的文章列表标题目</a></li>
   <li><ahref="#">这里是一些最新的SEO网站的文章列表标题目</a></li>
   </ul>

对应的CSS

第一张图CSS
.ul {margin:0;padding:0 0 015px;color:#ddd;font-size:12px;color:#FFFF00;list-style-type:square }
.ul li {border-bottom:1px dotted #999;}

第二张图CSS
.ul {margin:0;padding:0 0 015px;color:#ddd;font-size:15px;color:#FF00FF;list-style-type:square }
.ul li {border-bottom:1px dotted #999;}

相信大家都知道了,就改一下ul的color就可以改颜色,font-size就可以改大小(大小在IE6下不支持,firefox可以)


 自己测试了一下:font-size:好像不能改变 li 前面的点的大小。

 如果非要实现li 前面的点不同,可以用图片代替。

 示例如下:

<html>
      <head>
      <style type="text/css">
      ul 
     {
     list-style: square inside url('/i/eg_arrow.gif');  /* 插入自己做的图片 */  
     }
     </style>
     </head>

     <body>
     <ul>
     <li>咖啡</li>
     <li>茶</li>
     <li>可口可乐</li>
     </ul>
     </body>

</html>


0 0
原创粉丝点击