css步骤条样式,css样式表基本规则

css 步骤条

你说的应该是有序列表和无序列表。

有序列表代码:

olli步骤1/lili步骤2/li

/ol

运行效果:

1、步骤1

2、步骤2

无序列表代码:

ulli步骤1/lili步骤2/li

/ul

运行效果:

·步骤1

·步骤2

相关问答

Q1: 在Element表格中插入步骤条，并实现样式定制化

最近项目的原型设计中有这样一个需求，在表格中插入一个步骤条，先贴一张完成的图片，效果如下：

    开始做的时候，查看了一下element官方文档（传送门： Element官方文档 ），官方文档中只有一些比较基本的样式，例如：描述的步骤条、带图标的步骤条等，这里就不一一赘述了。

    首先，在表格中加入插槽，插入步骤条组件

使用表格的cellStyle属性，设置步骤条一列对齐方式为左

    在步骤条组件上绑定class，根据当前列中步骤条进度分别给“已完成”、“进行中”、“未开始”三种状态的步骤条赋上对应的类样式，js方法如下：

css样式如下， 切记修改element组件原样式的时候需要建立一个style标签，去掉scoped，并在element组件外层用一个父元素包含起来，缺前者设置会不生效，缺后者会影响全局样式。

这里我是将步骤条原样式中的数字颜色改成透明，分别设置三种状态的圆圈大小及背景色，然后用.el-step__icon类设置定位，用 .el-step.is-horizontal .el-step__line设置步骤条横线的粗细及位置，根据具体表格的对应列宽高来设置就好啦。

Q2: 用css怎么设置div滚动条的样式，可改变大小的

在css样式中设置浏览器滚动条样式操作步骤如下：

1.打开软件，新建html文档，如下图红框所示为新建界面。

2.在/head和body中间书写hmtl代码，div这里面输入你想要输入的内容即可/div，如下图红框所示。

3.然后在body和/body中间书写外层轨道css代码：body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外层轨道*/} 。

这里主要是设置外层轨道的形状和颜色，根据想要设置的样式进行调节即可，如下图红框所示。

4.然后在外层轨道下面书写内层轨道css代码：body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*内层轨道*/}。

这里主要是设置内层轨道的形状和颜色，根据想要设置的样式进行调节即可，如下图红框所示。

5.以上代码代码输入完成，就可以运行看效果，效果如下红框所示，滚动条设置完成，如果不喜欢样式，回去修改代码属性即可。