css实现竖向步骤条

已于 2022-02-22 21:09:22 修改
阅读量2.1k 收藏 5
点赞数 4
文章标签： css css3 html
于 2022-02-22 21:06:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/de_shy/article/details/123077401
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title></title>
		<base target="_blank" />
		<style>
			.hovertree-tracklist ul li {
				list-style: none;
			}

			.hovertree-trackrcol {
				max-width: 900px;
				border: 1px solid #eee;
			}

			.hovertree-tracklist {
				margin: 20px;
				padding-left: 5px;
				position: relative;
			}

			.hovertree-tracklist li {
				position: relative;
				padding: 9px 0 0 25px;
				line-height: 18px;
				border-left: 1px solid #d9d9d9;
				color: #999;
			}

			.hovertree-tracklist li.first {
				color: red;
				padding-top: 0;
				border-left-color: #fff;
			}

			.hovertree-tracklist li .node-icon {
				position: absolute;
				left: -6px;
				top: 50%;
				width: 11px;
				height: 11px;
				background: url(http://hovertree.com/texiao/css/25/img/order-icons.png) -21px -72px no-repeat;
			}

			.hovertree-tracklist li.first .node-icon {
				background-position: 0 -72px;
			}

			.hovertree-tracklist li .time {
				margin-right: 20px;
				position: relative;
				top: 4px;
				display: inline-block;
				vertical-align: middle;
			}

			.hovertree-tracklist li .txt {
				max-width: 600px;
				position: relative;
				top: 4px;
				display: inline-block;
				vertical-align: middle;
			}

			.hovertree-tracklist li.first .time {
				margin-right: 20px;
			}

			.hovertree-tracklist li.first .txt {
				max-width: 600px;
			}

		</style>
	</head>
	<body>
		<div class="hovertree-trackrcol">
			<div class="hovertree-tracklist">
				<ul>
					<li class="first"><i class="node-icon"></i><span class="time">2016-06-06</span><span
							class="txt">111111111111111111111111111</span></li>
					<li><i class="node-icon"></i><span class="time">2016-06-06 </span>
					<span class="txt">22222222222222222222</span></li>
					<li><i class="node-icon"></i><span class="time">2016-06-06 </span><span
							class="txt">333333333333333333333</span></li>
					<li><i class="node-icon"></i><span class="time">2016-06-06 </span><span
							class="txt">444444444444444444444</span></li>
					<li><i class="node-icon"></i><span class="time">2016-06-05 </span><span
							class="txt">5555555555555555555</span></li>
					<li><i class="node-icon"></i><span class="time">2016-06-05 </span><span
							class="txt">666666666666666666666</span></li>
				</ul>
			</div>
		</div>
		
	</body>
</html>

效果
在这里插入图片描述

de_shy
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css实现竖向步骤条.zip
09-21
css实现竖向步骤条.zip
jq+css实现竖向导航栏
12-04
jq+css实现竖向导航栏.
【css】纵向步骤条竖线的实现--css伪类
一位前行者的博客
06-17 3329
近期做H5开发，需要实现一个自定义步骤条，记录一下竖线的实现。css也比较简单主要是flex布局和伪类的样式实现。
JS实现数据动态渲染的竖向步骤条
01-19
本文实例为大家分享了JS实现数据动态渲染竖向步骤条的具体代码，供大家参考，具体内容如下 实现以下效果： 运用的知识点主要是html的伪元素。然后步骤条通过js动态渲染。最后一条数据的状态颜色状态为高亮状态。 直接上代码 html部分： <ul class=progress_box> </ul> css部分： * { margin: 0; padding: 0; } ul { width: 360px; margin:100px auto; } li { position: relative; padding: 0
纯HTML流程步骤条
12-08
纯HTML自适应流程步骤条，根据需求定制修改，下载即可用
移动端CSS实现小程序竖向步骤条
许粤军的博客
09-12 1385
移动端CSS实现小程序竖向步骤条。
CSS实现竖向步骤条
guoruijun_2012_4的专栏
10-21 1457
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .steps-container { display: flex; flex-direction: column; justify-
uniapp插件开发：uniapp之slider滑动选择插件，方向支持横向和竖向，更多参数可配置化
qq_42961150的博客
10-28 8695
目录 概要 平台支持度 效果图 属性说明 使用示例 Tips 更多前端知识 概要 在做小程序的时候，遇到需要竖向放置的slider滑动组件，原以为将官方提供的slider旋转90度就可以用了，后面发现没法那样使用，于是我自己写了该插件，支持竖向放置和滑动。 此插件功能与官方提供的slider功能类似，但是官方的不支持竖向滑动，所以该插件支持两个方向：横向、竖向。 uniapp插件市场下载：https://ext.dcloud.net.cn/plugin?id=6538 git地址：https://g
uniapp纵向选项卡实现
bbt953的博客
05-06 1435
如图所示，当需要实现这样式的纵向选项卡时，可以用uniapp里面的scroll-view可滚动视图区域 <!-- 左侧的滑动区域 --> <scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> </scroll-view> <!-- 右侧的滑动区域 --> <scroll-view class="right-scroll-view" scro.
CSS步骤条，进度条
04-27
CSS步骤条，进度条，纯css，挺舒服的，可惜不能传图片
纯CSS实现的竖向导航菜单
09-05
纯CSS实战竖向导航菜单，这也算是一个典型的CSS菜单啦，这里要用到两个背景图片，在鼠标动作时分别加载不同的背景图片，以达到反差给人的清新效果，其实这种菜单的制作是很简单的，代码量不大，作为初级者的教程还是很不错的。
css 横向进度条和竖向进度条实现代码
11-21
有时候看一些不错的滚动条效果不错，这里给大家分享一下如果用css实现 一、横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css"> .loadbar { width:200...
CSS实现步骤进度条——前端每日一练
qq_42544728的博客
11-16 3664
向上间隔50%的高度，由于存在自身的高度，到哪都使用该属性并不会显示居中。：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。向上移动相对自身高度的50%，和上一个属性结合可以实现垂直居中显示。：生成相对定位的元素，相对于其正常位置进行定位。的默认数值指向全局对象，浏览器就是。的数值不是由该调用设置的，因此。盒子包裹所有内容，里面划分为。但是在JavaScript中。，六个⭕分别对应着六个子。由于下面的代码并不是在。指的是当前对象的一个。call和apply。
【css常用布局】简易步骤条的搭建（小白向）
庞囧的博客
08-15 551
文章目录效果展示实现原理 效果展示 实现原理 布局分析： html部分： <div class="center"> <!-- 容器 --> <div class="container"> <!-- 第一步 --> <div class="item"> <!-- 图案 --> <div class="step_wrap"> <!-- 占位元素 --&gt
CSS实现进度条和订单进度条---竖向
zyf_smile的博客
06-28 1781
之前做了一个横向订单进度条，手机访问显示很难兼容样式，下面做一个竖向的，再结合情况微调一下，方便去兼容手机。
uniapp-colorui参照
qq_44368698的博客
06-02 479
数字竖向排列
uni-app伪类添加竖线
江黎
06-19 2645
.tab-icon { position: relative; display: flex; // 水平居中 justify-content: center; // 垂直居中 align-items: center; width: 45px; // 伪类 &::after { content: ''; position: absolute; top: 12px; bottom: 12px; le...
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
最新发布
博客
05-17 137
HTML,CSS,JavaScript,DOM的理解
uniapp自定义竖向步骤条
08-27
UniApp 是一个基于 Vue.js 的跨平台框架，可以用于开发多个平台的应用程序。如果你想要自定义竖向的步骤条，可以通过使用 Vue.js 和 CSS 来实现。 首先，你可以创建一个组件来表示每个步骤，例如 Step.vue： ```vue <template> <div :class="{'step': true, 'active': isActive}">{{ index }}</div> </template> <script> export default { props: { index: { type: Number, required: true }, isActive: { type: Boolean, default: false } } } </script> <style scoped> .step { width: 50px; height: 50px; border-radius: 50%; line-height: 50px; text-align: center; background-color: #ccc; } .active { background-color: #ff0000; color: #fff; } </style> ``` 然后，在你的页面中使用这个组件来创建竖向的步骤条，例如 Steps.vue： ```vue <template> <div class="steps"> <step v-for="(step, index) in steps" :key="index" :index="index + 1" :is-active="currentStep === index + 1" /> </div> </template> <script> import Step from '@/components/Step.vue' export default { components: { Step }, data() { return { steps: ['Step 1', 'Step 2', 'Step 3'], currentStep: 1 } } } </script> <style scoped> .steps { display: flex; flex-direction: column; } </style> ``` 在上面的例子中，使用了一个数组来定义步骤的文本内容，然后通过 v-for 指令和 Step 组件来渲染每个步骤。通过给 Step 组件传递 `:is-active` 属性来判断当前步骤是否为激活状态。 这样，你就可以在 UniApp 中自定义竖向的步骤条了。根据你的需要，你可以根据具体的样式要求进行调整和扩展。希望对你有所帮助！如果你对这方面还有其他问题，可以继续问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值