这种重复小点大点的样式该怎么写呢，圆圈的个数是由右边组件的高度和个数来决定的

最好有案例地址。从图片的角度考虑：可能使用的是 border-image ,或者使用的背景图 (可能有个父容器放背景图，里面有个子容器放内容)，随着子容器被撑高，父容器背景图片显示面积随之增大。如果是代码实现：先制作几个圆，根据js动态加圆的div

小点用边框，dotted，大的当前圆圈用右边一行的背景图做。

这是一种时间线的功能有相应的插件戳

这种样式该怎么书写

其实主要原理就是利用了css的 border-radius 属性，一个块元素（比如div）把这个属性设置为50%，那么就显示成了一个圆形。

至于空心的圆形，利用了border属性，设置了边框，边框颜色和背景颜色不同。

以下代码的实际效果可以在线看

Html

<html>
<head>
  <title>This is a demo</title>
</head>
<body>
  <div class='leftline'>
    <div class='dot smalldot'></div>
    <div class='dot smalldot'></div>
    <div class='dot activedot'></div>
    <div class='dot smalldot'></div>
    <div class='dot smalldot'></div>
    <div class='dot smalldot'></div>
    <div class='dot smalldot'></div>
    <div class='dot smalldot'></div>
    <div class='dot smalldot'></div>
    <div class='dot bigdot'></div>
    <div class='dot smalldot'></div>
    <div class='dot smalldot'></div>
  </div>
</body>
  
</html>

CSS

.leftline {
  width: 30px;
  height: 300px;
  padding: 5px 0;
}

.dot {
  margin: 10px auto;
  border-radius: 50%;
}

.smalldot {
  width: 4px;
  height: 4px;
  background: #aaaaaa;
}

.bigdot {
  width: 10px;
  height: 10px;
  border: 4px solid #AAAAAA;
  background: #FFF;
}

.activedot {
  width: 30px;
  height: 30px;
  background: #117577;
}

最终效果图

图片描述

这种样式该怎么书写

Html

CSS

最终效果图

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？