貓城
BLACKCAT CASTLE

用 CSS 製作步驟進度條(直式+橫式)Step Progress Bar

   15 VIEWS
用 CSS 製作步驟進度條 Step Progress Bar
目次

本篇將利用清單<ul><li>來製作進度條,並分享直式與橫式做法。

直式範例

  • Step 1
  • Step 2
  • Step 3

邏輯:
建立無序列表清單,將清單預設樣式移除,透過偽元素::before::after來自定樣式。

HTML 的部分:

<div class="verticalContainer">
	<ul class="verticalProgress">
		<li>Step 1</li>
		<li>Step 2</li>
		<li>Step 3</li>
	</ul>
</div>

CSS 的部分:

<style type="text/css">

/* 清單內外距 */
.verticalContainer ul {
	margin: 0;
	padding: 0 3%;
}
/* 列表項目處理 */
.verticalProgress li {
	position: relative; 
	list-style-type: none; /* 移除項目預設樣式 */
}
/* 圓點處理 */
.verticalProgress li::before {
	display: inline-block; /* 水平區塊 */
	width: 1.5em; /* 區塊大小 */
	height: 1.5em; /* 區塊大小 */
	background-color: rgb(77, 185, 148); /* 區塊顏色 */
	border-radius: 50%; /* 區塊圓角 */
	content: "●";
	color: white;
	font-size: 1em;
	line-height: 1.5em; /* 上下置中 */
	text-align: center; /* 水平置中 */
	margin: 0px 10px 25px 0px;
}
/* 線條處理 */
.verticalProgress li::after {
	position: absolute;
	content: "";
	top: -30px;
	left: .7em;
	z-index: -1; /* 讓線條置於圓圈後 */
	height: 110%;
	border-left: 1px solid #4db994;
	padding-left: 20px;
}
/* 第一列不要有線條 */
.verticalProgress li:first-child::after {
	content:none;
}
</style>

橫式範例

  • Step 1
  • Step 2
  • Step 3

邏輯:
建立無序列表清單,將清單預設樣式移除,透過偽元素::before::after來自定樣式。

HTML 的部分:

<div class="horizontalContainer">
	<ul class="horizontalProgress">
		<li>Step 1</li>
		<li>Step 2</li>
		<li>Step 3</li>
	</ul>
</div>

CSS 的部分:

<style type="text/css">

/* 物件長寬 */
.horizontalContainer {
	width: 100%;
	height: 100px;
}
/* 清單內外距 */
.horizontalContainer ul {
	margin: 0;
	padding: 0 3%;
}
/* 列表項目處理 */
.horizontalProgress li {
	position: relative; 
	list-style-type: none; /* 移除項目預設樣式 */
}
/* 圓點處理 */
.horizontalProgress li::before {
	display: inline-block; /* 水平區塊 */
	width: 1.5em; /* 區塊大小 */
	height: 1.5em; /* 區塊大小 */
	background-color: rgb(77, 185, 148); /* 區塊顏色 */
	border-radius: 50%; /* 區塊圓角 */
	content: "●";
	color: white;
	font-size: 1em;
	line-height: 1.5em; /* 上下置中 */
	text-align: center; /* 水平置中 */
	margin: 0px 10px 25px 0px;
}
/* 線條處理 */
.horizontalProgress li::after {
	position: absolute;
	content: "";
	top: -30px;
	left: .7em;
	z-index: -1; /* 讓線條置於圓圈後 */
	height: 110%;
	border-left: 1px solid #4db994;
	padding-left: 20px;
}
/* 第一列不要有線條 */
.horizontalProgress li:first-child::after {
	border-left: none;
}
</style>

自訂有序清單列表

由於移除了預設清單列表樣式,因此如果希望保留有序列表,可透過偽元素以及counter來自製數字清單。

範例

  • Hello world!
  • BlackCat Castle
  • Sigure Town

HTML 的部分:

<div class="counterContainer">
	<ul class="counterProgress">
		<li>Hello world!</li>
		<li>BlackCat Castle</li>
		<li>Sigure Town</li>
	</ul>
</div>

CSS 的部分:

<style type="text/css">
.counterContainer {
	counter-reset:num; /* 數字歸零 */
}
.counterProgress li {
	list-style-type: none; /* 移除清單預設樣式 */
}
.counterProgress li::before {
	counter-increment:num; /* 數字遞增 */
	content:counter(num) '. '; /* 顯示數字以及小數點 */
}
</style>

