如何用HTML5实现如下的样式,急求源代码!!!!

如何用HTML5实现如下的样式,急求源代码!!!!,第1张

css:

test{
    font-weight:500;
    font-family: "黑体";
    font-size: 14px;
}
test p span{
    width:50px;
    height:15px;
    display: inline-block;
    border-right:2px solid white;
    text-align: center;
}
test tex span:first-child{
    width:25px;
    text-align: left;
}
test clo span:nth-child(1){
    background-color:#01E400; 
}
test clo span:nth-child(2){
    background-color: #FFFF00;
}
test clo span:nth-child(3){
    background-color:#FF7E00; 
}
test clo span:nth-child(4){
    background-color: #FF0000;
}
test clo span:nth-child(5){
    background-color: #99004C;
}
test clo span:nth-child(6){
    background-color: #7E0023;
    border-right:none;
}

html:

<div class="test">
        <p>PM25浓度示意图例(微克/立方米)</p>
    <p class="clo"><span></span><span></span><span></span><span></span><span></span><span></span></p>
    <p class="tex"><span>0</span><span>35</span><span>75</span><span>115</span><span>150</span><span>250</span></p>
</div>

欢迎分享,转载请注明来源:品搜搜测评网

原文地址:https://pinsoso.cn/meirong/3081188.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2024-01-19
下一篇2024-01-19

随机推荐

  • 精华露怎么用

    1、首先精华露在使用时需要倒在手掌上,将它搓热之后再全部涂抹到脸上,这样可以使精华露中的营养物质和小分子,在掌心的温度下乳化后迅速被肌肤吸收。2、其次就是采用从下往上拍打的方式,来加速肌肤对精华露的吸收。如果是把精华露涂抹在脸上之后随意的用

    2024-04-15
    43100
  • 福州最好吃的牛排店

     几乎所有福州的西餐厅都会有牛排这一出品,到底哪家的牛排最美味,最能让人垂涎呢相信各位食客会有许多不同的声音,为了满足无数酷爱牛排的吃货之需,我特地为大家精心挑选了福州城中10家出品美味牛排的餐厅,快来看看吧。  福

    2024-04-15
    33200
  • 妮维雅唇膏好用吗?

    说到妮维雅的产品许多人首先会想到就妮维雅男士洗面奶以及平衡爽肤水等等,而除了这些产品之外,许多人同样也都是非常喜欢用妮维雅的唇膏的,那么妮维雅唇膏真的好用吗?妮维雅的唇膏哪一款最好用呢?妮维雅唇膏效果怎么样?1、妮维雅唇膏好用吗妮维雅天然型

    2024-04-15
    27800
  • 韩国护肤品十大排名品牌

    韩国十大品牌护肤品如下:1、whoo后在韩国十大护肤品品牌中,whoo荣登榜首,这个品牌将宫廷的美容秘笈与现代的东方医学相互结合,让广大的亚洲女性为之倾心。2、呼吸37度在韩国十大护肤品品牌中,起着重要的地位,它一直坚持自然美丽的概念,致力

    2024-04-15
    39500
  • 水光焕颜套盒好不好

    水光焕颜套盒好。根据查询相关公开信息显示,这个水光焕颜套盒一般是指保湿补水系列的美容护肤品,它们通常包括洁面、爽肤水、乳液、精华液和面霜等,这类套盒质量是很好的,可以满足日常护肤需求。女人30岁以后,选择使用焕颜套盒还是补水套盒,这是众多女

    2024-04-15
    26000
  • 妮维雅防晒乳怎么样?妮维雅防晒乳使用方法

    妮维雅这个品牌大家应该并不陌生,很多人都用过妮维雅的产品,妮维雅的产品种类也比较多,它们家的防晒霜在平价市场中一直都是很受欢迎的,妮维雅的防晒霜确实值得推荐,价格也不贵,防晒效果也还不错,那妮维雅防晒乳怎么样?妮维雅防晒乳使用方法1、按压装

    2024-04-15
    33800
  • 大牌护肤品对应的平替都有什么?

    清莹露和神仙水的区别为价格区别、外观区别、功效区别、适用人群不同、效果区别。1、成分区别:神仙水是由半乳糖酵母的发酵物过滤液组成,除了丁二醇和其它润肤成份之外,没有其它有效成份。清莹露是用水做溶剂,加入了酵母、甘油、适量的乳化剂和酸类,水杨

    2024-04-15
    27500

发表评论

登录后才能评论
保存