HTML+CSS3实现PH值范围，完美过渡

最新推荐文章于 2021-06-04 05:57:13 发布

It-Samba

最新推荐文章于 2021-06-04 05:57:13 发布

阅读量347

点赞数

文章标签： html5 html css3

本文链接：https://blog.csdn.net/thissamba/article/details/105000109

版权


<html>
    <head>
        <title>Color</title>
        <style type ="text/css">
    body{
        background-colro:silver;
        colir:white;
        padding:20px;
        font-family:Arial, Verdana, sans-serif;}
    h1{
        background-color: #ffffff;
        background-color: hsla(0, 100%saturation, 100%lightness, 0.5alpha);
        color:#64645A;
        padding:inherit;}
    p{
        padding:5px;
        margin:0px;}
    p.zero{
        background-color: rgb(238,62,128);
    }
    p.one{
        background-color: rgb(244,90,139);
    }
    p.two{
        background-color: rgb(243,106,152);
    }
    p.three{
        background-color: rgb(244,123,166);
    }
    p.four{
        background-color: rgb(245,140,178);
    }
    p.five{
        background-color: rgb(246,159,192);
    }
    p.six{
        background-color: rgb(245,176,204);
    }
    p.seven{
        background-color: rgb(0,187,136);
    }
    p.eight{
        background-color: rgb(140,202,242);
    }
    p.nine{
        background-color: rgb(140,202,242);
    }
    p.ten{
        background-color: rgb(84,182,237);
    }
    p.eleven{
        background-color: rgb(48,170,233);
    }
    p.twelve{
        background-color: rgb(0,160,230);
    }
    p.thirteen{
        background-color: rgb(0,149,226);
    }
    p.fourteen{
        background-color: rgb(0,136,221);
    }  
    </style>
    </head>
    <body>
        <h1>pH Scale</h1>
        <p class="fourteen">14.0 VERY ALKALINE</p>
        <p class="thirteen">13.0</p>
        <p class="twelve">12.0</p>
        <p class="eleven">11.0</p>
        <p class="ten">10.0</p>
        <p class="nine">9.0</p>
        <p class="eight">8.0</p>
        <p class="seven">7.0</p>
        <p class="six">6.0</p>
        <p class="five">5.0</p>
        <p class="four">4.0</p>
        <p class="three">3.0</p>
        <p class="two">2.0</p>
        <p class="one">1.0</p>
        <p class="zero">0.0 VERY ACIO</p>
    </body>
    </html>

在这里插入图片描述
效果如上图所示，html+css3 PH值范围，通过这个页面来演示使用CSS指定颜色各种方式
并且源码中利用了一个margin属性减小段落之间的间隙们还用了padding属性设置盒子边缘与文本之间的间距。