css实现横向与竖向进度条效果的方法
- 王林转载
- 2020-05-19 09:08:253573浏览
1、横向进度条的实现代码
<html>
<head>
<title>横向进度条</title>
<style type="text/css">
.loadbar
{
width:200px;
height:25px;
background-color:#fff;
border:1px solid #ccc;
}
.bar
{
line-height:25px;
height:100%;
display:block;
font-family:arial;
font-size:12px;
background-color:#bb9319;
color:#fff;
}
</style>
</head>
<body>
<div class="loadbar">
<strong class="bar" style='width:30%;'>30%</strong>
</div>
</body>
</html>效果如下：
二、竖向进度条的实现代码
<html>
<head>
<title>竖向进度条</title>
<style type="text/css">
.loadbar
{
width:25px;
height:200px;
background-color:#fff;
border:1px solid #ccc;
position:relative;
}
.bar
{
width:100%;
display:block;
font-family:arial;
font-size:12px;
background-color:#bb9319;
color:#fff;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div class="loadbar">
<strong class="bar" style='height:30%;'>30%</strong>
</div>
</body>
</html>实现结果：
推荐教程：CSS入门基础教程
以上是css实现横向与竖向进度条效果的方法的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文转载于：jb51.net。如有侵权，请联系admin@php.cn删除
上一篇：css如何实现字体长阴影效果下一篇：css实现快速回到顶部效果