html-标签页
<template>
<div class="pos-frame"> <div class="pos h100">
<div class="pos-right">
<div class="tab-wrap">
<input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
<label class="lable1" for="tab1">Information</label> <input type="radio" id="tab2" name="tabGroup1" class="tab">
<label class="lable2" for="tab2">VIP Zone</label> <input type="radio" id="tab3" name="tabGroup1" class="tab">
<label for="tab3">F1</label> <input type="radio" id="tab4" name="tabGroup1" class="tab">
<label for="tab4">F2</label>
<!-- 内容区域 -->
<div class="tab__content">
<span></span>
</div>
<!-- 内容区域 -->
<div class="tab__content">
<span></span>
</div>
<!-- 内容区域 -->
<div class="tab__content">
<span></span>
</div>
<!-- 内容区域 -->
<div class="tab__content">
<span></span>
</div> <div class="label_line"> </div> <div class="label_line2"> </div>
</div>
</div> </div> </div>
</template> <script>
export default{ }
</script> <style lang="scss">
@import "./tab.scss";
</style>
.pos-frame {
position: relative;
padding: 5px;
width: calc(% - 10px);
height: % ;
} .pos .pos-right .tab-wrap {
position: relative;
overflow: hidden;
padding-top: 31px;
height: calc(% - 300px);
max-width: %;
border-radius: 6px;
background: transparent;
background-color: #fff;
list-style: none;
-webkit-transition: .3s box-shadow ease;
transition: .3s box-shadow ease;
}
.pos-right {
position: relative;
float: left;
width: 300px;
height: %;
} .pos .pos-right .tab {
display: none;
} .pos .pos-right .tab:checked:nth-of-type()~.tab__content:nth-of-type() {
position: relative;
top: ;
z-index: ;
display: block;
text-shadow: ;
opacity: ;
} .pos .pos-right .tab:checked:nth-of-type()~.tab__content:nth-of-type() {
position: relative;
top: ;
z-index: ;
display: block;
text-shadow: ;
opacity: ;
} .pos .pos-right .tab:checked:nth-of-type()~.tab__content:nth-of-type() {
position: relative;
top: ;
z-index: ;
display: block;
text-shadow: ;
opacity: ;
} .pos .pos-right .tab:checked:nth-of-type()~.tab__content:nth-of-type() {
position: relative;
top: ;
z-index: ;
display: block;
text-shadow: ;
opacity: ;
} .pos .pos-right .tab:checked:nth-of-type()~.label_line {
background-color: #6a81bb;
} .pos .pos-right .tab:checked:nth-of-type()~.label_line {
left: %;
z-index: ;
background-color: #56a1cd;
} .pos .pos-right .tab:checked:nth-of-type()~.label_line {
left: %;
z-index: ;
background-color: #83bfe1;
} .pos .pos-right .tab:checked:nth-of-type()~.label_line {
left: %;
z-index: ;
background-color: #bbd9eb;
} .pos .pos-right .tab:checked + label {
z-index: !important;
cursor: default;
color: #c5f70e;
} .pos .pos-right .tab:first-of-type:not(:last-of-type)+label {
left: ;
z-index: ;
} //lable2
.pos .pos-right .tab:nth-of-type():not(:last-of-type)+label {
left: %;
z-index: ;
background-color:#56a1cd;
} //lable3
.pos .pos-right .tab:nth-of-type():not(:last-of-type)+label {
left: %;
z-index: ;
background-color: #83bfe1;
} // //lable4
.pos .pos-right .tab:last-of-type:not(:first-of-type)+label {
left: %;
z-index: ;
background-color: #bbd9eb;
} .pos .pos-right .tab:first-of-type:not(:last-of-type)+label {
left: ;
z-index: ;
} .pos .pos-right .tab:checked+label {
z-index: !important;
cursor: default;
} .pos .pos-right .tab+label {
position: absolute;
top: ;
display: block;
box-sizing: border-box;
width: %;
height: 29px;
border-radius: 8px 8px ;
background-color: #f2f2f2;
background-color: #6a81bb;
box-shadow: 10px 0px 5px rgba(, , , .);
color:#ffffff;
font-weight: ;
text-align: center;
text-align: center;
text-decoration: none;
font-size: 12px;
line-height: 25px;
cursor: pointer;
-webkit-transition: .3s background-color ease, .3s box-shadow ease;
transition: .3s background-color ease, .3s box-shadow ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} .pos .pos-right .tab__content {
position: absolute;
left: ;
z-index: -;
display: none;
overflow-x: hidden;
overflow-y: auto;
height: calc(% - 12px);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 6px solid #6a81bb; //label1的样式
background-color: transparent;
background-color: #fff;
opacity: ;
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
} .pos .pos-right .label_line {
position: absolute;
top: 25px;
z-index: ;
width: %;
height: 10px;
} .pos .pos-right .label_line2 {
position: absolute;
top: 25px;
z-index: ;
width: %;
height: 10px;
background-color: #6a81bb;
}
html-标签页的更多相关文章
- 最新 去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
- 在QMainWindow中利用多个QDockWidget构成标签页tab(原创)
功能描述: 在QMainWindow下,使用多个QDockWidget构成可切换,可拖动,可关闭的标签页:标签页的切换由相关联的QAction触发. 实现效果: 代码如下: QDockWidget * ...
- vim 标签页 tabnew 等的操作命令
对于vim这个 ide来说, 单纯的用 多子窗口 来操作, 感觉还是不够的, 还要结合标签页tab pages来,才能更好的操作. 所有关于标签 的 命令行 命令都是 以 :tab开始的, 可以用ta ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- EasyUI创建异步树形菜单和动态添加标签页tab
创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...
- Tabio – 轻松,高效的管理 Chrome 标签页
Tabio 是一个 Chrome 扩展,旨在简化大量浏览器标签页的管理.它提供的搜索功能允许您快速.轻松地找到您需要的选项卡.Tabio 便于组织你的标签,简单的拖拽排序.您也可以使用输入.删除和箭头 ...
- MFC MDI 主框架和标签页数据互操作
==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- EasyUI中动态生成标签页
这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...
- HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截)
当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实现但是因为使用window.open在新窗口或者新标签页中打开页面,有可能被浏览器给拦截.为了解决这个问题,可以模拟链接被按下 ...
随机推荐
- EventFlow.helper.js 事件流程控制
/*! * 事件流程管理 * version: 1.0.0-2018.07.25 * Requires ES6 * Copyright (c) 2018 Tiac * http://www.cnblo ...
- 51 IP核查询
康芯的IP核 Oregano systems 公司的MC8051 IP CoreSynthesizeable VHDL Microcontroller IP-Core User Guide这个里面51 ...
- 【python】用python生成pdf文件
转自:https://www.davidfischer.name/2015/08/generating-pdfs-with-and-without-python/ from reportlab.pla ...
- C#枚举类型和int类型相互转换
C#枚举类型和int类型相互转换 C# 枚举(Enum) 枚举是一组命名整型常量.枚举类型是使用 enum 关键字声明的. C# 枚举是值数据类型.换句话说,枚举包含自己的值,且不能继承或传递继承. ...
- http://202.194.116.8/webapps/portal/frameset.jsp?tab_id=_2_1&url=%2fwebapps%2fblackboard%2fexecute%2
http://202.194.116.8/webapps/portal/frameset.jsp?tab_id=_2_1&url=%2fwebapps%2fblackboard%2fexecu ...
- NYOJ16|嵌套矩形|DP|DAG模型|记忆化搜索
矩形嵌套 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a& ...
- 20165311 实验一 Java开发环境的熟悉
一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:李嘉昕 学号:20165311 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验时间:13:45 - 15:25 实验序号:3 实 ...
- [No0000B3].NET C# 单体模式(Singleton)
单体模式(Singleton)是经常为了保证应用程序操作某一全局对象,让其保持一致而产生的对象,例如对文件的读写操作的锁定,数据库操作的时候的事务回滚,还有任务管理器操作,都是一单体模式读取的.创建一 ...
- U3d 入门
环境搭建: 1.安装exe; 2.破解 ,百度
- LeetCode 104 Maximum Depth of Binary Tree 解题报告
题目要求 Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the ...