javascript - 这种样式该怎么书写
问题描述
这种重复小点 大点 的样式该怎么写呢，圆圈的个数是由右边组件的高度和个数来决定的
问题解答
回答1：最好有案例地址。从图片的角度考虑：可能使用的是border-image,或者使用的背景图(可能有个父容器放背景图，里面有个子容器放内容)，随着子容器被撑高，父容器背景图片显示面积随之增大。如果是代码实现：先制作几个圆，根据js动态加圆的p
回答2：小点用边框，dotted，大的当前圆圈用右边一行的背景图做。
回答3：这是一种时间线的功能有相应的插件戳
回答4：其实主要原理就是利用了css的 border-radius 属性，一个块元素（比如p）把这个属性设置为50%，那么就显示成了一个圆形。
至于空心的圆形，利用了border属性，设置了边框，边框颜色和背景颜色不同。
以下代码的实际效果可以在线看
Html<html><head> <title>This is a demo</title></head><body> <p class=’leftline’> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot activedot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> <p class=’dot bigdot’></p> <p class=’dot smalldot’></p> <p class=’dot smalldot’></p> </p></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;}最终效果图
相关文章：
1. apache - 本地搭建wordpress权限问题2. docker 下面创建的IMAGE 他们的 ID 一样？这个是怎么回事？？？？3. css3 - transition属性当鼠标一开的时候设置的时间不起作用4. 热切期待朱老师的回复，网页视频在线播放器插件配置错误5. macos - mac下docker如何设置代理6. Android下，rxJava+retrofit 并发上传文件和串行上传文件的效率为什么差不多？7. angular.js - ng-grid 和tabset一起用时，grid width默认特别小8. javascript - web网页版app返回上一页按钮在ios设备失效怎么办？安卓上可以，代码如下，请大神帮助，万分感谢。9. Whitelabel错误页面发生意外错误（类型=未找到，状态= 404）/WEB-INF/views/home.jsp10. java - Spring Mvc全局异常处理器@ControllerAdvice不起作用？
网公网安备