开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

评级栏的星星之间的间距？

评级栏的星星之间的间距是一个设计元素，用于提高用户界面的美观度和用户体验。在评级栏中，星星通常用于表示产品或服务的质量或评价等级。星星之间的间距可以通过调整CSS样式来控制。

以下是一个简单的示例，展示了如何使用CSS样式来设置星星之间的间距：

<!DOCTYPE html>
<html>
<head><style>
  .rating {
    display: inline-block;
    vertical-align: middle;
  }
  .rating span {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    background: url('star.png') no-repeat;
    margin-right: 5px; /* 设置星星之间的间距 */
  }
  .rating span:last-child {
    margin-right: 0;
  }
  .rating.large span {
    width: 30px;
    height: 30px;
  }
</style>
</head>
<body>
  <div class="rating">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="rating large">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>
</html>

在这个示例中，我们使用了CSS样式来设置星星之间的间距。我们使用了margin-right属性来设置星星之间的间距，并通过last-child伪类来移除最后一个星星的右边距。我们还使用了.large类来设置较大的星星。

总之，星星之间的间距是一个设计元素，可以通过调整CSS样式来控制。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

WordPress星级评分插件KK Star Ratings评分插件教程

KK Star Ratings插件教程, wordpress建站, wordpress教程, WordPress星级评分插件

02

Android评分RationBar控件使用详解

主要是不想用太多三方的控件，所以决定尽可能自己写，最近有写一个评分的页面，废话不多说直接上图

01

css定位实现星级展示没有交互

效果如图，通过定位放两张背景图，外层的放灰色的5颗星图，内层的也是，宽度根据不同级别来展示，从而实现，

05

Android自定义星星可滑动评分控件

本文实例为大家分享了Android自定义星星可滑动评分控件的具体方法，供大家参考，具体内容如下

01

自定义View之客服好评View

这个版本主要的任务就是完成环信客服系统的集成，上一篇文章仿IOS下载View 也是这个版本开发需求中的一小部分，那今天介绍一下另一个小需求客服好评。客服好评的功能在于用户对客服服务态度和质量的评价，也是作为考核客服服务的标准。相关代码已上传 EvaluationCardView

05

【Android从零单排系列十四】《Android视图控件——RatingBar》

小伙伴们，在上文中我们介绍了Android视图组件ProgressBar，本文我们继续盘点，介绍一下视图控件的RatingBar。

05

iOS实践：一步步实现星级评分1. 创建星星2. 优化3. 灵异事件

星级评分在几乎每一个电商平台都会出现，其实在这个星级评分里面不管有多少分，最终我们只用到了三张图片。我们把这个星级评分抽象出来看，每颗星星只有三种状态，半星、满星、空星。 Paste_Image.pn

04

微信出现「五星级小程序」，看看你附近的是几颗星？

6 月 21 日周三下午，知晓程序（微信号 zxcx0101）发现，微信又在悄悄地测试新能力了。

02

自定义 View 实战 06 - 仿写 RatingBar

RatingBar 效果分析： star_normal.png star_select.png 准备两张星星图，一张默认，一张选中。初始的时候绘制默认的 5 颗星星，然后根据手势绘制选中的星星。自定义属性 <declare-styleable name="KRatingbar"> //要绘制的个数 <attr name="starNum" format="integer"/> //星星之间的间距 <attr name="starPa

02

Qt官方示例-书评展示

有关书籍集合的信息在数据库中。这些书按作者、书名、类型和出版年编目。尽管每个字段都可以使用标准小部件显示和编辑，但描述该书任意分级的附加字段需要额外内容。

02

一分钟绘制磷脂双分子层：AI零基础入门和基本图形绘制

Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件，是一款非常好的图片处理工具，简称AI。

03

Android自定义评分控件：RatingStarView

本文主要介绍了一种基于Android平台的评分器的设计与实现。该评分器可以实现在不依赖外部存储和图形界面的情况下，对应用程序进行评分和评论。其主要功能包括：可以自定义评分的规则和UI样式、支持增量评分和单次评分、支持长按和滑动手势进行评分、支持多种评分和评论方式、支持多种UI样式和主题、支持网络同步和本地保存、以及支持多种异常处理和校验机制。同时，本文还提供了相关的Demo代码和完整的项目源码，以便于读者进行学习和实践。

09

网格系统 CSS Grid Layout

听闻w3cplus大漠在第三届CSS Conf上的演讲主题是CSS Grid Layout，吓得我赶紧抛下红尘俗事闭门谢客苦心钻研，唯恐脚步太慢，遥望大漠一骑绝尘而扼腕叹息。

