首页 - 商城 - 控件 - 正文

HTML实现简易温度计

10 8.00

HTML实现简易温度计,简单易学


分类: 控件 更新时间: 2020-09-16

实现效果图如下:

1820422930.png

实现代码:

HTML



<div id="temperature">
    <div id="normalv">
    </div>
    <div id="tmpbottom">
    </div>
</div>

CSS

#temperature{
    position: relative;
    width:20px;
    height:286px;
    background-color: red;
    margin-top:46px;
    margin-left:150px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    float:left;
}
#tmpbottom{
    position: absolute;
    width:40px;
    height:40px;
    border-radius: 20px;
    bottom: 0;
    background-color: #95F204;
    margin-left:-10px;
}
#normalv{
    position: absolute;
    width:18px;
    height:200px;
    background-color: #95F204;
    margin-left:1px;
    bottom: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


如需完整代码,请点击购买!谢谢支持!

发表评论 取消回复

很抱歉,您暂时无法发布评论。需要 登录 后才能发布。