作为一个前端，平时工作的时候，可能会用到小圆点之类的，这些小圆点可以用图片代替，也可以用html+css来写，那么怎么用html+css做小圆圈中有个圆点的技巧呢？
工具/原料
编辑器（如Notepad++、sublimetext3等等）、浏览器。
方法/步骤
1、在桌面新建一个.html结尾的文件，如xyd.html。
2、然后选择使用某种编辑器来打开它，如使用Notepad++编辑器来编辑它。
3、然后在这个文件中写入网页所需的基本代码。
4、写好之后，根据需要设醅呓择锗置编码格式，一般是utf-8格式，格式设置不对，会出现乱码的情况；设置好格式之后，点击左上角的图标来保存或者是直接按下ctrl+s快捷键恝依在绌来保存，下面是全部的代码，复制就能用了。<!DOCTYPEhtml><html><head> <metacharset="UTF-8"> <title>小圆点技巧</title></head><style>/*margin-left在ie中会出现2倍边距bug，解决办法：在style里面添加display:inline。*/*{padding:0px;margin:0px;}#content{width:100px;height:100px;margin:0auto;border:1pxsolidpurple;position:relative;padding:10px;}/*一个小圆圈里面有个小圆点*/.d2{ position:absolute; top:20px; left:20px; width:11px; height:11px; line-height:11px; border-radius:11px; border:2pxsolidblue;}.d3{ position:absolute; top:2px; left:2px; width:7px; height:7px; background:#b3dae9; border-radius:7px;}</style><body><divid="content"> <iclass="dd"></i><br/> <iclass="d2"><iclass="d3"></i></i></div><scripttype="text/javascript"></script></body></html>
5、然后点击‘运行’菜单，在出现的菜单中根据需要选择不同的浏览器来查看刚才编辑好的噩荜务圃网页，当然也可以按下快柯计紫绘捷键，如谷歌的是shift+Ctrl+alt+R来看看效果如何，下面第二张图就是效果了，这样就能做出一个简单的小圆圈中有个圆点了。
