实现标题前面的圆点的5种方法

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-21 22:00:32　-　阅:　-　评:0　-　积分:0

在浏览一些标题文章的时候，我们会发现有的网站的标题文章前面出现了小圆点。对于这个小圆点是如何实现的呢？方法当然有很多种了，如ul自带的列表项目样式可以实现；更改ol的样式也可以实现；在输入法中敲一个点也是可以的，只不过有点麻烦罢了；切成图片做背景定位也是可以的；当然也可以用伪元素:before来进行实现，当然，这种方法ie6就不支持了。好了，上面简单的说了5种方法，读者朋友可能还是云里雾里的。接下来就附上源码，源码如下：

在线演示<!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=utf-8" />
<title>实现标题前面的圆点的5种方法</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
body{color:#333;font-size:12px;}
ol{list-style:disc;}
p{padding-left:22px;}
.three{background:url(disc.png) no-repeat 27px 7px; text-indent:18px;}
.four:before{content:"· ";}
</style>
</head>
<body>
<ul>
<li>这个是ul自带的圆点</li>
</ul>
<ol>
<li>这个是ol设置样式后显示的圆点</li>
</ol>
　<p>· 这个是文字前面敲的圆点</p>
　<p class="three">这个是用背景图片实现的</p>
　<p class="four">这个是用伪元素:before实现的，(ie6不支持)</p>
</body>
</html>

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-10-21/99.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！