首页 > Web开发 > 详细

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

时间:2017-05-19 20:44:06      阅读:343      评论:0      收藏:0      [点我收藏+]

比如做这样的小圆圈(红色方框内):

技术分享

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不包含背景色。

 

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!