css进展图

最新推荐文章于 2021-08-03 09:10:44 发布

宣讯

最新推荐文章于 2021-08-03 09:10:44 发布

阅读量165

点赞数

分类专栏： css

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container {
				width: 50%;
				height: 20%;
				background: #f8f8f8;
				margin: 0 auto;
				margin-top: 10%;
				padding-top: 46px;
			}

			.line {
				width: 50%;
				height: 10px;
				margin: 0 auto;
				background-color: #ddd;
				justify-content: space-between;
				display: flex;
				align-items: center;
				flex-flow: row nowrap;

			}

			.line span {
				width: 9px;
				height: 9px;
				background: #ddd;
				border-radius: 50%;
				border: 8px solid #ddd;
			}

			.line .active {
				background: #003399;
				border: 8px solid #003399;
			}

			.text {
				font-family: '微软雅黑';
				font-weight: 600;
				font-size: 23px;
				color: #ccc;
				justify-content: space-between;
				align-items: center;
				display: flex;
				width: 50%;
				margin: 21px auto;
				flex-flow: row nowrap;
			}
			.text .active{
				color:#003399;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<div class="line">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="text">
				<span class="active">第一步</span>
				<span>第二部</span>
				<span>第三部</span>
				<span>第四部</span>
			</div>
		</div>
	</body>
</html>