视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS:list-style-type的颜色和大小控制介绍
2020-11-27 18:50:48 责编:小采
文档

今天做的页面中有个和列表符很相似的小图标,就想撒个懒用ul自己的style来替换上网查了下果然有此方法,所以记录下来以备后用。

根据个人经验总结了一下,如果颜色相同则可以使用此方法但是如果字体颜色和列表项颜色不一样的情况下还得使用图表来实现,而且在li中加上line-height:Npx;在IE中列表和字体才能居中显示;

引文:

去年我还是CSS菜鸟时,我曾问过高手,list-style-type可以改变颜色或大小吗?高手曰:不能!
于是,我当时就在高手的指点下用图片来实现。

因为是自学的,所以写CSS不能像别人那么规范化,所以我有机会出错,也有机会发现。今天,我来说下如可改变list-style-type前样式的颜色及大小。

再来看一下源码

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

对应的CSS

第一张图CSS

.ul {margin:0;padding:0 0 0 15px;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 0 15px;color:#ddd;font-size:15px;color:#FF00FF;list-style-type: square }
.ul li {border-bottom:1px dotted #999;}

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

下载本文
显示全文
专题