纯css实现选项卡功能
纯css实现选项卡功能
AlbertYang
发布于 2020-09-08 15:32:17
发布于 2020-09-08 15:32:17
<!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>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-06-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
网站建设
网站建设（Website Design Service，WDS），是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务，无需了解代码技术，即可自由拖拽模块，可视化完成网站管理。全功能管理后台操作方便，一次更新，数据多端同步，省时省心。使用网站建设服务，您无需维持技术和设计师团队，即可快速实现网站上线，达到企业数字化转型的目的。