当前位置: 首页 > news >正文

如何html css完成分层金字塔

近期才通过自学了html和css,今日恰好做一个金字塔实例,能够清晰的看得出标志数据信息,必须 的朋友们下边伴随着小编来一起学习学习吧

文中关键详细介绍了html css完成分层次金字塔的实例,共享给大伙儿,实际以下:

先上实际效果再看编码

watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

直接上代码

// html
<div class="finetriangle"><div class="sanjiao"><!-- 金字塔 --><div class="sj sj1"></div><div class="sj sj2"></div><div class="sj sj3"></div><div class="sj sj4"></div><div class="sj sj5"></div><!-- 右侧数据填入 --><div class="comarow descsj1"><span class="line"></span><span class="value" id="hgwvalue">0</span></div><div class="comarow descsj2"><span class="line"></span><span class="value" id="gwvalue">0</span></div><div class="comarow descsj3"><span class="line"></span><span class="value" id="zgwvalue">0</span></div><div class="comarow descsj4"><span class="line"></span><span class="value" id="zwvalue">0</span></div><div class="comarow descsj5"><span class="line"></span><span class="value" id="dwvalue">0</span></div><!-- 中间文字 --><div class="describe describe1">很高危</div><div class="describe describe2">&nbsp;&nbsp;&nbsp;&nbsp;</div><div class="describe describe3">中高危</div><div class="describe describe4">&nbsp;&nbsp;&nbsp;&nbsp;</div><div class="describe describe5">&nbsp;&nbsp;&nbsp;&nbsp;</div></div>
</div>// css
<style>body {width: 100%;height: 100%;}.finetriangle {width: 300px;height: 200px;background: #082449;}.finetriangle .sanjiao {width: 308px;margin: 0 auto;position: relative;transform: translateY(-50%);-webkit-transform: translateY(-50%);top: 46%;padding-right: 30px;}.finetriangle .sj {margin: 0 auto;height: 0;border-top: 0 solid transparent;border-right: 15px solid transparent;border-left: 15px solid transparent;border-bottom-width: 30px;border-bottom-style: solid;box-sizing: content-box;margin-bottom:www.qlyl1688.com 9px;}.finetriangle .sj1 {width: 0;border-bottom-color: #ff0086;box-shadow: 0 10px 0 0 #cc007e;}.finetriangle .sj2 {width: 40px;border-bottom-color: #ff3600;box-shadow: 0 10px 0 0 #ce1d00;}.finetriangle .sj3 {width: 80px;border-bottom-color: #ff7f00;box-shadow: 0 10px 0 0 #d16800;}.finetriangle .sj4 {width: 120px;border-bottom-color: #ffc94d;box-shadow: 0 10px 0 0 #e5912e;}.finetriangle .sj5 {width: 160px;border-bottom-color: #67ce67;box-shadow: 0 10px 0 0 #499c49;}.finetriangle .comarow {font-size: 12px;position: absolute;}.finetriangle .line {display: inline-block;height: 1px;margin-bottom: 5px;}.finetriangle .value {font-size: 16px;}.finetriangle .descsj1 {top: 5px;margin-left: 146px;color: #ff0086;}.finetriangle .descsj1 .line {width: 100px;background: #ff0086;}.finetriangle .descsj2 {top: 41px;margin-left: 166px;color: #ff3600;}.finetriangle .descsj2 .line {width: 80px;background: #ff3600;}.finetriangle .descsj3 {top: 81px;margin-left: 186px;color: #ff7f00;}.finetriangle .descsj3 .line {width: 60px;background: #ff7f00;}.finetriangle .descsj4 {top: 119px;margin-left: 206px;color: #ffc94d;}.finetriangle .descsj4 .line {width: 40px;background: #ffc94d;}.finetriangle .descsj5 {top: 159px;margin-left: 226px;color: #67ce67;}.finetriangle .descsj5 .line {width: 20px;background: #67ce67;}.finetriangle .describe {position: absolute;margin-left: 135px;font-size: 12px;color: #ffffff;}.finetriangle .describe1 {top: 10px;}.finetriangle .describe2 {top: 46px;}.finetriangle .describe3 {top: 86px;}.finetriangle .describe4 {top: 124px;}.finetriangle .describe5 {top: 163px;}
</style>

到此这篇关于html css完成分层金字塔的实例的文章就介绍到这了,更多相关请关注脚本之家!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-35505.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

AndroidStudio自动下载 jxbrowser 卡住解决办法

最近更新了 Android Studio到 Arctic Fox 版本后&#xff0c;打开项目会自动下载 jxbrowser &#xff0c;但是这个插件是 Google 的&#xff0c;正常是不能下载成功的&#xff0c;虽然不影响开发&#xff0c;但一直出现下载状态挺难受 解决方法很简单 就是设置代理 找到设置 …...

Linux之VFS

一、概述 1.1 VFS简介 Linux支持多种不同文件系统&#xff0c;要实现这个目的&#xff0c;就要将对各种不同文件系统和管理纳 入到一个统一的框架中&#xff0c;让内核中的文件系统界面成为一条文件系统“总线”&#xff0c;使用户程序 可以通过同一个文件系统操作界面&#x…...

隐私保护与生成模型: 差分隐私GAN的梯度脱敏方法

一、差分隐私是什么&#xff1f; 这篇文章以差分隐私和生成模型为主要研究对象&#xff0c;针对面临的问题&#xff0c;先介绍相关的背景知识和现有研究方法&#xff0c;后展示解决方案和实验结果。 机器学习模型的训练需要大量的数据喂食&#xff0c;而这些数据的应用就会涉…...

web前端开发学习路线图!

移动互联网时代&#xff0c;HTML5前端开发成为“抢手货”&#xff01;各大招聘网站前端相关岗位空缺大、薪资高&#xff0c;很多人在学习前端开发&#xff0c;学习前端&#xff0c;我觉得最不缺少的一个是完善的系统的web前端开发/html5学习路线图&#xff0c;另一个就是好的课…...

树和二叉树——数据结构 (严蔚敏C语言版)

1.树 1.1树的定义 树(Tree)是n(n≥0&#xff09;个结点的有限集&#xff0c;它或为空树(n0);或为非空树&#xff0c;对于非空树T: (1&#xff09;有且仅有一个称之为根的结点;(2&#xff09;除根结点以外的其余结点可分为m (m>0)个互不相交的有限集T1, T2,…,Tm&#xff…...

解决国内下载vscode慢的方法

VSCO的的下载地址&#xff1a; https://code.visualstudio.com/Download 下载也太慢了 解决办法&#xff1a; 复制链接到新的窗口&#xff0c;将圈起来的地方改为国内镜像地址&#xff1a;vscode.cdn.azure.cn 然后几秒就下载好啦...

P4173 残缺的字符串

P4173 残缺的字符串 题意&#xff1a; 有A&#xff0c;B两个串&#xff0c;每个串都有通配符&#xff0c;问A为模板串&#xff0c;对于 B 的每一个位置 i&#xff0c;从这个位置开始连续 m 个字符形成的子串是否可能与 A 串完全匹配&#xff1f; 题解&#xff1a; 我们定义…...

Linux 文件系统 整理

独栋别墅&#xff0c;容积率低 root 用户 高层。 用户组 用户 $more 预览 文件名 more /etc/group a.txt 文本 .java Java文件 Linux中不以后缀作为区分&#xff0c; 回车 &#xff1a;换行 空格&#xff1a;换页 q&#xff1a;退出 $tail&#xff1a; 尾巴 $tail -10 /etc/gr…...

cartographer_ros node (三)

上一次我们详细讲述了node_main中对应的开始轨迹的函数StartTrajectoryWithDefaultTopics&#xff0c;这次我们主要讲解在结束SLAM之后调用的node类中的两个函数FinishAllTrajectories和RunFinalOptimization() 首先是FinishAllTrajectories&#xff0c;这个函数用于结束所有处…...

VMware 仅主机模式虚拟机无法 ping 通物理机的问题

前言 最近做了另外一个项目&#xff0c;用的数据库软件版本比较新&#xff0c;我本机装的旧的&#xff0c;因版本原因无法还原数据库&#xff0c;考虑到以最快速度部署开发环境&#xff0c;决定在虚拟机里安装新版数据库软件&#xff0c;使用 VMware 网络类型的仅主机模式&…...

day01_java常识丶环境搭建丶入门程序

Java语言发展历史 Java诞生于SUN&#xff08;Stanford University Network&#xff09;&#xff0c;09年SUN被Oracle&#xff08;甲骨文&#xff09;收购。Java之父是詹姆斯.高斯林(James Gosling)。1996年发布JDK1.0版。 目前最使用最多的版本是Java8。 ​ Java技术体系平台 …...

Python numpy.unpackbits函数方法的使用

NumPy&#xff08;Numerical Python的缩写&#xff09;是一个开源的Python科学计算库。使用NumPy&#xff0c;就可以很自然地使用数组和矩阵。NumPy包含很多实用的数学函数&#xff0c;涵盖线性代数运算、傅里叶变换和随机数生成等功能。本文主要介绍一下NumPy中unpackbits方法…...

Docker容器出现exited(0)状态解决办法

Docker容器出现exited&#xff08;0&#xff09;状态解决办法一、情况1&#xff1a;docker run时出现二、情况2&#xff1a;重启服务器后出现1.具体实例2.永久解决3.注意事项一、情况1&#xff1a;docker run时出现 步骤一、docker rm 容器id 将容器删除 步骤二、docker rmi 镜…...

js-如何判断一个对象为空对象

<script> export default{name:demo,data(){return{}},methods:{checkObject(obj){if (JSON.stringify(obj) {}) {return false // 如果为空 返回false}return true // 如果不为空 返回true}} } </script>...

算法刷题计划一----数据结构2-6(leetCode)

415. 字符串相加 给定两个字符串形式的非负整数 num1 和num2 &#xff0c;计算它们的和。 提示&#xff1a; num1 和num2 的长度都小于 5100 num1 和num2 都只包含数字 0-9 num1 和num2 都不包含任何前导零 你不能使用任何內建 BigInteger 库&#xff0c; 也不能直接将输入的…...

知乎热议:当代程序员应该去银行上班吗?一个985妹子用亲身经历告诉你们答案

前言 还愿邮储总行&#xff0c;写一下2020届秋招笔经面经&#xff0c;因为我主攻的国企&#xff08;银行和运营商&#xff09;&#xff0c;想去互联网的可以关掉啦 主要涉及邮储总行&#xff0c;浦发银行&#xff0c;农行&#xff0c;招商银行&#xff0c;成都银行&#xff0…...

C#不同状态的按钮 消失or显示

效果展示&#xff1a; 点击前 点击后 //而且 ”备注“ 变成可编辑状态 点击确定后 编辑成功 并变为初始 只有一个的” 编辑 “按钮 并在listView更改成功 列表样式 解决方案&#xff1a; 首先创建三个Button 都放在一个位置上 当然需要有一个按钮重合在编辑上面&#xff08;为…...

锋迷商城SpringCloud+Vue前后端分离2021微服务实战

锋迷商城项目是一个B2C商城&#xff0c;基于SpringCloud构建的大型千万级高并发电商系统。采用当下最主流的微服务分布式架构&#xff0c;前后端分离技术&#xff0c; 涵盖技术栈有&#xff1a;Vue、axios、Springboot、RESTful、mybatis、tkmapper、Swagger、任务调度Quartz/…...

力扣K神图解算法数据结构解析10

十、分治算法 剑指07&#xff0c;重建二叉树 //时间O(n)&#xff0c;空间O(n) //自己一直觉得这道题很难&#xff0c;没想到还是能够拿下&#xff0c;其实理论也清楚&#xff0c;前序遍历和中序遍历 //关键如下 //1.recur递归参数的确定&#xff0c;根节点在前序遍历中的索引&a…...

使用RAK7268网关与RAK3172节点连接至TTN最新的服务器TTS上

一、背景 当需要连接网关到TTN的时候我们突然发现&#xff1a;在TTN V2版本上已经无法创建新的网关了。另外&#xff0c;V2版本对于当前已创建的网关支持在今年年底也要失效了。所以&#xff0c;我们需要了解如何将网关连接到TTN最新的服务器TTS上。 二、目的 本文将会使用到RA…...

学习AlibabaCloud

学习AlibabaCloud一、Maven聚合工程创建1、pom依赖一、Maven聚合工程创建 1、pom依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema…...

Android Studio Android Device Monitor打开

环境 Android Studio 4.1 for Windows 打开方法 想查看虚拟机中应用生成的文件在之前的Android Studio本版有个工具Android Device Monitor&#xff0c;在网上查看发现已经被弃用了。 打开方法可以参照CSDN Android Studio的Android Device Monitor在哪儿&#xff1f;&#x…...

Typora+Gitee+PicGo上传图片功能

TyporaGiteePicGo上传图片功能 建立Gitee图床 注册登录Gitee账号 这里就不详细讲了 官方地址&#xff1a;https://gitee.com/ 新建仓库当图床 输入下图中仓库名称、路径、选择开源&#xff0c;点击创建。 这样我们就创建了一个Typora_image的仓库&#xff0c;用来保存Typor…...

实训三#3.2导弹防御系统

【问题描述】 某国为了防御敌国的导弹袭击&#xff0c;开发出一种导弹拦截系统。但是这种导弹拦截系统有一个缺陷&#xff1a;虽然它的第一发炮弹能够到达任意的高度&#xff0c;但是以后每一发炮弹都不能高于前一发的高度。某天&#xff0c;雷达捕捉到敌国的导弹来袭&#xf…...

顶刊两天两篇!华中科技大学团队研究成果又登《科学》!

xx团队研究成果又登《科学》&#xff01;顶刊两天两篇&#xff01;华中科技大学团队研究成果又登《科学》&#xff01;顶刊两天两篇&#xff01;华中科技大学团队研究成果又登《科学》&#xff01; 8月19日&#xff0c;《科学》Science在线发表了华中科技大学光电信息学院/武汉…...

Mysql字符串截取 mysql将字符串字段转为数字排序或比大小

SELECT * FROM Student WHERE 1 1 ORDER BY -ID DESC ; SELECT * FROM Student WHERE 1 1 ORDER BY (ID 1); mysql将字符串字段转为数字排序或比大小 2017年09月17日 01:36:31 阅读数&#xff1a;6566 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得…...

设计模式----设计原则

设计原则...

非常详细的NumPy教程(转载)

转载自https://www.jianshu.com/p/57e3c0a92f3a NumPy - 简介 NumPy 是一个 Python 包。 它代表 “Numeric Python”。 它是一个由多维数组对象和用于处理数组的例程集合组成的库。 Numeric&#xff0c;即 NumPy 的前身&#xff0c;是由 Jim Hugunin 开发的。 也开发了另一个…...

linux下使用apt命令安装jdk

1、使用命令搜索相关安装包&#xff1a; sudo apt-cache search jdk2、找到自己要安装的版本&#xff0c;本次以jdk1.8为例&#xff0c;使用命令安装&#xff1a; sudo apt-get install openjdk-8-jdk...

01-课程准备工作

创建空工程 在idea中创建一个空工程就相当于创建了一个空的目录,可以将这个目录看成是一个工作区.例如: 基础环境配置 JDK ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210719110251549.png Maven 推荐使用3.6以上版本,例如: File Encoding 一般创建完一个工程都要…...

np和tensor转换

目录说明代码numpy转tensortensor 转换标量numpy数据类型转化torch数据类型转化区别参考文章说明 先给出torch和numpy转换的方式&#xff0c;之后参照W3C的一个教程&#xff0c;总结一些有用的。 Tensor与Numpy的ndarray类似,但深度学习框架又比Numpy的ndarray多一些重要功能&…...

linux命令:umask

标题一、简介二、语法三、文件目录默认权限四、umask值五、权限拓展一、简介 在linux系统中&#xff0c;我们创建一个新的文件或者目录的时候&#xff0c;这些新的文件或目录都会有默认的访问权限&#xff0c;umask命令与文件和目录的默认访问权限有关。若用户创建一个文件&am…...

优惠券系统:结算模块总结

...

锁定优惠券

在实现锁定优惠券的过程中: 1、锁定优惠券记录 将coupon_record 中当前用户的优惠券的状态由new改为lock<!--批量锁定优惠券记录--><update id"lockUserStateBatch">update coupon_record set user_state #{useState} where user_id #{userId} and …...

如何设置积分兑换电子优惠券规则?

前几期小编和大家讨论了会员积分获取的方式&#xff0c;积分制要发挥作用&#xff0c;最终还是要看积分如何使用。 单一、传统的积分兑换商品模式已经不能吸引会员的目光&#xff0c;丰富积分的使用&#xff0c;能促进会员消费&#xff0c;成为门店的长期会员。 除了积分兑换商…...

优惠券派发

inc_menu.php引入前端模版distributeCoupons.html&#xff08;run/templates/&#xff09;,在distributeCoupons.html中&#xff0c;用post方式提交数据给distributeCoupons.php&#xff08;run下&#xff09;&#xff0c;distributeCoupons.php有引入IOFactory.php&#xff08…...

刚兑换的电子优惠券竟被提前消费,原来是黑客做起倒爷生意

存在手机中用银行积分兑换的优惠券怎么会被别人使用?发生在杭州的这件怪事情背后居然揪出了一个吉林的黑客。杭州市西湖区人民检察院最近办理了一起有关黑客入侵电子券公司的案件,起诉的罪名是“盗窃”。去年8月23日,杭州市民王小姐约了几个朋友去看电影,到了影院,拿出手机,准…...

ios开发之电子优惠券的设计与实现

// // main.m // 电子优惠券 //#import <Foundation/Foundation.h> #import "Discount.h" #import "Food.h"int main(int argc, const char * argv[]) {Discount * dis [[Discount alloc]init];[dis showInformation:20 andDiscountTime:"本…...

图文教程:教你快速生成实体店电子优惠券

随着网络科技的飞速发展&#xff0c;想要经营一家线下门店&#xff0c;也离不开互联网电子技术的支撑。比如通过网络制作门店促销的电子优惠券&#xff0c;这样可以吸引更多的顾客&#xff0c;使门店更加受欢迎&#xff0c;那么问题来了&#xff0c;电子优惠券怎么制作呢&#…...

CSS3 渐变边框,按钮样式、设计图标、电子优惠券 详解!

1.定义渐变边框 实例设计&#xff1a; 本例使用 backgroun-imag 属性提供渐变边框&#xff0c;定义渐变边框&#xff0c;效果如下&#xff1a; 代码&#xff1a; 2.定义渐变填充色 本例通过 conten 属性 为 div classwys 标签嵌入一个通过渐变设计的圆球同时为这个包含框设…...

40页PPT详解金融业智能反欺诈的应用

信用风险和欺诈风险虽属不同的风险界定范畴&#xff0c;但欺诈风险管理仍然涵盖在整个信贷信用风险管理生命周期中&#xff0c;由此可见其重要程度。 —Jackie Liang 信贷部门和反欺诈部门都有责任在各自领域预防和减轻金融企业潜在的财产损失&#xff0c;这两个领域就好比是…...

【59MB】金融求职宝典 玩转金融业的正确姿势 增订版.PDF

金融求职宝典 玩转金融业的正确姿势 增订版 【作 者】金融小伙伴著 【形态项】 373 【出版项】 北京&#xff1a;中国市场出版社 , 2017.07 【ISBN号】978-7-5092-1563-0 【中图法分类号】F83 【原书定价】56.00 【主题词】金融业-职业选择 【参考文献格式】 金融小伙伴著. 金…...

uni-app进阶使用(vuex、组件、api)

在上一篇文章介绍了uni-app的基本用法&#xff0c;本章介绍在uni-app中vuex、组件、api的用法。 一、如何使用vuex 1.1 初始化 在项目根目录下创建store文件夹&#xff0c;在其内新建一个文件index.js&#xff0c;在index.js对vuex进行初始化。 import Vuex from vuex impor…...

博睿APM获《金融电子化》2021年金融业新技术应用创新突出贡献奖

近日&#xff0c;由《金融电子化》杂志社主办的“2021第十二届金融科技应用创新奖”评选活动揭晓获奖名单。博睿数据凭借智能应用性能监控&#xff08;APM&#xff09;平台荣获2021金融业技术应用创新突出贡献奖。 随着金融科技的深入发展&#xff0c;金融科技的技术应用也提到…...

基于金融业顾客生命周期的商业分析

随着近些年商业银行之间的竞争逐渐加大&#xff0c;客户&#xff0c;作为银行利润的最终来源就愈发重要。银行若要提高自身盈利能力&#xff0c;对客户价值的挖掘与深入洞察必不可少。 客户分级就是常用的方法之一。 客户分级&#xff0c;即&#xff1a;基于客户需求的异质性…...

历史辩证唯物主义下的金融业发展的思考*

历史辩证唯物主义下的金融业发展的思考* 摘要&#xff1a;从历史唯物主义的角度来&#xff0c;金融是人类生产力发展到一定阶段的产物&#xff0c;金为黄金&#xff0c;融意味着分开流通之意。金融不是纯主观知识体系&#xff0c;而是基于客观经济规律的产物&#xff0c;是在不…...

案例分析-金融业网络安全攻防

应用安全漏洞 SQL注入 数据包如下&#xff1a; 观察post包&#xff0c;在userid1‘部分程序会报错&#xff0c;初步判断此处存在注入漏洞。 使用类型转换函数nvarchar将数据库里的url数据&#xff08;char&#xff09;转换成int&#xff0c;将字符串储存在数据包里发送给后端…...

客户端菜单

休闲娱乐&#xff1a;单机小游戏网络游戏&#xff1a;宝贝Q传奇3G传奇3G更新程序传奇世界大话西游II刀剑Online封神榜航海世纪劲乐团劲乐团更新补丁劲舞团洛奇冒险岛Online梦幻国度梦幻国度设置梦幻西游梦幻之星魔力宝贝魔兽世界墨香泡泡堂奇迹骑士热血传奇热血江湖天骄II天堂天…...

C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(四十六)飞行模式 – 自由VS天空...

曾几何时开始迷恋无垠的天际&#xff0c;幻想着插上翅膀去飞翔。《天翼之链》、《奇迹》、《梦幻诛仙》向无数玩家展示了飞行的世界。翅膀&#xff0c;常常是一种身份的象征&#xff0c;但如能再赋予它自由的含义&#xff0c;好比《永恒之塔》中如履空气般畅快淋漓&#xff0c;…...

武侠游戏的Q版清风

作为中华民族自己独有的民间传奇&#xff0c;武侠故事一直都是平民百姓最喜欢的话题。自从网络游戏开始在国内兴盛起来&#xff0c;武侠就一直是国内游戏厂商们最关注的背景题材之一。武侠文化凭借自身深厚的世界背景&#xff0c;为国产网络游戏提供了丰富的游戏题材。在武侠文…...