web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
选项卡
jquery tabs选项卡设计效果
分类:
选项卡
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
##### 使用方法 在页面中引入jquery和bootstrap相关文件。 ```html
``` ##### HTML结构 该tabs选项卡的HTML结构如下: ```html
Section 1
Section 2
Section 3
选项卡标题一
选项卡内容一
选项卡标题二
选项卡内容二
选项卡标题三
选项卡内容三
``` ##### CSS样式 通过下面的CSS代码来美化该tabs选项卡。 ```html a:hover,a:focus{ outline: none; text-decoration: none; } .tab .nav-tabs{ border-bottom: none; position: relative; } .tab .nav-tabs li{ margin-right: 60px; z-index: 1; } .tab .nav-tabs li:after{ content: ""; width: 100%; border: 1px solid #ccc6c6; position: absolute; top: 50%; right: -60%; z-index: -1; } .tab .nav-tabs li:last-child:after{ border: none; } .tab .nav-tabs li a{ display: block; padding: 15px 20px; background: #fff; font-size: 15px; font-weight: 600; color: #956cae; text-transform: uppercase; border-radius: 0; margin-right: 0; border: 2px solid #956cae; position: relative; overflow: hidden; z-index: 1; transition: all 0.3s ease 0s; } .tab .nav-tabs li.active a, .tab .nav-tabs li a:hover{ color: #fff; border: 2px solid #956cae; } .tab .nav-tabs li a:after{ content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s ease 0s; } .tab .nav-tabs li.active a:after, .tab .nav-tabs li a:hover:after{ height: 100%; background: #956cae; } .tab .tab-content{ padding: 20px 10px; margin-top: 0; font-size: 14px; color: #999; line-height: 26px; } .tab .tab-content h3{ font-size: 24px; margin-top: 0; } @media only screen and (max-width: 767px){ .tab .nav-tabs li{ margin: 0 25px 0 0; } } @media only screen and (max-width: 479px){ .tab .nav-tabs li{ width: 100%; text-align: center; margin: 0 0 10px 0; } .tab .nav-tabs li:after{ width: 0; height: 100%; top: auto; bottom: -60%; right: 50%; } } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告