做一些不含文字的小圆圈的css样式

最新推荐文章于 2022-06-14 14:42:03 发布

weixin_30660027

最新推荐文章于 2022-06-14 14:42:03 发布

阅读量139

点赞数

原文链接：http://www.cnblogs.com/yeyeyemax/p/6880139.html

版权

比如做这样的小圆圈（红色方框内）：

html和css该如何写：

html：
 <p>
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </p>

css：
p span {
   padding: 2px 9px；
   background: #CCC;
   border-radius: 50%; 
   margin-left: 5px; 
   cursor: pointer;
}
p span.current {
   background:#F90;
}

其中padding的设置使得span内部占有空位，填充背景色。margin不包含背景色。

转载于:https://www.cnblogs.com/yeyeyemax/p/6880139.html