css 步驟條

你說(shuō)的應(yīng)該是有序列表和無(wú)序列表。

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站制作、保山網(wǎng)絡(luò)推廣、小程序制作、保山網(wǎng)絡(luò)營(yíng)銷、保山企業(yè)策劃、保山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供保山建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

有序列表代碼:

olli步驟1/lili步驟2/li

/ol

運(yùn)行效果:

1、步驟1

2、步驟2

無(wú)序列表代碼:

ulli步驟1/lili步驟2/li

/ul

運(yùn)行效果:

·步驟1

·步驟2

在Element表格中插入步驟條，并實(shí)現(xiàn)樣式定制化

最近項(xiàng)目的原型設(shè)計(jì)中有這樣一個(gè)需求，在表格中插入一個(gè)步驟條，先貼一張完成的圖片，效果如下：

開始做的時(shí)候，查看了一下element官方文檔（傳送門： Element官方文檔 ），官方文檔中只有一些比較基本的樣式，例如：描述的步驟條、帶圖標(biāo)的步驟條等，這里就不一一贅述了。

首先，在表格中加入插槽，插入步驟條組件

使用表格的cellStyle屬性，設(shè)置步驟條一列對(duì)齊方式為左

在步驟條組件上綁定class，根據(jù)當(dāng)前列中步驟條進(jìn)度分別給“已完成”、“進(jìn)行中”、“未開始”三種狀態(tài)的步驟條賦上對(duì)應(yīng)的類樣式，js方法如下：

css樣式如下， 切記修改element組件原樣式的時(shí)候需要建立一個(gè)style標(biāo)簽，去掉scoped，并在element組件外層用一個(gè)父元素包含起來(lái)，缺前者設(shè)置會(huì)不生效，缺后者會(huì)影響全局樣式。

這里我是將步驟條原樣式中的數(shù)字顏色改成透明，分別設(shè)置三種狀態(tài)的圓圈大小及背景色，然后用.el-step__icon類設(shè)置定位，用?.el-step.is-horizontal .el-step__line設(shè)置步驟條橫線的粗細(xì)及位置，根據(jù)具體表格的對(duì)應(yīng)列寬高來(lái)設(shè)置就好啦。

用css怎么設(shè)置div滾動(dòng)條的樣式，可改變大小的

在css樣式中設(shè)置瀏覽器滾動(dòng)條樣式操作步驟如下：

1.打開軟件，新建html文檔，如下圖紅框所示為新建界面。

2.在/head和body中間書寫hmtl代碼，div這里面輸入你想要輸入的內(nèi)容即可/div，如下圖紅框所示。

3.然后在body和/body中間書寫外層軌道css代碼：body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外層軌道*/} 。

這里主要是設(shè)置外層軌道的形狀和顏色，根據(jù)想要設(shè)置的樣式進(jìn)行調(diào)節(jié)即可，如下圖紅框所示。

4.然后在外層軌道下面書寫內(nèi)層軌道css代碼：body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*內(nèi)層軌道*/}。

這里主要是設(shè)置內(nèi)層軌道的形狀和顏色，根據(jù)想要設(shè)置的樣式進(jìn)行調(diào)節(jié)即可，如下圖紅框所示。

5.以上代碼代碼輸入完成，就可以運(yùn)行看效果，效果如下紅框所示，滾動(dòng)條設(shè)置完成，如果不喜歡樣式，回去修改代碼屬性即可。