html和CSS制作一个静态进度条的示例

小编给大家分享一下html和CSS制作一个静态进度条的示例,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

创新互联公司主要从事成都网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务蕉岭,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

用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;
   }

效果图:

html和CSS制作一个静态进度条的示例

由图可见,一个70%的绿色进度条就制作好了。

看完了这篇文章,相信你对html和CSS制作一个静态进度条的示例有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前标题:html和CSS制作一个静态进度条的示例
标题来源:http://scyanting.com/article/jsgpji.html