大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下html和CSS制作一个静态进度条的示例,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网站空间、营销软件、网站建设、揭东网站维护、网站推广。用CSS制作一个简单的进度条需要用到CSS中的基本知识,比如border-radius圆角,居中等等,如有不清楚的同学可以参考创新互联的相关文章,或者访问 CSS视频教程,一定要把基础学好啊!
实例:用html和CSS制作一个简单的静态进度条
HTML部分:
观察进度条可以发现,进度条由两部分组成,一个是进度条的总长度,一个是进度的长度,所以我们创建两个div,一个div作为父元素,另一个div作为子元素,并分别给他们一个class类名,便于对其设置样式,具体代码如下:
进度条
70%
CSS部分:
基本框架已经出来了,现在需要给两个div设置样式。将第一个div的长设置为300px,高设为30px,背景颜色设为#ddd,为了美观,我们还可以用border-radius属性将其变为圆角。将第二个div的长设置为70%,也就是进度条的值,给div一个不同于父元素的颜色,便于看出效果,最后用line-height和text-align: center让位置水平垂直居中,具体代码如下:
.container { width: 300px; height: 30px; background-color: #ddd; border-radius: 20px; } .skills { line-height: 30px; color: white; border-radius: 20px; text-align: center; width: 70%; background-color: #4CAF50; }
效果图:
由图可见,一个70%的绿色进度条就制作好了。
看完了这篇文章,相信你对html和CSS制作一个静态进度条的示例有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。