<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-标签页的更多相关文章

  1. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  2. 在QMainWindow中利用多个QDockWidget构成标签页tab(原创)

    功能描述: 在QMainWindow下,使用多个QDockWidget构成可切换,可拖动,可关闭的标签页:标签页的切换由相关联的QAction触发. 实现效果: 代码如下: QDockWidget * ...

  3. vim 标签页 tabnew 等的操作命令

    对于vim这个 ide来说, 单纯的用 多子窗口 来操作, 感觉还是不够的, 还要结合标签页tab pages来,才能更好的操作. 所有关于标签 的 命令行 命令都是 以 :tab开始的, 可以用ta ...

  4. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  5. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  6. Tabio – 轻松,高效的管理 Chrome 标签页

    Tabio 是一个 Chrome 扩展,旨在简化大量浏览器标签页的管理.它提供的搜索功能允许您快速.轻松地找到您需要的选项卡.Tabio 便于组织你的标签,简单的拖拽排序.您也可以使用输入.删除和箭头 ...

  7. MFC MDI 主框架和标签页数据互操作

    ==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...

  8. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  9. EasyUI中动态生成标签页

    这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...

  10. HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截)

    当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实现但是因为使用window.open在新窗口或者新标签页中打开页面,有可能被浏览器给拦截.为了解决这个问题,可以模拟链接被按下 ...

随机推荐

  1. PHP_CodeSniffer HG 服务端部署篇

    环境:CentOs 6.7 语言:PHP5.4 PHP_CodeSniffer: https://github.com/phpdragon/PHP_CodeSniffer 本地代码检测请查看该文章:h ...

  2. 解决Win10 Virtualbox5.2.18桥接不能联网小记

    1.设备管理器,右键没添加过时硬件(如果没有,则在cmd中键入命令hdwwiz C:\windows\system32>hdwwiz),按照如下图操作 如此安装Microsoft KM-TEST ...

  3. VBA 根据Find方法根据特定内容查找单元格

    http://club.excelhome.net/thread-940744-1-1.html 2. Find方法的语法[语法]<单元格区域>.Find (What,[After],[L ...

  4. C# 数组转json

    ////////试题信息///////////////// // 已知 // h.d两个数组分别表示表头和内容 // 要求 // 编写函数一:rs2Array // 返回一个数组,每一项为一个对象. ...

  5. day_6.10py面试题:访问百度的过程

    DNS : 解析域名 DHCP:一种协议,自动分配ip 发现局域网中没有ip的电脑分配ip 面试题: 访问百度的整个过程 打开浏览器,访问百度的过程: 1.我的电脑确定有无网关,arp得到默认网管ma ...

  6. numpy.where

    np.where(condition[, x, y]) 如果是一维,相当于[xv if c else yv for (c,xv,yv) in zip(condition,x,y)] 输入条件,类数组形 ...

  7. jenkins管理

    1.1 重启,重载,关闭 http://10.0.0.51:8080/jenkins/restart     重启 http://10.0.0.51:8080/jenkins/reload       ...

  8. 180425、cookie工具类

    package com.thinkgem.jeesite.common.utils; import java.io.UnsupportedEncodingException; import java. ...

  9. Python中StringIO和BytesIO

    介绍一下Python在内存中读写数据,用到的模块是StringIO和BytesIO StringIO >>> from io import StringIO >>> ...

  10. sql里的ROW_NUMBER() OVER是啥意思?

    是一个分析函数,生成一个排序列select row_number(XX) over(partition by XXX order by XX [desc/asc]) frou table;partit ...