您的位置:首页 > css拷用 > 选项卡 > 正文

卡片风格的tab选项卡网页特效div css js资源下载

标题与内容为一体的卡片风格的tab选项卡特效资源,点击标题背景改变同时显示对应的内容的div css js网页特效。

选项卡效果
效果截图

一、在线嵌入演示

点击tab选项卡试试

  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
默认宽度是相对于父元素100%适应的,你也可以固定宽度。
2
3
4
5
6

二、tab选项卡特效使用用法

使用说明:此资源基于layui框架,所以需要下载此框架文件,引入项目后,html页面代码引入css文件和js文件,有自定义JS代码,再HTML放入提供JS自定义代码,最后只需要拷贝对应html代码即可实现需要效果。

项目使用步骤:
1、下载layui压缩包;
2、解压后,将文件夹内”layui“文件夹整体拷贝入当前项目;
3、html引入layui.css(注意路径正确);
4、拷贝需要效果HTML代码(和JS)即可完成使用应用。

项目 操作 备注
框架 layui

立即下载layui(实时更新

引入CSS 需要 <link rel="stylesheet" href="layui/css/layui.css" media="all">
引入JS 需要 此网页布局需要html引入JS库
layui教程 layui使用教程 layui教程地址

三、单独运行演示与免费下载地址

1、试试运行效果

查看案例

2、完整打包下载地址:

此tab选项卡特效非常简单大方的,自适应宽度的资源。

相关标签: 选项卡 tab
文章来源网址:www.thinkcss.com/kaoyong/1474.shtml

日期:2017-12-25 10:50 css学习与资料网 layui