码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-19 21:10:06      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:round   文字   分享   log   code   ima   padding   技术   如何   

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

技术分享

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样式

标签:round   文字   分享   log   code   ima   padding   技术   如何   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!