1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css 竖行进度图_css实现横向与竖向进度条效果的方法

css 竖行进度图_css实现横向与竖向进度条效果的方法

时间:2020-08-14 01:37:08

相关推荐

css 竖行进度图_css实现横向与竖向进度条效果的方法

1、横向进度条的实现代码

横向进度条

.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;

}

30%

效果如下:

二、竖向进度条的实现代码

竖向进度条

.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;

}

30%

实现结果:

推荐教程:CSS入门基础教程

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。