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

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

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-10-07 07:36:55

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

checkbox中把选项文字与小圆圈关联上

跳舞 唱歌 阅读 睡觉 <form><input id="1" type="checkbox" name="hobbies" value="dance" /><label for="1">跳舞</label> <input id="2" type="checkbox" name="hobbies"

从零开始学_JavaScript_系列(13)——CSS&lt;2&gt;(新窗口打开,背景图片填充,底文字,小提示,CSS选择器整理)

前注:图片和部分内容引用的网易云课堂的,所以,侵,私信,删. 这篇也算上周的 (10)打开一个网页时,以新窗口形式打开 将 <a href="www.baidu.com"></a> 新增属性: <a href="www.baidu.com" target="_blank"></a> 即可. (11)关于块间的莫名空隙 假设有html代码: <div id="a"> &

android知乎小圆圈刷新效果

前几天看到包括知乎在内的很多应用都使用到了一种小圆圈划动刷新的效果,仔细查了一下,原来是android v7包里面最新的刷新效果.使用起来也是十分简单的. 首先先建立一个activity,在布局文件里面这样写: 1 <android.support.v4.widget.SwipeRefreshLayout 2 android:id="@+id/sr" 3 android:layout_width="match_parent" 4 android:layout_

两套Ext小图标(含CSS样式文件)--约2000个图标

在Ext项目开发中经常用到16X16 的小图标,今天为大家准备被了两套完美的图标和样式,各大概包含2000个图标. 下载地址:http://files.cnblogs.com/zhougaojun/Ext%E5%B0%8F%E5%9B%BE%E6%A0%87.zip 部分图标效果: (1)第一套图标样式 (2)第二套图标样式 两套Ext小图标(含CSS样式文件)--约2000个图标,布布扣,bubuko.com

一款由html5 canvas实现五彩小圆圈背景特效

之前介绍了好几款html5 canvas实现的特效.今天要为大家介绍一款由html5 canvas实现五彩小圆圈背景特效.五彩的小圆圈渐显渐失的特效.效果图如下: 在线预览   源码下载 html代码: <canvas> </canvas> <div id="Circle"> <span>Harris Carney<span> </div> css代码: body { margin: 0; overflow: hi

WPF进度条系列②旋转小圆圈

 写在之前: 关于WPF的样式,我也是学习了很多朋友的文章才有了下面的东西,因为时间有些久远 & 备份的链接也都不在了. 所以,究竟是看过哪些文章,也是记不清楚了…… 请见谅. --------------------------------我是害羞的分割线----------------------------------- 旋转小圆圈进度条见效果: xaml: <UserControl x:Class="AppHost.ProbarRotate" xmlns=&quo

类 文件 右下角呈现 红色小圆圈,里面有一个J 标记

intellj(idea) 项目中类 文件 右下角呈现 红色小圆圈,里面有一个J 标记,表明此为 未设置为源文件,没有编译,本来应该是属于源文件的,结果现在没有被标记为源文件,也就没法编译了.

WPF 生成文字图片小笔记: DrawingContext类

在WinForm程序中用Graphics类生成图片文字, 而WPF功能类似的类是System.Windows.Media下的DrawingContext. 虽然在WPF中可以使用Graphics类, 但这会涉及到Bitmap与BitmapSource之间的转换. 虽然不是很麻烦, 但就是很不爽. 而且Graphics是GUI的操作, 明显不适合WPF. 在System.Windows.Media命名空间下, 还有其它与System.Drawing功能相类似的类. 当然, 你在使用DrawingC

轮播汇总:移动式、消失式、左右点击+底下小圆圈

移动式: #ad{ width: 100px; height: 100px; border: 1px solid red; overflow: hidden; } img{ width: 100px; height: 100px; /*display: none;*/ } #ap{ width: 300px; height: 100px; border: 1px solid red; /*transition: 2s;*/ display: flex; } <div id="ad"