幽灵资源网 Design By www.bzswh.com
有时候看一些不错的滚动条效果不错,这里给大家分享一下如果用css实现
一、横向进度条
<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>
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...