01

网格系统 CSS Grid Layout

本文主要介绍了网格系统CSS Grid Layout，包括它的基本概念、属性、浏览器支持情况，以及如何使用CSS Grid Layout来实现网格布局。同时，还探讨了如何使用CSS Grid Layout来实现复杂的网格布局，包括如何定义网格容器的布局方式、如何使用grid-template-columns和grid-template-rows来定义网格的栏和行，以及如何设置grid-column和grid-row等属性来控制网格单元格的排列方式。最后，还介绍了一些实用的CSS Grid Layout属性，包括grid-gap、grid-row-gap和grid-column-gap等，以及如何使用这些属性来实现更加复杂的网格布局。

08

Word表格怎么调整行距？分享六个超实用技巧

选中表格，然后在[开始]界面中，点击[段落]中的[行与段落间距]图标，点击[3.0]可以将行间距调整为3倍行距。

01

iOS 设计规范

全局边距： 32px、30px、24px、20px（建议最小20px，边距数字选择偶数）

02

【论文修改中遇到的小问题集合】

首先将所需标题的文字编辑好，在上方工具栏中选择视图，在视图栏中点击大纲（即可切换为大纲视角）

03

为什么margin、padding和其他间距技术应使用 px 单位

CSS 长度是距离值的一种。CSS 百分比与长度类似，但区别在于它们总是页面中其他内容的一部分，具体取决于它们与什么属性一起使用。长度可以是绝对值，也可以是相对值。

01

css布局 - 九宫格布局的方法汇总（更新中...）

其实换一种角度和思路，又是一个解决方法，不用margin负值，我们想要li要对其ul两端效果，之所以纠结是因为li又需要margin-right，而右边最后一个li的margin又会撑开和父亲ul的距离，让我们头疼。那既然是节外生枝，我们直接让祖父砍掉多出来的那一节不就行了？父亲ul设置宽度，坚持让儿子占他的位置，而box祖父就做一个坏人，使用overflow砍掉多余出来的一个margin-right的距离。

02

首发H5活动页心得 -- 企鹅FM鬼节活动页总结

作为一个UI工程师，在这个移动互联网叱咤风云的时代，每次看到timeline中被分享的各种花样H5页面，总是心痒难耐，也想做有着酷炫动画和带感声效的H5呢。刚好企鹅FM为了迎接中元节，要做一期相关的活动页面，关键是宣传的内容用的还是盗墓笔记，盗墓笔记和盗墓笔记啊。作为一个盗（ge）墓（sao）脑残粉，非常高兴能参与制作，还是职业生涯中第一个有着酷炫动画以及动人声效的H5呢。

05

五一假期小作业

演示地址：https://gethtml.cn/project/2020/05/01/index.html

02

产品经理3分钟都懂K-means聚类算法

品经理3分钟都懂k-means聚类算法（附C++实现源码） k-means：一种聚类算法，将样本集data[N]分成K个类（要把N个杂乱无章的样本聚合成K个不同的类别，所以是聚类算法嘛）。经过k-means聚类后，各类别内部的样本会尽可能的紧凑，而各类别之间的样本会尽可能的分开。 k-means思想：将距离最近的样本认为属于同一个类，每一个类有一个“质心”样本。举例，漫天繁星，距离较近的抱团星星，我们认为它们属于一个星团，而每个星团有一颗“质心”恒星作为这个星团的代表。 k-means计算过程： 1）初始化

08

Python中得可视化：使用Seaborn绘制常用图表

Seaborn是构建在matplotlib之上的数据可视化库，与Python中的pandas数据结构紧密集成。可视化是Seaborn的核心部分，可以帮助探索和理解数据。

03

istio(1) - 安装测试

1. istio 版本选择 - 最新版 istio,参考 istio官网; - 历史版 istio,参考 istio 历史版本归档档案; - kubernetes 与 istio版本适配最新版 (1.4.3), 由下图可知, 其支持kubernetes 1.13, 1.14, 1.15 三个版本. 5eb1edfc1dd642c095920a79a4184126-0338d77a7b9a4b9faa3ea8d09d47e089.png 历史版 (1.1.9), 由下图可知, 其支持kubernetes

01

Cocos Creator 制作第一个游戏

