html box 竖线,【CSS】这种竖线效果如何实现呢
如图,左侧环节这边的竖线如何连起来,右侧的点数不固定,尺寸就不固定,右侧点和线效果我已经实现,整个内容都是动态生成的
回答:
css就可以实现
Document
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#box{
width: 300px;
height: 100%;
overflow: auto;
padding: 20px;
}
.pitem{
padding: 30px;
padding-left: 60px;
border-left: 3px solid #1D6DE5;
position: relative;
}
.pitem:last-child{
border-left-color: transparent;
}
.pitem .name{
position: absolute;
top: -2px;
left: 8px;
font-size: 12px;
}
.pitem .node{
position: absolute;
width: 8px;
height: 8px;
border: 2px solid #1D6DE5;
background: #fff;
border-radius: 50%;
top: 0;
left: -8px;
}
.pitem .node:after{
content: '';
position: absolute;
width: 2px;
height: 2px;
background: #1D6DE5;
top: calc(50% - 1px);
left: calc(50% - 1px);
border-radius: 50%;
}
.citem{
height: 30px;
border-left: 2px solid #1D6DE5;
position: relative;
}
.citem:after, .citem:before{
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #1D6DE5;
border-radius: 50%;
left: -5px;
}
.citem:before{
top: -4px;
}
.citem:after{
bottom: -4px;
}
//生成元素
let arr = [4, 3, 5, 2]
document.getElementById('box').innerHTML = arr.map(item => {
let html = ''
for(let i = 0; i < item; i++){
html += '
}
return `
${html}
`
}).join('')
回答:
可以光明正大地贴一个自己做的方案了:易锦教育-职业体系课程-安卓逆向工程师。
我用的是伪元素,通过绝对定位偏移到左边,.part-index 的伪元素用来显示圆圈,.chapter-wrapper的伪元素用来显示时间轴。
一个知识点:只有元素本身有定位(比如position: relative),其伪元素才能相对该元素进行定位和设置宽高。
时间轴线高度:.chapter-wrapper 的高度是被课程列表撑开的,然后给 .chapter-wrapper 设置 position:relative,给伪元素设置 position:absolute,这样伪元素就可以设置高度值为百分比(我用的是给定top和bottom让它自己计算的方法),然后位置稍微调节一下就可以了。
回答:
采用盒子(内容部分)的左边框实现线条,使用伪元素实现小点 位置相对父父元素来进行定位
html box 竖线,【CSS】这种竖线效果如何实现呢相关推荐
- CSS背景半透明效果
说到CSS的透明效果可以使用如下方式: 1. opacity属性设置:例如opacity:0.7,而低版本的IE浏览器不直接支持这个属性,但是可以使用滤镜filter:alpha(opacity:70 ...
- 纯CSS实现弹幕效果
纯CSS实现弹幕效果 动画相关的属性和方法已经本部分的开头简单提过了,我们来看一下本次要实现的效果--弹幕- 当你在阅读.看视频的时候经常会遇见一段文件或者一张表情从页面划过,要实现一个完整的功能很复 ...
- 如何用css实现百叶窗效果
1.效果图 利用纯css实现百叶窗效果 效果如下: 2.代码如下: 1.创建一个div 2.设置无序列表,插入事先准备好的图片 <!DOCTYPE html> <html lan ...
- CSS animation动画效果实现精灵图、雪碧图动画,多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用 素材下载 分析图片动画过程 图片可以分成4*6=24 小图片也就是24帧 方法1 可以把每一行成一个动画,所以可以拆分4个动画 方 ...
- html弹跳动画效果,CSS弹跳动画效果的实现方法
这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我 ...
- css实现手风琴效果
在很多页面布局中,都运用到了手风琴效果,大部分都是js来实现的,今天使用纯css实现手风琴效果,其中用到了弹性盒布局.定位和伪类 效果图如下: 实现此效果代码如下 html: <body> ...
- R语言ggplot2可视化:为图像中的均值竖线、中位数竖线、 geom_vline添加图例(legend)
R语言ggplot2可视化:为图像中的均值竖线.中位数竖线. geom_vline添加图例(legend) 目录
- html css鼠标手型效果
html css鼠标手型效果 style="cursor:pointer" 转载于:https://blog.51cto.com/chengang/1288597
- 纯 CSS 实现波浪效果!
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
最新文章
- 探索从 MVC 到 MVVM + Flux 架构模式的转变
- c++ builder 读取指定单个名称节点的值
- 程序员必知必会之blog篇
- 对重复的记录使用SQL进行查询和删除等操作
- 【读书笔记】练习的心态
- QuickBI助你成为分析师——搞定数据源
- 6-6-阶段案例:传智书城JSP页面
- 模块化设计html,从空格谈起--关于CSS模块化设计
- 使用JMX监控Zookeeper状态Java API
- cocos2dx 开发成长之路 004
- 【Linux】Linux基本操作指令
- 漫谈手游商业游戏前端框架
- ffmpeg视频裁剪
- dp主机_DP接口与HDMI接口的区别?
- 华为鸿蒙系统失败,世界首富很无奈,第三大手机系统失败,华为鸿蒙会成功吗...
- 计算机实训报告心得怎么写,计算机实训报告心得体会范文_计算机实训总结怎么写...
- 国内部分视频剪辑软件使用总结
- python实现百度语音之语音识别
- Tensorboard无法显示图片
- max31865模块 PT100测温 PT1000测温 接线说明要点说明 使用说明 程序 单片机
热门文章
- java 学习笔记 良葛格_Java良葛格 学习笔记《二》
- 【明日方舟 人工智能】在罗德岛学习人工智能的日子 (一)
- 【优先队列】Toda 2
- android开发面试问题,这个回答让我错失offer!好文推荐
- scrapy 爬取大型图片网站(http://5442.com/)
- cordova 指纹验证登录
- \itshape和\textit的区别or用法
- 笔试题??智商题??
- hexo之icarus主题的美化修改以及简单的SEO配置
- JavaEE程序猿面向对象世界观⑥