18910140161

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

顺晟科技

2022-09-15 21:08:08

366

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

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

 

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航