您正在阅读的手册文档包括了系统化的介绍 Cocos Creator 的编辑器界面、功能和工作流程，但如果您想快速上手体验使用 Cocos Creator 开发游戏的大体流程和方法，这一章将满足您的好奇心。完成本章教程之后，您应该能获得足够上手制作游戏的信息，不过我们还是推荐您继续阅读本手册来了解各个功能模块的细节和完整的工作流程。

04

iOS第三方星级视图控件——HCSStarRatingView

HCStarRatingView是一款十分小巧的星级视图控件，其通过原生画图的方式来渲染星级视图页面，同时，其也支持开发者对星级图片的自定义操作。

02

LaTeX浮动体

图片或表格通常都占有较大的一块，直接放在文档常常会造成分页的困难，即前一页放不下，放在后一页又会造成很大的留白。其他一些大块的内容也可能有类似的问题，比如程序算法、大型公式和不宜断开的特殊形状段落。LaTeX 中通过引入浮动体来解决这类问题。

02

持续集成八 sonarQube配置及使用

插件地址：https://docs.sonarqube.org/display/PLUG/Plugin+Library

01

腾讯云图，让数据说话

这是星云图，他表示的是QQ同时在线人数，看到这个图大家脑袋里面想到什么？QQ，蓝钻、绿钻、太阳、月亮、上学的时候跟同学聊天，认识默认网友，你会是这众多闪亮星星中的哪一个呢，进一步分析可以看到沿海地区相对闪亮，结合现实情况，沿海地区设备网络相对发达，年轻化程度高，用户活跃等等。这就是数据可视化的魅力，给特定角色在特定场景讲述特定的故事。数据可视化的目的是让数据说话，让复杂抽象的数据以视觉的形式更准确快速的传达

PCB设计的一些实战小经验总结

PCB设计实战小经验 PS：以下操作皆是在PADS中完成。 1.操作习惯设置 PCB栅格间距，一般设置为与最小安全间距一致，如下图示，都为6mil；方便走线时，通过数栅格个数，来判段线与线之间的安全距离。补充：快速测距快捷键为Q 设置显示栅格的方法：方法一，通过菜单栏操作工具-->选项-->栅格-->设置显示栅格都为 6 方法二：无模命令 gd：显示栅格设置，如gd6 3，表示显示栅格X间距为6mil，Y间距为3mil；其它PADS无模命令可查看以下链接： https://wenku

08

【Flutter】评级对话框组件

F「lutter」是一个免费和开源的项目，由Google创建并维护，是我们喜欢Flutter的原因之一。Flutter提供了漂亮的预构建组件，这些组件在flutter中被称为Widget。扑朔迷离的一切都是小部件！

05

经典Bug永流传---每周一“虫”(二十八)

步骤：在XX页面，点击某款游戏进入以后，点击评论，然后点击我要评论，选中5颗星，然后输入内容，满一屏后，评论的星星会往上移动，

01

Z-blogPHP《小清新》至简至美个人博客主题模板，自适应加SEO优化

关于这个模板说多了都是故事，期初ZB官方发布投标公告，征集ZBP新版默认主题，当时正在制作2020年新款主题的时候，收到官方的公告。于是乎开始搁置2020新款主题，投入到默认主题的制作过程中，结果，公司服务器到期，涉及迁移相关网站数据，服务器购买等等一系列的工作任务中，不得以默认主题的招标也搁置了。11月中旬才重新制作，然后把首页截图给官方人员看了，官方回复不需要文章缩略图，作者信息也不要，然后我就放弃投标了，让他们自己折腾吧。。。

02

box-shadow 高阶玩法：纯 CSS 画蒙娜丽莎和星空

想必写过 CSS 的同学都用过 box-shadow，它可以给元素设置阴影，增加立体效果。

安卓开发过程中的RatingBar、Handler以及GPS在大型项目中的使用【Android】

点击评分栏后，通过Toast显示当前分数单击按钮获取当前分数并将其显示在TextView上

01

使用visio如何快速生成一个网格状图案，文档技巧！

2.从左侧形状窗口中基本形状中选中正方形拖动到绘图页面中，按住形状上的空心圆圈将正方形调小一些。

05

推荐60多个CSS GALLERY画廊网站

每一个设计爱好者，几乎都会浏览Gallery画廊站点。在这些站点里面，你可以欣赏到最优秀，最具创意，最有技术性的网页设计。美，就是用来享受的。帕兰每次看到自己喜欢的设计，都忍不住小小的激动一下。在这篇文章里面，帕兰为你收集了个Gallery站点，并进行简短的介绍。它们当中有好有坏，如果你仅限于欣赏，挑一些适合你自己的。如果你正准备自己创建一个Gallery站点，那你恐怕应该每个都好好的研究一下，取长补短。

