全国服务热线:4008-888-888

技术知识

html5给中国汉字加拼音加进度条的完成编码

网编新项目上近期设计方案有个新要求,要给汉纸加拼音,相近于加英文底部副标题相近,终究如今我们汉语之远大,大伙儿都在学习培训和应用汉语。下面就让大家学习培训1下吧,h5如今早已很强劲足以应对许多要求。

1、给中国汉字加拼音 <ruby><rt>

demo1眼便知:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf⑻" />
        <title></title>
    </head>
    <body style="position: relative;margin: 0 auto; margin-top: 100px;text-align: center;">
        <ruby>
         大家全是出色的人
          <rt>wo men dou shi you xiu de ren</rt>
        </ruby>
    </body>
</html>

拼音全自动的垂直居中,站中国汉字的均分部位。

倘若大家删除在其中几个拼音,会是如何呢,请看实际效果:

是否很智能化、很便捷呢!!!

2、进度条

progress进度条:

话很少说,立即上编码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf⑻" />
        <title></title>
    </head>
    <body style="position: relative;margin: 0 auto; margin-top: 100px;text-align: center;">
        <ruby>
         大家全是出色的人
          <rt>wo men dou </rt>         
        </ruby>
        <br>
        <br>
        <br>
        <br>
        修仙进度:<progress value="36" max="100"></progress>
    </body>
</html>

是否很简易很便捷呢!

可是呢留意1点:
progress不合适用来表明衡量衡,假如想表明衡量衡,大家应当应用meter标识替代。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf⑻" />
        <title></title>
    </head>
    <body style="position: relative;margin: 0 auto; margin-top: 100px;text-align: center;">
        <ruby>
         大家全是出色的人
          <rt>wo men dou </rt>         
        </ruby>
        <br>
        <br>
        <br>
        <br>
        修仙进度:<progress value="36" max="100"></progress>
        <br>
        <br>
        <meter value="80" min="0" max="100"></meter> 百分之810
        <br>
        <br>
        <br>
        <meter value="0.1"></meter> 10%
    </body>
</html>

网编觉得的确不足美观大方,如需更为美观大方,必须自身加上色调 款式。这里临时出示1些小的demo.要想掌握更多前端开发专业知识,关心网编不迷了路,哈哈哈哈哈哈!!!

到此这篇有关html5给中国汉字加拼音加进度条的完成编码的文章内容就详细介绍到这了,更多有关html5加拼音加进度条內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服