漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版

简介: 漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版

CSS

  :root {
            --gradient: linear-gradient(135deg, #03c8f2 10%, #5151E5 100%);
        }
        .pannel {
            position: relative;
            width: 400px;
            height: 200px;
            z-index: 99;
        }
        .item {
            float: left;
            width: 190px;
            height: 90px;
            background-image: var(--gradient);
            margin: 5px;
            border-radius: 10px;
        }
        .cicle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: absolute;
            z-index: 999;
            background-image: var(--gradient);
            top: 60px;
            left: 160px;
            text-align: center;
            line-height: 80px;
            color: #fff;
        }


html

<div class="pannel">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="cicle">800</div>
</div>


lockdatav done!

相关文章
|
1月前
|
前端开发 算法
CSS语言的层叠和优先级
CSS语言的层叠和优先级
|
1月前
|
缓存 前端开发
css使用各类样式表
css使用各类样式表
|
4天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
15天前
|
前端开发 开发者
CSS基础-层叠与优先级
【6月更文挑战第10天】本文探讨了CSS中的层叠和优先级概念,解释了层叠上下文和特异性如何决定样式生效。常见问题包括误解后来居上的规则、特异性计算错误及过度使用`!important`。建议开发者理解特异性计算,合理使用层叠上下文,避免不必要的`!important`。通过示例展示了特异性与`!important`对样式的影响,强调实践和理解是提升CSS技能的核心。
|
1月前
|
前端开发
css教程-li的list-style-type属性
通过设置 `list-style-type`属性,你可以根据需求为列表项设置不同的标志样式,从而改变列表的外观。 买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
19 4
|
1月前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
【4月更文挑战第11天】按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。
65 2
|
1月前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)
【4月更文挑战第9天】本文介绍了CSS定位方式的使用,包括它的优势和8种常用的定位方法。CSS定位相比XPath定位更快、更稳定。文章通过示例详细讲解了如何使用CSS定位元素,包括通过id、name、class name、tag name、link text、partial link text以及XPath进行定位。还提供了Java代码示例来演示如何在自动化测试中使用这些定位方法。
70 1
|
1月前
|
前端开发 搜索推荐 开发者
CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
【4月更文挑战第6天】CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
26 3
|
1月前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
1月前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)
【4月更文挑战第10天】本文主要介绍了CSS定位元素的几种方法,包括ID属性值定位、其他属性值定位和使用属性值的一部分定位。作者提供了示例代码,展示了如何使用这些方法在Java+Selenium自动化测试中定位网页元素。通过CSS选择器,可以更精确地找到页面上的特定元素,如输入框、按钮等,并进行相应的操作,如输入文本、点击等。文章还提供了实际运行代码后的控制台输出和浏览器动作的示例。
79 0