css 竖行进度图_css实现横向与竖向进度条效果的方法
生活随笔
收集整理的這篇文章主要介紹了
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入門基礎教程
總結
以上是生活随笔為你收集整理的css 竖行进度图_css实现横向与竖向进度条效果的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用python爬取网页数据并存入数据库中
- 下一篇： 服务器响应时间过长_网站响应时间过长怎么