需要实现一个竖向步骤条

需要用css画一个简单的竖向步骤条，内容不限，圆点和竖线就可以。

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

CSDN专家-showbo 2022-06-27 09:21

关注


<!doctype html>
<style>
.fund{padding-left:15px;color:#999;font-size:12px}
.fund li{list-style:none;padding:0;position:relative;border-left:solid 1px #ccc;padding-left:10px;line-height:30px}
.fund li b,.fund .mask{position:absolute;left:-4px;width:7px;height:7px;border-radius:50%;background:#0541a7;top:50%;margin-top:-3.5px;z-index:2}
.fund .mask{background:#fff;height:15px;width:7px;left:-4px;top:0;z-index:1}
.fund li:last-of-type .mask{top:auto;bottom:0}
</style>
<ul class="fund">
    <li>
    <div class="mask"></div>
    <b></b>
    认购提交
    </li>
    <li>
        &nbsp;
    </li>
    <li>
        <div class="mask"></div>
        <b></b>查看盈亏
    </li>
</ul>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(1条)

编辑

预览

报告相同问题？

关注问题

uview 步骤条组件的问题前端
2022-08-10 09:56

回答 1 已采纳这个都能做吧。前者需要控制状态。后者修改样式
element-ui step步骤条的使用问题 elementui vue.js 前端
2022-04-19 14:35

回答 1 已采纳 1.data应该是有return的一个函数data(){return ｛｝}2.在data中声明一下active，目前看你的active不是一个响应式数据，所以你改变this.active的值进
手写步骤条，怎么选择页面非最后一个circle的所有元素呢？前端
2022-05-25 09:59

回答 1 已采纳类似这样 <div class="main"> <div class="item"> <div class="item1"&
JS实现数据动态渲染的竖向步骤条
2020-10-14 21:04

在本文中，我们将探讨如何使用JavaScript（JS）实现数据动态渲染的竖向步骤条。这个功能常用于展示流程或任务的进度，例如在电子商务、银行服务或任何需要用户完成一系列步骤的应用中。以下是如何实现这一功能的详细...
关于element-ui步骤条"下一步"按钮禁用问题 elementui vue.js 前端
2022-12-16 07:08

回答 3 已采纳看下这篇博客，也许你就懂了，链接：关于element-ui 中步骤条的深度使用(一)
vue+elementui步骤条设置 elementui vue.js
2022-03-01 02:49

回答 2 已采纳层级注意设置了scoped 定义样式穿透 .el-step__head.is-success > .el-step__line{background:red}
不清楚其中的一个步骤 c语言
2022-12-28 05:44

回答 4 已采纳在上述程序中，'0' 在 ASCII 码表中对应的十进制数为 48。当字符串 s 中的字符转换为整数时，可以使用公式 s[j] - '0' 来计算，其中 '0' 用于将字符转换为数字。例如，如果 s
微信小程序-竖向步骤条组件
2024-01-26 06:16

为了实现这样一个竖向步骤条组件，开发者需要掌握微信小程序的基础知识，包括WXML（结构模板语言）、WXSS（样式语言）以及JavaScript（逻辑处理）。在编写代码时，需要理解组件的生命周期、数据绑定和事件处理机制。...
这个两个题需要步骤解释 c++ c语言
2021-11-14 13:49

回答 1 已采纳 if(x<y)为真，则执行if(y<0),y<0为真，则执行z=0,否则执行else语句z=z+1;if(x<y)为假，则执行printf("%d\n",z)
关于选择法排序的一个步骤 c++
2021-10-08 11:32

回答 1 已采纳你的排序少了一个步骤，虽然不影响最终结果，但K没有发挥它的用处：不稳定的排序-选择排序_NICHUN12345的博客-CSDN博客前言选
Java实现一个宿舍文件管理系统 java 有问必答
2021-08-23 09:14

回答 4 已采纳主要是io流的操作。学习对象、file文件流。如果是web项目的话，需要学习一些基础的框架，来完成这些内容。
CSS实现竖向步骤条
2023-10-21 15:10

guoruijun_2012_4的博客 /* 最后一个步骤不需要线条 */ } .step-circle { position: absolute; left: 0; top: 20px; transform: translateY(-50%); width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background-color: ...
css实现竖向步骤条
2022-02-22 13:06

de_shy的博客 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <... .hovertree-tr
移动端CSS实现小程序竖向步骤条
2022-09-12 08:31

May_Xu_的博客移动端CSS实现小程序竖向步骤条。
vue实现竖式步骤条_手把手教你实现一个 Vue 进度条组件！
2020-12-18 18:57

weixin_39986973的博客最近在个人的项目中，想对页面之间跳转的过程进行优化，想到了很多文档或 npm 等都用到的页面跳转进度条，于是便想自己去实现一个，特此记录。来看下 npm 搜索组件时候的效果：so 下面咱们一起动手实现一下呗。定义...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 7月4日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 6月27日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 6月27日

需要实现一个竖向步骤条

2条回答 默认 最新

问题事件

2条回答默认最新