結合進度條範例

  • Hello world!
  • BlackCat Castle
  • Sigure Town

HTML 的部分:

<div class="couHorCon">
	<ul class="couHorPro">
		<li>Hello world!</li>
		<li>BlackCat Castle</li>
		<li>Sigure Town</li>
	</ul>
</div>

CSS 的部分:

<style type="text/css">

/* 物件長寬 */
.couHorCon {
	width: 100%;
	height: 100px;
	counter-reset:num; /* 數字歸零 */
}
/* 清單內外距 */
.couHorCon ul {
	margin: 0;
	padding: 0 3%;
}
/* 列表項目處理 */
.couHorPro li {
	position: relative;
	list-style-type: none; /* 移除清單預設樣式 */
	float: left; /* 靠左浮動 */
	width: 33.33%; /* 項目間距 */
}
/* 圓點處理 */
.couHorPro li::before {
	display: block; /* 建立區塊 */
	width: 1.5em; /* 區塊大小 */
	height: 1.5em; /* 區塊大小 */
	background-color: #1f7356; /* 區塊顏色 */
	border-radius:50%; /* 區塊圓角 */
	content:"●";
	color:white;
	font-size: 1em;
	line-height:1.5em; /* 上下置中 */
	text-align:center; /* 水平置中 */
	margin:0 0 10px 0;
	counter-increment:num; 
	content:counter(num);
}
/* 線條處理 */
.couHorPro li::after {
	position: absolute;
	content: "";
	top: 15px;
	left: -100%;
	z-index: -1; /* 讓線條置於圓圈後 */
	width: 100%;
	height: 1px;
	background-color: #4db994;
}
/* 第一列不要有線條 */
.couHorPro li:first-child::after {
	content:none;
}
</style>

增加活動狀態

完成進度條後通常會需要製作狀態,在<li>中增加class="active",接著同樣透過偽元素來改變顏色或樣式即可。

範例

  • 註冊
  • 驗證碼
  • 完成

HTML 的部分:

<div class="activeCouHorCon">
	<ul class="activeCouHorPro">
		<li class="active>註冊</li>
		<li>驗證碼</li>
		<li>完成</li>
	</ul>
</div>

CSS 的部分:

<style type="text/css">

/* 物件長寬 */
.activeCouHorCon {
	width: 100%;
	height: 100px;
	counter-reset:num; /* 數字歸零 */
}
/* 清單內外距 */
.activeCouHorCon ul {
	margin: 0;
	padding: 0 3%;
}
/* 列表項目處理 */
.activeCouHorPro li {
	position: relative;
	list-style-type: none; /* 移除清單預設樣式 */
	float: left; /* 靠左浮動 */
	width: 33.33%; /* 項目間距 */
	color:#4db994;
}
/* 圓點處理 */
.activeCouHorPro li::before {
	display: block; /* 建立區塊 */
	width: 1.5em; /* 區塊大小 */
	height: 1.5em; /* 區塊大小 */
	background-color: #1f7356; /* 區塊顏色 */
	border-radius:50%; /* 區塊圓角 */
	content:"●";
	color:white;
	font-size: 1em;
	line-height:1.5em; /* 上下置中 */
	text-align:center; /* 水平置中 */
	margin:0 0 10px 0;
	counter-increment:num; 
	content:counter(num);
}
/* 線條處理 */
.activeCouHorPro li::after {
	position: absolute;
	content: "";
	top: 15px;
	left: -100%;
	z-index: -1; /* 讓線條置於圓圈後 */
	width: 100%;
	height: 1px;
	background-color: #4db994;
}
/* 第一列不要有線條 */
.activeCouHorPro li:first-child::after {
	content:none;
}
.activeCouHorPro li.active {
	color: #26f52d;
}
.activeCouHorPro li.active:before {
	color: #ffffff;
	border-color: #009805;
	background: #009805;
}
.activeCouHorPro li.active + li:after {
	background-color: #009805;
}
</style>
以上就是進度條 + 數字序列 + 活動狀態的用法,如果這篇文章對你有幫助,請幫我按讚哦(*´ω`*)


時雨 時雨,時雨の町-日文學習園地站長,為了紀錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站知識與相關的網頁程式語言,如果你喜歡我的文章,請幫我按讚哦(*´ω`*)。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS