javascript - 这种样式该怎么书写

Question

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

天蓬老师 · Answer

It is best to have a case address.
Consider from the perspective of pictures: You may use border-image, or use a background image (there may be a parent container for the background image, and a sub-container for the content) ), as the child container is raised, the display area of the background image of the parent container increases.
If it is code implementation: first make a few circles, and dynamically add p of the circle according to js

大家讲道理 · Answer

The small dots are dotted with a border, and the large current circle is made with the background image on the right row.

高洛峰 · Answer

This is a timeline function with corresponding plug-in stamp

阿神 · Answer

In fact, the main principle is to use the border-radius attribute of CSS. If a block element (such as p) sets this attribute to 50%, it will be displayed as a circle.

As for the hollow circle, the border attribute is used to set the border, and the border color is different from the background color.

The actual effect of the following code can be viewed online

Html



  This is a demo

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

Final renderings