02

你不知道的SVG

在过去的几年里，SVG已经变得越来越流行。这是有原因的。它们是可扩展的、灵活的，而且最重要的是，是轻量级的。而且，它们所提供的东西甚至比你想象的还要多。我们最近发现了一些神奇的SVG技术，我们很愿意与你分享。从SVG网格、SVG五星制打分效果到SVG蒙版、花哨的颗粒状SVG梯度渐变，以及方便的SVG工具。我们希望你会在这里找到有用的东西。

02

istio 流量管理

Istio Bookinfo 示例包含四个独立的微服务，每个微服务都有多个版本。其中一个微服务 reviews 的三个不同版本已经部署并同时运行。为了说明这导致的问题，在浏览器中访问 Bookinfo 应用程序的 /productpage 并刷新几次。您会注意到，有时书评的输出包含星级评分，有时则不包含。这是因为没有明确的默认服务版本路由，Istio 将以循环方式请求路由到所有可用版本，此任务的最初目标是应用将所有流量路由到微服务的 v1 （版本 1）的规则。

01

Brieflee主题-把最好的送给你

--.更新下拉代码，修正下拉文章重复的BUG； --.新增自定义诗词赏析名称； --.新增侧栏跟随自定义名称； --.精简代码； --.其他优化。

02

【CSS】340- 常用九宫格布局的几大方法汇总

其实换一种角度和思路，又是一个解决方法，不用margin负值，我们想要li要对其ul两端效果，之所以纠结是因为li又需要margin-right，而右边最后一个li的margin又会撑开和父亲ul的距离，让我们头疼。那既然是节外生枝，我们直接让祖父砍掉多出来的那一节不就行了？父亲ul设置宽度，坚持让儿子占他的位置，而box祖父就做一个坏人，使用overflow砍掉多余出来的一个margin-right的距离。

01

在sap系统设置纸张打印格式(针式打印机)

在sap做一个打印报表，要先设置一个纸张打印格式，下面以工厂中常用来打印的针孔纸为例，在sap设置该纸张的打印格式，以用于报表：

01

写给设计师的人工智能指南：推荐系统

本期更新第6篇文章，聊聊“推荐系统”。推荐系统核心的是推荐算法，常用有这几种：基于内容推荐协同过滤推荐基于关联规则推荐基于效用推荐基于知识推荐组合推荐。最常用的还是组合推荐 Hybrid Recommendation 由于各种推荐方法都有优缺点，所以在实际中，组合推荐经常被采用。最简单的做法就是分别用基于内容的方法和协同过滤推荐方法去产生一个推荐预测结果，然后用某方法组合其结果。用的最多的是协同过滤算法，这也是本文要重点介绍的。协同过滤推荐 Collaborative Filteri

04

JavaScript实现满天星导航栏

实现这个效果，需要掌握的知识不用很多，知道简单的CSS，会用JS 获取元素，能绑定事件基本就足够了。好的，我们直接来看代码，注释已经写的很详细了，不想看有注释的，点这里。

04

谷歌做了45万次不同类型的文本分类后，总结出一个通用的“模型选择算法”

【新智元导读】谷歌官方推出“文本分类”指南教程。为了最大限度地简化选择文本分类模型的过程，谷歌在进行大约450K的文本分类实验后，总结出一个通用的“模型选择算法”，并附上一个完整的流程图，非常实用。

02

【总结】移动应用界面设计的尺寸设置及规范

刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。

04

微信小程序自定义导航栏兼容适配所有机型

这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custom，如果使用自定义导航栏，我们可以

Power BI模拟豆瓣评分图表

我们买书、看电影很多时候拿豆瓣评分作为判断好坏的依据。下图是一本书的评分结果。它既反映了总分，也反映了评分分布，还可以看到评分池大小（评价人数）。总分越高，打五分的人比例越高，评价人数越多，你可能越倾向于选择这个作品。

03

Flutter TextStyle参数解析关于学习

Flutter里面的文本样式 image const TextStyle({ this.inherit: true, // 为false的时候不显示 this.colo

01

think-cell chart 系列1——堆积柱形图！

今天正式开始跟大家分享之前介绍过的图表插件——think-cell chart 。要讲的第一个图表类型是其自带图表库中的第一个图表——堆积柱形图。在正式开始之前，请确保你的电脑上已经成功安装了th

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