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

最新推荐文章于 2023-11-06 16:11:46 发布

Solo_two

最新推荐文章于 2023-11-06 16:11:46 发布

阅读量1.8w

点赞数

分类专栏： HTML5 学习笔记文章标签： html5 css list-style

HTML5 学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>