css 竖行进度图_css实现横向与竖向进度条效果的方法
生活随笔
收集整理的這篇文章主要介紹了
css 竖行进度图_css实现横向与竖向进度条效果的方法
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1、橫向進(jìn)度條的實(shí)現(xiàn)代碼
橫向進(jìn)度條.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%
效果如下：
二、豎向進(jìn)度條的實(shí)現(xiàn)代碼
豎向進(jìn)度條.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%
實(shí)現(xiàn)結(jié)果：
推薦教程：CSS入門基礎(chǔ)教程
總結(jié)
以上是生活随笔為你收集整理的css 竖行进度图_css实现横向与竖向进度条效果的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 用python爬取网页数据并存入数据库中
- 下一篇： mysql查询中文_MySQL中like