CSS 进度条

最新推荐文章于 2024-08-06 10:52:09 发布

舒浅

最新推荐文章于 2024-08-06 10:52:09 发布

阅读量846

点赞数

分类专栏： XHTML

本文链接：https://blog.csdn.net/ouyangyiqin/article/details/46698925

版权

XHTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

可以把边框和颜色去掉。

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
	<title>css进度条</title>
	<style type="text/css">
		.show_yq{
		    width:380px;
		    height: 100%;
		    margin:10px 0 0 10px;
		}
		.show_yq div.progress{
			display: inline-block;
			min-width: 300px;
			height: 15px;
			line-height: 14px;
		}
		.show_yq .yqtitle{
			display: inline-block;
			height: 25px;
			line-height: 25px;
		}
		.progress span {
		  float: left;
		  min-width: 30px;
		  max-width: 250px;
		  height: 15px;
		  line-height: 14px;
		  border-radius: 5px;
		  margin: auto 4px auto 0;
		  border: 1px solid;
		}
		.progress .green {
		  background: #4ac91e;
		  border-color: #78b337 #6ba031 #568128;
		}
		.progress .orange {
		  background: #ea7222;
		  border-color: #f0ad24 #eba310 #c5880d;
		}
		.progress .gray {
		  background: #c5cfe5;
		  border-color: #bfbfbf #b3b3b3 #9e9e9e;
		}

	</style>
</head>
<body>
	<div class="show_yq">
            正面舆情：<div class="yqtitle">
                <div class="progress"><span class="green" style="width: 25%;"></span>25%</div>
            </div>
            负面舆情：<div class="yqtitle">
                <div class="progress"><span class="orange" style="width: 15%;"></span>15%</div>
            </div>
            普通舆情：<div class="yqtitle">
                <div class="progress"><span class="gray" style="width: 60%;"></span>60%</div>
            </div>
        </div>
</body>
</html>