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

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

代码语言：html

所属分类：选项卡

代码描述：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;.........完整代码请登录后点击上方下载按钮下载查看