摘要:一运行截图二代码代码个代码
一、运行截图
二、代码
html代码:
1 <div id="box" style="min-height:253px;"> 2 <span class="one">span> 3 <span class="two">span> 4 <span class="three">span> 5 <span class="four">span> 6 7 <nz-card style="background-color: #13123a;border: 0px;color: white;background-color: transparent;"> 8 <div style="padding:24px 12px;"> 9 <p style="font-size: 16px;margin-bottom: 0px;color: #8cc5fe;background-image: url(./../../assets/images/title.png);width: 250px;background-size: contain;background-repeat: no-repeat;height: 28px;line-height: 28px;padding-left: 10px;margin-left: -12px;margin-top: -12px;">{{installationrankingsComponentConfig.title}}p> 10 11 <p *ngFor="let item of installationrankingsComponentConfig.data" style="line-height: 60px;height: 36px;color: #87c8fc;"> 12 <span class="province_name" style="width:35%;float: left;position: relative;font-size: 12px;"> 13 {{item.provincename}} 14 span> 15 <span class="progress_container" style="width: 51%;float: left;position: relative;left: 2%;"> 16 <nz-progress [nzPercent]="item.percent" nzType="line" nzStatus="active" [nzStrokeWidth]="20" >nz-progress> 17 span> 18 <span class="percent_container" style="width:12%;float: right;position: relative;font-size: 12px;padding: 0px;line-height: 13px;margin-top: 18px;"> 19 {{item.devicenum}}个 20 {{item.percent}}% 21 span> 22 p> 23 div> 24 nz-card> 25 26 div>
css代码:
1 #box{ 2 /* height: 200px; */ 3 min-height: 200px; 4 box-shadow: 0 0 1px 1px #0f3a6c, 0 0 6px 1px #0f3a6c inset; 5 margin: 0 auto; 6 position: relative; 7 padding: 5px; 8 box-sizing: border-box; 9 color: #fff; 10 margin-bottom: 10px; 11 } 12 #box span{ 13 position: absolute; 14 width:60px; 15 height:30px; 16 } 17 #box .one{ 18 width: 14px; 19 height: 14px; 20 left:0; 21 top:1px; 22 border-top:1px solid #1890ff; 23 border-left:1px solid #1890ff; 24 margin:-1px 0 0 -1px; 25 } 26 #box .two{ 27 width: 14px; 28 height: 14px; 29 right:0; 30 top:1px; 31 border-top:1px solid #1890ff; 32 border-right:1px solid #1890ff; 33 margin:-1px -1px 0 0; 34 } 35 #box .three{ 36 width: 14px; 37 height: 14px; 38 left:0; 39 bottom:0; 40 border-left:1px solid #1890ff; 41 border-bottom:1px solid #1890ff; 42 margin:0 0 -1px -1px; 43 } 44 #box .four{ 45 width: 14px; 46 height: 14px; 47 right:0; 48 bottom:0; 49 border-right:1px solid #1890ff; 50 border-bottom:1px solid #1890ff; 51 margin:0 -1px -1px 0; 52 }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1222.html
摘要:盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区元素中内容文本图片等等内边距内容区到边框的距离边距内容区的边界外边距盒子与盒子之间的距离属性表示设置元素的边框属性是简写属性可以分为表示边框的宽度表示边框的样式 盒子模型 描述 每一个元素都可以叫做是盒子模型 盒子模型的组成 内容区 - 元素中内容(文本、图片、等等) 内边距 - 内容区到边框的距离 边距 - 内容区的...
摘要:盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区元素中内容文本图片等等内边距内容区到边框的距离边距内容区的边界外边距盒子与盒子之间的距离属性表示设置元素的边框属性是简写属性可以分为表示边框的宽度表示边框的样式 盒子模型 描述 每一个元素都可以叫做是盒子模型 盒子模型的组成 内容区 - 元素中内容(文本、图片、等等) 内边距 - 内容区到边框的距离 边距 - 内容区的...
摘要:架构盒子模型以内容区显示文本和图像内边距内容区至边距的距离边距内容区的边界外边距元素的边框之间的距离边距属性简写属性用来设置边距的上右下左。 CSS架构 盒子模型; 以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距; border属性; 简写属性用来设置边距的上(top)右(right)下(bottom)左(lef...
摘要:会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型,浮动和清除。 这是CSS设计指南的读书笔记,用于加深学习效果。 上一篇介绍了css 的工作原理,这一篇主要介绍盒子模型和浮动。 盒子模型 所谓盒子模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。 可见的页面版式主要由三个属性...
阅读 427·2023-04-25 19:43
阅读 3621·2021-11-30 14:52
阅读 3414·2021-11-30 14:52
阅读 3521·2021-11-29 11:00
阅读 3487·2021-11-29 11:00
阅读 3520·2021-11-29 11:00
阅读 3256·2021-11-29 11:00
阅读 5407·2021-11-29 11:00