如何用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

随机推荐

  • 日月之精华是什么词语?

    日月之精华,这个词语令人们感到神秘又充满遐想。它是指日月所蕴含的核心精髓,代表着宇宙的奥秘和生命的力量。无论是古人还是现代人,对于日月之精华的探索和理解都是永恒的话题。从科学的角度来看,日月之精华可以理解为温度。在宇宙中,太阳是光和热的源泉

    2024-04-15
    59500
  • 一个人的精神崩溃了会怎么样?、

    生活中有精神支柱崩塌的现象,此时会产生末日感,以前建立起来的立身之基,包括信念、才能、健康、亲情、物质、人脉等等,一时间失去了发挥的平台。在新规则下,它们没有上场的机会,眼看着原先不如自己的人不断地与自己擦身而过走上舞台,而自己成了孤独的观

    2024-04-15
    49000
  • 薇诺娜清痘修复精华液好用吗?薇诺娜清痘精华液祛痘效果

    脸上长痘痘这样的肌肤问题,在现实生活中是非常常见的,也是很多年轻肌肤的美眉们最大的肌肤问题,长痘痘会使自己的肌肤有炎症损伤,并且还会导致肌肤的毛孔粗大,今天小编要介绍的是一款祛痘的精华液,是纯植物配方的,就是薇诺娜清痘修复精华液。1、产品介

    2024-04-15
    55900
  • 一瓶神仙水230ml成本

    -ll神仙水230ml :1520元一瓶精华水80MI:560元眼霜15MI:640元一套加起来在2720左右,敬请参考:Sk2明星产品:1、SK-II环采臻皙钻白精华露这款精华人称它为"小灯泡"。提取自日本杏的珍稀精萃及Pixel-Whi

    2024-04-15
    55200
  • 红伊思蜗牛水乳怎么样

    以下全是我爱听的,希望你能喜欢。1、snowdreams(雪的梦幻)2、river flows in you3、kiss the rain4、三个人的时光5、我曾在那一角落患过伤风6、The mass(弥撒)7、Hello Zepp(电锯惊

    2024-04-15
    39900
  • 婷美美肌黑金抗皱紧致套盒咋用

    晚上厚涂之后。第2天早上皮肤真的能感觉到软软的嫩嫩的。质地满足不同肌肤所需,油皮或混油皮挚爱清润轻盈型,干皮心水绵密滋润型,极致肤感一抹入坑,这款升级香调体验,灵感源自莫奈花园,想要解锁同款女神颜的姐妹,入它准没错。点线面三维紧塑年轻,硬核

    2024-04-15
    52300
  • sk2清莹露护肤品适合什么肤质呢?那么该如何正确使用呢?

    sk2清莹露适合什么样的皮肤?sk2清莹露适合大部分肤质。可用于油性皮肤、干性皮肤、混合性皮肤。另外还有去除角质层的作用。保湿皮肤效果明显,也可用于所有敏感肌或痘痘肌。不过大家要注意的是,每个人对清营洗液成分的敏感程度是不一样的。如果出现红

    2024-04-15
    39800

发表评论

登录后才能评论
保存