html选项卡如何美化,Bootstrap超酷Tabs选项卡美化特效

这是一款基于Bootstrap的超酷Tabs选项卡美化特效。该Tabs选项卡在原生Bootstrap选项卡的基础上，使用CSS3样式来对齐进行美化，效果非常炫酷。

使用方法

在页面中引入bootstrap相关文件和jquery文件。

HTML结构

该Tabs选项卡的HTML结构如下。

• Section 1
• Section 2
• Section 3

Section 1

......

Section 2

......

Section 3

......

CSS样式

为该Tabs选项卡添加下面的CSS样式：

a:hover,a:focus{

outline: none;

text-decoration: none;

}

.tab .nav-tabs{

position: relative;

border-bottom: 0 none;

}

.tab .nav-tabs li{

text-align: center;

}

.tab .nav-tabs li a{

display: block;

height: 70px;

line-height: 65px;

background: linear-gradient(165deg, transparent 29%, #908a78 30%);

font-size: 15px;

font-weight: 600;

color: #fff;

text-transform: uppercase;

margin-right: 0;

border-radius: 0;

border: none;

position: relative;

transition: all 0.5s ease 0s;

}

.tab .nav-tabs li.active a,

.tab .nav-tabs li a:hover{

background: linear-gradient(165deg, transparent 29%, #efe8d5 30%);

border: none;

color: #908a78;

}

.tab .nav-tabs li a:before{

content: "";

height: 70px;

line-height: 90px;

border-bottom: 70px solid rgba(0, 0, 0, 0.1);

border-right: 10px solid transparent;

position: absolute;

top: 0;

left: 100%;

z-index: 1;

}

.tab .nav-tabs li:last-child a:before{

border: none;

}

.tab .tab-content{

font-size: 14px;

color: #6f6c6c;

line-height: 26px;

background: #efe8d5;

padding: 20px;

}

.tab .tab-content h3{

font-size: 24px;

color: #6f6c6c;

margin-top: 0;

}

.tab .tab-content p{

margin-bottom: 0;

}

@media only screen and (max-width: 480px){

.tab .nav-tabs li{

width: 100%;

margin-bottom: 8px;

}

.tab .nav-tabs li:last-child{

margin-bottom: 0;

}

.tab .nav-tabs li a:before{

border: none;

}

}