Css流程圆形图

最新推荐文章于 2024-07-26 20:26:30 发布

remake code

最新推荐文章于 2024-07-26 20:26:30 发布

阅读量193

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_36925540/article/details/125615224

版权

Css流程圆形图

样式图

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
				body{
					margin: 10px;
					padding: 10px;
					background-color: #EEEEEE;
				}
				 
				.progess-bar{
					float: left;with: 100%;
					height: 100px;
				}
				 
				.ball{
					width: 40px;
					height: 40px;
					border-radius: 20px;
					margin-left: 40px;
				}
				 
				.progress{
					width: 100px;
					height: 2px;
					margin-left: 25px;
					margin-top: -17px;
					float: left;
				}
				 
				.detail{
					margin-left: 40px;
					float:left;
					font-size: 19px;
					color: #242222;
					position: relative;
					top: -32px;
					left: 13px;
				}
				 
				.flow-detail{
					margin: 2px;
				}
				 
				.active{
					background-color: #ff9c00
				}
				 
				.negative{
					background-color: #9F9F9F
				}
						
				.ball.active.second{
					margin-left: 0px;
					background-color: #9F9F9F
				}
				.detail.second{
					left:-28px;
				}
				.progress.negative.second{
					margin-left: -16px;
				}
		</style>
        <title>
        </title>
    </head>
    
    <body>
        <div class="progess-bar">
            <div class="ball active">
            </div>
            <div class="detail">
                <div class="flow-detail">
                    1
                </div>
            </div>
            <div class="progress active">
            </div>
        </div>
        <div class="progess-bar">
            <div class="ball active second">
            </div>
            <div class="detail second">
                <div class="flow-detail">
                    2
                </div>
            </div>
            <div class="progress negative second">
            </div>
        </div>
		<div class="progess-bar">
            <div class="ball active second">
            </div>
            <div class="detail second">
                <div class="flow-detail">
                   3
                </div>
            </div>            
        </div>
    </body>
 
</html>