在html中怎样加圆点,css伪类-小圆点
项目需求:在每个单元格的前面加一个小圆点,效果图如下:
效果图.jpg
搜了一大堆文章,加小圆点的方法无非就是设置width、height、border-raduis。可是来来回回试了好多遍,就是样式加不上,汗颜~
偶然间看一大神说必须加上display:inline-block;才会生效,我的天呐,不会是真的吧。对,就是这个样子滴,附上完整的代码,可随意ctrl c+v
.headers {
border-radius: @border-radius;
border: 1px solid @border-hr-color;
margin: 15px 0 24px;
overflow: hidden;
.header {
background-color: @table-th-bg;
height: 42px;
line-height: 42px;
color: @font-content-color;
font-weight: bold;
padding-left: 16px;
}
.con-items {
display: flex;
flex-wrap: wrap;
}
.item {
position: relative;
cursor: default;
box-sizing: border-box;
width: calc((100% + 3px) / 3);
border: 1px solid @border-hr-color;
height: 41px;
line-height: 41px;
padding-left: 32px;
margin-bottom: -1px;
margin-left: -1px;
font-size: @font-size-normal;
color: @primary-blue-color;
}
.item:nth-child(3n+0) { // 此行为了解决细线边框问题
border-right: none;
}
.item::before { // 小圆点在这里
content: '';
position: absolute;
left: 16px;
top: 45%;
border: 1px solid @primary-blue-color;
background-color: @primary-blue-color;
display: inline-block; // 此句为css样式展示重点
在html中怎样加圆点,css伪类-小圆点相关推荐
- css文字右边加横线,CSS伪类before,after制作左右横线中间文字效果
Title .container{ width: 1000px; margin: 10px auto; border: 1px solid red; } h3.title { color: #F2AE ...
- HTML子选择器怎么加图,CSS伪类选择器:before、:after使用:插入字符、插入图片、插入项目编号...
before: 伪元素选择器用于在某个元素之前插入一些内容 伪类选择器:before使用content属性插入字符.属性插入图片 css3 .p_before:before { content: 'H ...
- html伪类元素加图片,CSS伪类选择器:before、:after使用:插入字符、插入图片、插入项目编号...
before: 伪元素选择器用于在某个元素之前插入一些内容 伪类选择器:before使用content属性插入字符.属性插入图片 css3 .p_before:before { content: 'H ...
- css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
- HTML中的Postion定位问题及盒子模型、CSS伪类
一.Postion定位问题 1.相对定位(postion:realtive) 图像可以根据原有位置移动,但是原先图像的位置不会改变,哪怕出现空白部分.(占位置) 2.绝对定位(postion:abso ...
- 怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- :empty css 可以用在哪些标签,CSS伪类:empty让我眼前一亮(实例代码)
最近看过我文章的都知道:我最近在负责一个微信小程序的项目,在其中遇到了很多有趣的事和一些"奇思妙想".本文的背景就是某天早上我看着wxml文件中一堆wx:if/else和hidde ...
- CSS 伪类选择器:如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
- html之CSS设计(CSS伪类、优先级、字体属性、背景属性)
文章目录 一.CSS伪类 二.CSS优先级 三.CSS属性 1.CSS颜色设置 2.颜色属性 3.背景属性 本篇文本主要介绍html编程中的CSS伪类.优先级.字体属性.背景属性,前两种是CSS选择器 ...
- CSS伪类选择器详细讲解
前言 伪类选择器在CSS中起到的作用可以说是至关重要的,如果CSS没有伪类选择器,有很多效果都要借助js来完成,这样不仅代码量增加,维护起来你难度也大.这样程序员的工作量大,也违背了CSS诞生的作用, ...
最新文章
- rabbitmq 限制速度_=(:) RabbitMQ详解
- linux连接wifi账户密码忘了怎么办,wifi登录密码忘了怎么办?
- 给Visual Studio 2010中文版添加Windows Phone 7模板
- python毕业设计开题报告-基于Python图书管理系统开题报告
- CentOS7下安装nginx1.99
- 从外到内提高SQL Server数据库性能
- C/C++头文件大全
- linux 挂载多余空间,linux 空间不够,磁盘挂载
- 【渝粤教育】电大中专新媒体营销实务 (11)作业 题库
- mysql shell
- VMware 即使克隆解析
- 我说我了解集合类,面试官竟然问我为啥HashMap的负载因子不设置成1!?
- 正式发布! .NET开发控件集ComponentOne 新版本加入Blazor UI
- 平板直撑的腰椎问题(塌腰)
- 机器学习入门——详解主成分分析
- rsyslog及loganalyzer
- SAS程序探索性因子分析
- 此主机当前没有管理网络冗余,该主机的vSphere HA检测信号数据存储数目为0,少于要求数目:2的原因及解决办法
- Tracup已证明,高效敏捷的沟通与协作可提升IT生产力
- Eclipse 各种设置