前端小圆点应该怎么写好看

最新推荐文章于 2023-10-31 12:28:29 发布
最新推荐文章于 2023-10-31 12:28:29 发布
阅读量1.3k 收藏 3
点赞数 2
分类专栏： 实习日常 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51049889/article/details/119611665
版权
本文介绍了如何使用CSS轻松创建出好看的小圆点，通过设置span标签的display属性为inline-block，并利用border-radius将元素形状变为圆形，再添加背景色以提升视觉效果。这种方法简单易懂，适用于网页设计中各种小圆点的制作。
摘要由CSDN通过智能技术生成

在开发的过程中，需要写小圆点应该怎么办？如何写出好看的小圆点呢？如图所示

其实思路很简单，先上代码。

写一个span标签，给个类，设置为inline-block，这样就可以设置宽度和高度了，然后通过border-radius属性，调成百分之五十，想要好看点的加个背景色，就可以了。 

 

m0_51049889
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（947）：小圆点问题解决
歌谣的博客
04-24 508
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
html如何制作小圆点,纯CSS实现小圆点和三角形图案
weixin_35745604的博客
05-31 1670
纯CSS制作三角形和小圆点.arrowbox{width:40px;height:30px;background: #333;padding:10px;position: relative;text-align:center;margin:20px;color:#fff;line-height:30px;font-size:12px;}.arrowbox span{display: inline-...
小圆点
g471045770的博客
07-01 249
import java.util.ArrayList; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.os.Handler; import android.support.v4.view.ViewPager; import an
前端css样式小圆点样式
热门推荐
月落星河
02-21 2万+
前端如何实现多种方式圆形可点击区域
最新发布
前端程序员、项目经理、人工智能博主
10-31 892
canvas 是 HTML5 提供的，用来在浏览器中创建图形，它可以通过 JavaScript 绘制 2D 图形。因此我们可以通过用 canvas 在浏览器中绘制一个圆形，然后给这个圆形添加区域内点击事件即可实现。
小圆点菜单
01-03
对于更复杂的应用，可能还需要使用到如React、Vue等前端框架，它们提供了更强大的组件化和状态管理能力。 在实际开发中，"FIXED小圆点菜单"可能是实现这种效果的一个代码资源或示例项目。开发者可以研究其中的代码...
h5前端开发，css图片轮播图带小圆点
m0_60228357的博客
07-24 1496
为什么要写这篇文章 从一开始手指冒汗被怼的说不出话，到最后和面试官侃侃而谈游刃有余，我发现：同样的能力水平，在不同的面试表现下，反馈到面试官眼中的结果可以有着天壤之别。 因此，如果你希望把自己的真实水平展示给面试官，那么掌握一些合适的方法是非常有必要的。 面经分享 第一部分是我前端面试的经验总结，第二部分是我认为比较有思考空间的题目 ⭐ 经验总结 一份漂亮的简历，需要包括以下部分（排版由上而下） 个人亮点（专精领域，个人博客，开源项目） 教育经历（毕业院校，在校经历、荣誉） 工作经历（实习） 项
Canvas 鼠标点击生成小圆点
08-10
在网页开发中，Canvas 是一个非常重要的元素，它允许开发者在网页上绘制图形，实现动态交互效果。"Canvas 鼠标点击生成小圆点"这个功能是利用...而了解和掌握这些基础知识对于任何前端开发者来说都是非常有价值的。
【前端知识之JS】JS原生手写轮播图
weixin_44337386的博客
08-02 1454
本系列主要整理前端面试中需要掌握的知识点。本节介绍如何用原生JS手写轮播图。
vue 画一个小圆点
x_nweBorder01k的博客
02-25 3580
效果图： 方法1： <span style="margin: 0 10px;font-size: 36px">•</span> 右击右下角输入法，点击表情符号&符号，往下翻，会找到符号中的小圆点，再设置大小，用font-size即可，这种方法较为简单，不需要单独再设置小圆点的垂直居中样式等等。 方法二： 用css样式画小圆点 <span style="margin: 0 10px"><span class="login-cycle"&g..
css生产圆点
qq_24343389的博客
03-06 971
.news-list .item-badge { padding: 4.5px; position: absolute; margin-top: 5px; margin-left: -8px; border-radius: 50%; background-image: linear-gradient(-180deg, #ff5555 0%, #Ff5555 100%);}
【CSS】伪元素小圆点实现
一个帅哥的博客
07-26 266
【代码】CSS伪元素小圆点实现。
圆点html span,HTML <span>局部布局标签
weixin_42321496的博客
05-30 340
HTML 局部布局标签在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。一般使用在文字的处理方面居多。案例我在地球，来自中国我在地球，来自中国span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。span与div区别在CSS定义中属于一个行内元素，而是块级元素，span随内容而占用高宽空间(紧贴内容)，而一对div标签却占用一行。我们可能通俗地理解为为...
前端 ---- HTML基础
weixin_58470558的博客
01-02 265
前端学习之HTML基础
界面重构——css实现小圆点
weixin_44867717的博客
09-17 928
css实现小圆点 <span class="spk-a"></span> .spk-a { display: inline-block; width: 4px; height: 4px; // border: 1px solid #aaaaaa; border-radius: 2px; background-color: #aaaaaa; opacity: 0.5; //透明度 m
将＜span＞标签设为圆形
yun_chuan的博客
04-28 3152
这个是当时工作时在网上找到的，不知道是哪篇博客了 <style> /*设置圆形*/ .circle { /*宽高相等*/ height: 50px; width: 50px; /*设置圆角边框，尺寸为宽高的一半，就是正圆*/ border-radius: 25px; /*背景色*/ background-color: blue; /*设置block才能显示出来*/ display: inline-blo
HTML学习笔记（二 HTML常用标签 上）
qq_43731273的博客
02-02 85
无
圆点html span,HTML <span> 标签
weixin_35792271的博客
05-30 561
定义和用法：标签被用来组合文档中的行内元素。在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性。在IE6下，span元素浮动时一定要把span元素放在a标签之前，不然，会出现浏览器兼容问题，IE6下，浮动过后的span元素会向下错位一行。提示和注释：提示：请使用来组合行内元素，以便通过样式来格式化它们。注释：span没有固定的格式表现。当对它应用样式时，...
CSS实现圆点
qq_35628430的博客
08-05 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .circle{ <!--设置圆点的宽、高、背景颜色，再设置圆点半径所占百分比--> width: 10...
前端网页开发 轮播图怎么写
05-29
轮播图可以使用一些第三方插件来实现，比如swiper、slick等，也可以自己写代码实现。下面是一种基于原生JS的轮播图实现方式： HTML结构： ```html <div class="carousel"> <ul class="carousel-list"> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> <li><img src="4.jpg"></li> <li><img src="5.jpg"></li> </ul> <ul class="carousel-dots"></ul> </div> ``` CSS样式： ```css .carousel { position: relative; width: 100%; height: 400px; overflow: hidden; } .carousel-list { position: absolute; width: 500%; height: 100%; left: 0; top: 0; } .carousel-list li { float: left; width: 20%; height: 100%; list-style: none; } .carousel-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .carousel-dots li { float: left; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #ccc; cursor: pointer; } .carousel-dots li.active { background-color: #333; } ``` JS代码： ```javascript var carousel = document.querySelector('.carousel'); var carouselList = carousel.querySelector('.carousel-list'); var carouselItems = carouselList.querySelectorAll('li'); var dots = carousel.querySelector('.carousel-dots'); var dotItems = []; var currentItemIndex = 0; var timer = null; // 初始化轮播图 function initCarousel() { // 创建轮播图下方的小圆点 for (var i = 0; i < carouselItems.length; i++) { var dotItem = document.createElement('li'); dotItem.setAttribute('data-index', i); dots.appendChild(dotItem); dotItems.push(dotItem); } // 设置第一个小圆点为选中状态 dotItems[currentItemIndex].classList.add('active'); // 克隆首尾两个item，实现循环滚动 var firstItem = carouselItems[0].cloneNode(true); var lastItem = carouselItems[carouselItems.length - 1].cloneNode(true); carouselList.insertBefore(lastItem, carouselList.firstChild); carouselList.appendChild(firstItem); // 设置轮播图容器、列表、子项的宽度 carousel.style.width = '100%'; carouselItems.forEach(function (item) { item.style.width = carousel.offsetWidth / 5 + 'px'; }); carouselList.style.width = carouselItems.length * 100 + '%'; carouselList.style.left = '-100%'; } // 切换到指定项 function switchTo(index) { // 如果index超出了范围，则跳转到相应的对称项 if (index < 0) { index = carouselItems.length - 1; } else if (index >= carouselItems.length) { index = 0; } // 切换到对应的项 var distance = -index * 100 - 100; carouselList.style.transition = 'left .5s ease-in-out'; carouselList.style.left = distance + '%'; // 切换小圆点选中状态 dotItems[currentItemIndex].classList.remove('active'); dotItems[index].classList.add('active'); currentItemIndex = index; } // 自动轮播 function autoPlay() { timer = setInterval(function () { switchTo(currentItemIndex + 1); }, 3000); } // 监听小圆点的点击事件 dots.addEventListener('click', function (event) { var target = event.target; var index = target.getAttribute('data-index'); if (index !== null) { switchTo(parseInt(index)); } }); // 监听鼠标移入、移出事件 carousel.addEventListener('mouseover', function () { clearInterval(timer); }); carousel.addEventListener('mouseout', function () { autoPlay(); }); // 初始化轮播图并开始自动轮播 initCarousel(); autoPlay(); ``` 这段代码实现了一个基本的轮播图功能，轮播图下方有小圆点，可以点击小圆点切换到相应的项，鼠标移入停止自动轮播，鼠标移出继续自动轮播。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值