html+css做小圆圈中有个圆点技巧
1、在桌面新建一个 .html结尾的文件，如 xyd.html 。
2、然后选择使用某种编辑器来打开它，如使用Notepad++编辑器来编辑它。
3、然后在这个文件中写入网页所需的基本代码。
4、写好之后，根据需要设置编码格式，一般是utf-8格式，格式设置不对，会出现乱码的情况；设置好格式之后，点击左上角的图标来保存或者是直接按下 ctrl+s快捷键来保存，下面是全部的代码，复制就能用了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小圆点技巧</title>
</head>
<style>
/*margin-left在ie中会出现2倍边距bug，解决办法：在style里面添加display:inline。*/
*{padding:0px;margin:0px;}
#content{width:100px;height:100px;margin:0 auto;border:1px solid purple;position:relative;padding:10px;}
/*一个小圆圈里面有个小圆点*/
.d2{
position:absolute;
top:20px;
left:20px;
width:11px;
height:11px;
line-height:11px;
border-radius:11px;
border:2px solid blue;
}
.d3{
position:absolute;
top:2px;
left:2px;
width:7px;
height:7px;
background:#b3dae9;
border-radius:7px;
}
</style>
<body>
<div id="content">
<i class="dd"></i><br/>
<i class="d2"><i class="d3"></i></i>
</div>
<script type="text/javascript">
</script>
</body>
</html>
5、然后点击‘运行’菜单，在出现的菜单中根据需要选择不同的浏览器来查看刚才编辑好的网页，当然也可以按下快捷键，如 谷歌的是 shift+Ctrl+alt+R 来看看效果如何，下面第二张图就是效果了，这样就能做出一个简单的小圆圈中有个圆点了。
