纯css实现选项卡功能
时间:2022-07-24
本文章向大家介绍纯css实现选项卡功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.tpt-bar {
display:flex;
border:1px solid #e2e2e2;
border-radius:2px;
background:#c6fced;
box-shadow:0 2px 5px 0 rgba(0,0,0,.1);
flex-wrap:wrap;
width: 80%;
margin: 0px auto;
}
.tpt-bar label {
display:block;
padding:0 20px;
height:50px;
line-height:50px;
cursor:pointer;
order:1;
}
.tpt-bar .tpt-bar-con {
z-index:0;
display:none;
padding:30px;
width:100%;
min-height:120px;
line-height: 30px;
border-top:1px solid #e2e2e2;
margin-top: -1px;
background:#f3f3f4;
order:99;
}
.tpt-bar input[type=radio] {
position:absolute;
opacity:0;
}
.tpt-bar input[type=radio]:checked+label {
z-index:1;
margin-right:-1px;
margin-left:-1px;
border-right:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
background:#69d6e8;
}
.tpt-bar input[type=radio]:checked+label+.tpt-bar-con {
display:block;
}
</style>
</head>
<body>
<div class="tpt-bar">
<input type="radio" name="bar" id="tab-1" checked="">
<label for="tab-1">网站建设</label>
<div class="tpt-bar-con">
网站建设是指使用标识语言(markup
language),通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输,最终以图形用户界面(GUI)的形式被用户所浏览。简单来说,网页设计的目的就是产生网站。简单的信息如文字,图片(GIF,JPEG,PNG)和表格,都可以通过使超文件标示语言、可扩展超文本标记语言等标示语言放置到网站页面上。而更复杂的信息如矢量图形、动画、视频、声频等多媒体档案则需要插件程序来运行,同样地它们亦需要标示语言移植在网站内。
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。不同领域的网页设计,网页图形设计,界面设计,创作,其中包括标准化的代码和专有软件,用户体验设计和搜索引擎优化。许多人常常会分为若干个工作小组,负责网站不同方面的设计。网页设计是设计过程的前端(客户端),通常用来描述的网站,并不是简单的一个页面,一个网站是包括很多工作的,其中包括域名注册设计效果图,布局页面,写代码等工作。
</div>
<input type="radio" name="bar" id="tab-2">
<label for="tab-2">用户管理</label>
<div class="tpt-bar-con">
用户若想享受IPTV系统
提供的服务,则需要首先订购服务,如果用户未订购服务,系统会拒绝提供服务或提示用户购买服务,不仅如此,每次使用服务的时候还需要在系统中登记注册(登记注册的过程是设备之间协商完成的,用户不一定能直观地觉察到)。对IPTV系统的最终用户的管理包括用户基本信息管理、用户订购关系管理等。
通过用户基本信息管理,系统维护人员可以管理用户的账号、正常还是暂停或待激活等状态、终端序列号、计费帐号、支付方式、在线IP地址等。
通过用户订购关系管理,系统维护人员可以管理用户的业务帐号、订购业务类型、订购服务项目、按次计费的业务的订购时间和取消订购时间以及订购关系生失效时间、计费周期内业务使用情况等。
对IPTV系统的系统维护人员的管理
对IPTV系统的系统维护人员的管理是保证系统安全的一项措施,以控制系统维护人员对系统的使用、防止系统维护人员对系统的越权使用或误操作。系统维护人员若想对系统进行操作,必须首先通过系统的鉴权认证和操作授权,即系统需要确认登陆者是合法的,而且具有行使操作的权利才允许登陆者在系统上执行操作。通常,运营商把登陆IPTV系统对系统进行操作维护的系统维护人员也称为用户,但这里的用户和上节里提到的终端用户并不是同一个概念,这里的用户确切的说指的是系统的操作员或管理员。
这里提到的用户的管理通常涉及角色管理、角色组管理、用户管理和用户组管理。权限被赋予在角色上,角色可以赋予给某个用户,这样该用户就拥有了该角色所具备的权限。多个相似角色形成一个角色组(以便管理),多个相似用户形成一个用户组(以便管理)。通常情况下,系统在开通之初,会生成一个拥有最大权限的用户,其他用户由该用户创建。待系统开通之后,该用户即归隐山林,因为它的权限太大,容易引起误操作等,只有在紧急的、非常有必要的情况下才请其出山,否则日常操作均由其他具有限制权限的操作员来完成。操作员权限的限制,可以通过分权分域方式来实现,即不同地域的操作员分配不同的权限,便于细化管理。
</div>
<input type="radio" name="bar" id="tab-3">
<label for="tab-3">订单管理</label>
<div class="tpt-bar-con">
订单管理是客户关系管理的有效延伸,能更好的把个性化、差异化服务有机的融入到客户管理中去,能推动经济效益和客户满意度的提升。订单供货的目的,是品牌能让客户自由选择,货源安排做到公开透明,产品能更加适应和满足消费者的需要。其业务流程的变化首先体现在企业客户经理的工作上。客户经理对辖区内客户需求预测和具体订单是否准确,不但关系到工业企业和零售户对公司的满意度,更关系到按客户订单组织货源这项工作能否得以顺利的开展。
中文名订单管理外文名Order Management要 求熟悉辖区内各经烟户的经营状况管理种类销售订单管理,采购订单管理
目录
1 定义
2 要求
3 信息化
▪ 管理种类
▪ 渠道
▪ 电子商务
4 参考文献
定义编辑
订单管理(Order Management)
订单管理演示
订单管理演示
订单管理是一个常见的管理问题,包含在公司的客户订单处理流程中。由于客户下订单的方式多种多样、订单执行路径千变万化、产品和服务不断变化、发票开具难以协调,这些情况使得订单管理变得十分复杂。
订单管理可被用来发掘潜在的客户和现有客户的潜在商业机会。订单取决于需求,订单管理就是处理订单。
</div>
</div>
</body>
</html>
- Android安全几道入门题目
- 挖洞经验 | 看我如何通过子域名接管绕过Uber单点登录认证机制
- Spark源码系列(二)RDD详解
- Spark源码系列(三)作业运行过程
- Spark源码系列(四)图解作业生命周期
- Spark源码系列(五)分布式缓存
- 看我如何基于Python;Facepp打造智能监控系统
- Spark源码系列(六)Shuffle的过程解析
- Spark源码系列(九)Spark SQL初体验之解析过程详解
- Spark源码系列(七)Spark on yarn具体实现
- 我们要在任何可能的地方测试XSS漏洞
- Angr:一个具有动态符号执行和静态分析的二进制分析工具
- Spark编程指南
- Spark Streaming编程指南
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Go语言|基于channel实现的并发安全的字节池
- 对于hashmap的一点理解
- IntelliJ IDEA 2020.2 破解
- MATLAB批量给数据集加雾
- Vue Cli 4 引入 Cesium 配置
- R语言在不同样本量下的Littles MCAR检验
- Stata中的治疗效果:RA:回归调整、 IPW:逆概率加权、 IPWRA、 AIPW
- R语言基于协方差的SEM结构方程模型中的拟合指数
- Python贝叶斯回归分析住房负担能力数据集
- 基于R统计软件的三次样条和平滑样条模型数据拟合及预测
- R语言析因设计分析:线性模型中的对比
- R语言逻辑回归、方差分析 、伪R平方分析
- R语言逐步多元回归模型分析长鼻鱼密度影响因素
- R语言对回归模型进行协方差分析
- R语言多项式样条回归、非线性回归数据分析