css实现带点状索引的自适应tab选项卡效果代码

代码语言:html

所属分类:选项卡

代码描述:css实现带点状索引的自适应tab选项卡效果代码

代码标签: css 点状 索引 自适应 tab 选项卡

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata);
        	ul#tabs-list {
        	list-style:none;
        	text-align:center;
        	border-bottom:1px solid #dfdfdf;
        	margin:0;
        	padding:0
        }
        label.panel-label {
        	-webkit-user-select:none;
        	-moz-user-select:none;
        	-ms-user-select:none;
        	user-select:none;
        	display:block;
        	width:100%;
        	color:#bdc3c7;
        	cursor:pointer;
        	background-color:#ecf0f1;
        	transition-property:background-color,color;
        	transition-duration:200ms
        }
        label.panel-label:hover {
        	color:#c0392b
        }
        #panels {
        	background-color:white
        }
        #panels .container {
        	margin:0 auto;
        	width:90%
        }
        #panels section header label.panel-label {
        	padding:12px 24px;
        	box-sizing:border-box
        }
        #panels section main {
        	box-sizing:border-box;
        	max-height:0;
        	opacity:0;
        	transition:opacity 600ms;
        	overflow-y:hidden
        }
        #panel-1-ctrl:checked ~ #panels #panel-1 main {
        	max-height:initial;
        	opacity:1;
        	padding:48px 24px
        }
        #panel-2-ctrl:checked ~ #panels #panel-2 main {
        	max-height:initial;
        	opacity:1;
        	padding:48px 24px
        }
        #panel-3-ctrl:checked ~ #panels #panel-3 main {
        	max-height:initial;
        	opacity:1;
        	padding:48px 24px
        }
        #panel-4-ctrl:checked ~ #panels #panel-4 main {
        	max-height:initial;
        	opacity:1;
        	padding:48px 24px
        }
        #panel-5-ctrl:checked ~ #panels #panel-5 main {
        	max-height:initial;
        	opacity:1;
        	padding:48px 24px
        }
        @media all and (max-width:767px) {
        	#nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {
        	max-height:46px;
        	opacity:1
        }
        #nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {
        	max-height:46px;
        	opacity:1
        }
        #nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {
        	max-height:46px;
        	opacity:1
        }
        #nav-ctrl:checked ~ #tabs-list #li-for-panel-4 {
        	max-height:46px;
        	opacity:1
        }
        #nav-ctrl:checked ~ #tabs-list #li-for-panel-5 {
        	max-height:46px;
        	opacity:1
        }
        #open-nav-label {
        	display:block;
        	position:absolute;
        	top:0;
        	right:0;
        	bottom:0;
        	left:0;
        	cursor:pointer
        }
        #nav-ctrl:checked ~ #tabs-list #open-nav-label {
        	display:none
        }
        #close-nav-label {
        	display:block;
        	max-height:0;
        	overflow-y:hidden;
        	background-color:#444;
        	color:#ecf0f1;
        	padding:0;
        	transition:max-height 200ms;
        	cursor:pointer;
        	text-transform:uppercase;
        	font-size:12px;
        	line-height:22px;
        	letter-spacing:1px
        }
        #nav-ctrl:checked ~ #tabs-list #close-nav-label {
        	max-height:36px;
        	opacity:1;
        	padding:12px 24px
        }
        #tabs-list {
        	position:relative
        }
        #tabs-list label.panel-label {
        	padding:12px 0
        }
        #tabs-list #li-for-panel-1 {
        	max-height:0;
        	overflow-y:hidden;
        	transition:max-height 200ms
        }
        #tabs-list #li-for-panel-2 {
        	max-height:0;
        	overflow-y:hidden;
        	transition:max-height 200ms
        }
        #tabs-list #li-for-panel-3 {
        	max-height:0;
        	overflow-y:hidden;
        	transition:max-height 200ms
        }
        #tabs-list #li-for-panel-4 {
        	max-height:0;
        	overflow-y:hidden;
        	transition:max-height 200ms
        }
        #tabs-list #li-for-panel-5 {
        	max-height:0;
        	overflow-y:hidden;
        	transition:max-height 200ms
        }
        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
        	max-height:46px;
        	opacity:1
        }
        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
        	background-color:white;
        	color:#c0392b;
        	background-color:#c0392b;
        	color:white
        }
        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
        	max-height:46px;
        	opacity:1
        }
        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
        	background-color:white;
        	color:#c0392b;
        	background-color:#c0392b;
        	color:white
        }
        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
        	max-height:46px;
        	opacity:1
        }
        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
        	background-color:white;
        	color:#c0392b;
        	background-color:#c0392b;
        	color:white
        }
        #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 {
        	max-height:46px;
        	opacity:1
        }
        #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label {
        	background-color:white;
        	color:#c0392b;
        	background-color:#c0392b;
        	color:white
        }
        #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 {
        	max-height:46px;
        	opacity:1
        }
        #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label {
        	background-color:white;
        	color:#c0392b;
        	background-color:#c0392b;
        	color:white
        }
        #panels .container {
        	width:100%
        }
        #panels section header {
        	display:block
        }
        }@media all and (min-width:768px) {
        	#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
        	pointer-events:none;
        	cursor:default;
        	transform:translate3d(0,1px,0);
        	box-shadow:none;
        	border-right:0
        }
        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last {
        	border-right:1px solid transparent
        }
        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1+li {
        	border-left:1px solid #dfdfdf
        }
        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
        	background-color:white;
        	color:#c0392b;
        	padding-top:26px
        }
        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after {
        	height:6px
        }
        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
        	pointer-events:none;
        	cursor:default;
        	transform:translate3d(0,1px,0);
        	box-shadow:none;
        	border-right:0
        }
        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last {
        	border-right:1px solid transparent
        }
        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2+li {
        	border-left:1px solid #dfdfdf
        }
        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
        	background-color:white;
        	color:#c0392b;
        	padding-top:26px
        }
        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after {
        	height:6px
        }
        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
        	pointer-events:none;
        	cursor:default;
        	transform:translate3d(0,1px,0);
        	box-shadow:none;
        	border-right:0
        }
        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last {
        	border-right:1px solid transparent
        }
        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3+li {
        	border-left:1px solid #dfdfdf
        }
        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
        	background-color:white;
        	color:#c0392b;
        	padding-top:26px
        }
        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after {
        	height:6px
        }
        #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 {
        	pointer-events:none;
        	cursor:default;
        	transform:translate3d(0,1px,0);
        	box-shadow:none;
        	border-right:0
        }
        #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4.last {
        	border-right:1px solid transparent
        }
        #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4+li {
        	border-left:1px solid #dfdfdf
        }
        #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label {
        	background-color:white;
        	color:#c0392b;
        	padding-top:26px
        }
        #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label::after {
        	height:6px
        }
        #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 {
        	pointer-events:none;
        	cursor:default;
        	transform:translate3d(0,1px,0);
        	box-shadow:none;
        	border-right:0
        }
        #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5.last {
        	border-right:1px solid transparent
        }
        #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5+li {
        	border-left:1px solid #dfdfdf
        }
        #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label {
        	background-color:white;
        	color:#c0392b;
        	padding-top:26px
        }
        #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label::after {
        	height:6px
        }
        ul#tabs-list {
        	text-align:center;
        	border-bottom:1px solid #dfdfdf
        }
        ul#tabs-list li {
        	display:inline-block;
        	text-align:center;
        	font-size:.875em;
        	width:18%;
        	box-shadow:0 -2px 2px rgba(0,0,0,0.05);
        	border-right:1px solid #dfdfdf;
        	position:relative
        }
        ul#tabs-list li:hover {
        	transition:none;
        	border-right:0
        }
        ul#tabs-list li:hover.last {
        	border-right:1px solid transparent
        }
        ul#tabs-list li:hover+li {
        	border-left:1px solid #dfdfdf
        }
        ul#tabs-list li label.panel-label {
        	position:relative;
        	padding:24px 0
        }
        ul#tabs-list li label.panel-label::after {
        	content:"";
        	position:absolute;
        	width:100%;
        	left:0;
        	bottom:100%;
        	background-color:#c0392b;
        	height:0;
        	transition-property:height;
        	transition-duration:200ms
        }
        ul#tabs-list li label.panel-label:hover {
        	padding-top:25px
        }
        ul#tabs-list li label.panel-label:hover::after {
        	height:6px
        }
        #open-nav-label,#close-nav-label {
        	display:none
        }
        #nav-ctrl {
        	display:none
        }
        }@media all and (min-width:900px) {
        	main {
        	width:70%;
        	margin:0 auto
        }
        }.panel-radios {
        	position:fixed;
        	left:50%;
        	top:10px;
        	width:20px;
        	opacity:.5;
        	z-index:99
        }
        .panel-radios:nth-child(1) {
        	transform:translateX(-50px)
        }
        .panel-radios:nth-child(2) {
        	transform:translateX(-30px)
        }
        .panel-radios:nth-child(3) {
        	transform:translateX(-10px)
        }
        .panel-radios:nth-child(4) {
        	transform:translateX(10px)
        }
        .panel-radios:nth-child(5) {
        	transform:translateX(30px)
        }
        .panel-radios:nth-child(6) {
        	top:30px;
        	transform:translateX(-10px);
        	display:block
        }
        body {
        	background:#e74c3c;
        	color:#444;
        	font-family:"Open Sans","Helvetica Neue",Helvetica,sans-serif
        }
        #introduction {
        	width:90%;
        	margin:0 auto;
        	padding:48px 24px;
        	color:white
        }
        #introduction h1 {
        	font-weight:300;
        	text-align:center
        }
        main h1 {
        	margin-top:0;
        	f.........完整代码请登录后点击上方下载按钮下载查看

网友评论0