艺灵设计

全部文章
×
当前位置：首页 >> 淘宝经验>>九宫格式选项卡特效

九宫格式选项卡特效

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-01-12 17:13:12　-　阅:　-　评:0　-　积分:0

适用范围：付费/未付费的B/C店通用！　注：付费一词仅指开通旺铺CSS样式。

昨天又接到新页面，是跨年页面，于是又是一天的排版中。美工妹子们搞了个九宫格式的选项卡特效，然后我就按页面排版了。如下图:

大致就这样。下面附源码:

html模块内容：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>九宫格式选项卡特效--艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
  7. <meta name="keywords" content="九宫格特效,选项卡特效,c店装修,源码分享,淘宝店铺装修">
  8. <meta name="description" content="九宫格特效,选项卡特效,c店装修,源码分享,淘宝店铺装修">
  9. <link rel="stylesheet" href="http://a.tbcdn.cn/apps/pamirsshop/wiki/stylesheets/base-min.css"/>
  10. <link href="http://a.tbcdn.cn/apps/pamirsshop/wiki/stylesheets/prettify.css" rel="stylesheet" type="text/css"/>
  11. <link rel="stylesheet" href="http://a.tbcdn.cn/apps/pamirsshop/wiki/stylesheets/wiki.css"/>
  12. <script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/prettify.js" type="text/javascript"> </script>
  13. <script src="http://a.tbcdn.cn/s/kissy/1.1.6/seed-min.js"></script>
  14. <script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/jquery-min-1.4.js"></script>
  15. <script src="http://a.tbcdn.cn/apps/pamirsshop/wiki/scripts/wiki.js"></script>
  16. <!--以上内容均无需复制-->
  17. </head>
  18. <body>
  19. <!--九宫格式选项卡特效  复制开始-->
  20. <div class="J_TWidget clearfix" data-widget-type="Carousel" data-widget-config="{'navCls':'ylsj-hd','contentCls':'ylsj-bd','effect': 'fade','easing': 'easeOutStrong','duration':0.8,'delay':0.3,'circular':true,'autoplay':true }" style="width:960px;height:487px;margin:0 auto">
  21. <ul class="ylsj-bd " style="float:left;width:478px;height:487px">
  22. <li style="width:476px;height:485px;border:1px solid #c9c9c9"><a target="_blank" href=""><img src="/d/file/code/2014-01-12/1.jpg" /></a></li>
  23. <li style="width:476px;height:485px;border:1px solid #c9c9c9"><a target="_blank" href="#"><img src="/d/file/code/2014-01-12/2.jpg" /></a></li>
  24. <li style="width:476px;height:485px;border:1px solid #c9c9c9"><a target="_blank" href="#"><img src="/d/file/code/2014-01-12/3.jpg" /></a></li>
  25. <li style="width:476px;height:485px;border:1px solid #c9c9c9"><a target="_blank" href="#"><img src="/d/file/code/2014-01-12/4.jpg" /></a></li>
  26. <li style="width:476px;height:485px;border:1px solid #c9c9c9"><a target="_blank" href="#"><img src="/d/file/code/2014-01-12/5.jpg" /></a></li>
  27. <li style="width:476px;height:485px;border:1px solid #c9c9c9"><a target="_blank" href="#"><img src="/d/file/code/2014-01-12/6.jpg" /></a></li>
  28. <li style="width:476px;height:485px;border:1px solid #c9c9c9"><a target="_blank" href="#"><img src="/d/file/code/2014-01-12/7.jpg" /></a></li>
  29. <li style="width:476px;height:485px;border:1px solid #c9c9c9"><a target="_blank" href="#"><img src="/d/file/code/2014-01-12/8.jpg" /></a></li>
  30. <li style="width:476px;height:485px;border:1px solid #c9c9c9"><a target="_blank" href="#"><img src="/d/file/code/2014-01-12/9.jpg" /></a></li>
  31. </ul>
  32. <ul class="ylsj-hd" style="float:right;width:473px">
  33. <li style="width:151px;height:145px;border:1px solid #c9c9c9;float:left;margin:0 6px 23px 0;cursor:pointer"><img src="/d/file/code/2014-01-12/1.jpg" style="width:151px;height:145px;" /></li>
  34. <li style="width:151px;height:145px;border:1px solid #c9c9c9;float:left;margin:0 6px 23px 0;cursor:pointer"><img src="/d/file/code/2014-01-12/2.jpg" style="width:151px;height:145px;" /></li>
  35. <li style="width:151px;height:145px;border:1px solid #c9c9c9;float:left;margin:0 0 23px 0;cursor:pointer"><img src="/d/file/code/2014-01-12/3.jpg" style="width:151px;height:145px;" /></li>
  36. <li style="width:151px;height:145px;border:1px solid #c9c9c9;float:left;margin:0 6px 23px 0;cursor:pointer"><img src="/d/file/code/2014-01-12/4.jpg" style="width:151px;height:145px;" /></li>
  37. <li style="width:151px;height:145px;border:1px solid #c9c9c9;float:left;margin:0 6px 23px 0;cursor:pointer"><img src="/d/file/code/2014-01-12/5.jpg" style="width:151px;height:145px;" /></li>
  38. <li style="width:151px;height:145px;border:1px solid #c9c9c9;float:left;margin:0 0 23px 0;cursor:pointer"><img src="/d/file/code/2014-01-12/6.jpg" style="width:151px;height:145px;" /></li>
  39. <li style="width:151px;height:145px;border:1px solid #c9c9c9;float:left;margin:0 6px 0 0;cursor:pointer"><img src="/d/file/code/2014-01-12/7.jpg" style="width:151px;height:145px;" /></li>
  40. <li style="width:151px;height:145px;border:1px solid #c9c9c9;float:left;margin:0 6px 0 0;cursor:pointer"><img src="/d/file/code/2014-01-12/8.jpg" style="width:151px;height:145px;" /></li>
  41. <li style="width:151px;height:145px;border:1px solid #c9c9c9;float:left;margin:0 0px 0 0;cursor:pointer"><img src="/d/file/code/2014-01-12/9.jpg" style="width:151px;height:145px;" /></li>
  42. </ul>
  43. </div>
  44. <!--复制结束-->
  45. </body>
  46. </html>

点此下载→→【代码】九宫格式选项卡特效.zip　　　

点击上面的“运行代码”后可以看到模拟淘宝环境下的效果，复制源码到店铺中，更换图片便可实现预期效果。

2014.09.20　00:10更新

如不会修改代码可点击应用地址：【http://www.yilingsj.com/zxsc/lbtx/2014-09-06/203.html】一键生成代码。
示例店铺地址：http://shop112837831.taobao.com

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2014-01-12/145.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！

Tag: 九宫格特效 选项卡特效 c店装修 源码分享 淘宝店铺装修 淘宝店铺轮播 窄屏轮播 全屏轮播

上一篇: 天猫店铺与c店导航突破宽度限制　　　下一篇: 详情页的导航下拉无法显示

相关文章

淘宝店铺装修教程之5月淘宝视频免淘宝店铺装修教程之用两种方法获取淘宝店铺装修教程之学会此技能，6到阿里巴巴店铺装修教程之代码绕过系淘宝店铺装修教程之透明图片为什么淘宝详情页免费添加视频工具玩坏淘宝之破解类目限制实现淘宝PC淘宝缩略图轮播特效二淘宝马尔杜克家首屏轮播特效淘宝条形轮播特效

评论区

我要评论

近期更新

权限破解之一键复制某sdn上的代码块 浅聊某sdn是如何实现未登录时屏蔽复制的 bug复盘之如何优雅的实现表格跨页勾选 记一次APP内调起微信支付时首次成功唤醒，后面 记一次注销联通卡的吐血经历 2023年敬业福获取方法 bug复盘之除数为0会怎样？ Vite2项目优化之线上功能有异常，如何快速排查 bug复盘之Vite2项目在线上报错，修复后却意外发 工具分享之图片压缩

热门标签

微信小程序 小程序 用户体验 uni-app gulp教程 @vuecli3 vue.js 路由守卫 vuex vue项目实战 路由 自动化构建 破解 网站管理系统 ajax php二次开发 在线生成 京东装修 破解淘宝css权限 jquery插件制作 淘宝店铺装修教程 ie6 bug jquery特效 css3 注册插件 源码分享 悬浮代码 视频教程 全屏模板框架 footer-more-trigger 鼠标滑过特效 sn-simple-logo 淘宝店铺装修经验汇总 喜欢代码 弹出层 宝贝分享代码 购物车代码 登陆插件 宝贝收藏代码 详情页全屏 天猫关注带数字 导航特效 遮罩层特效 修改淘宝销量 flash动画 模块下10px问题 二级下拉菜单 轮播特效 京东店铺装修 插件下载 淘宝漏洞 鼠标跟随 隐藏的店招/模块 css3边框阴影 赚积分

点击排行

2016淘宝完全自定义css工具淘宝天猫2016最新css悬浮工具淘宝基础版店铺自由编辑页头页面工具淘宝基础版店铺自主授权工具淘宝基础版店铺真正去除页头10px工具2016淘宝天猫全屏全家桶工具淘宝基础版店铺自由编辑页尾工具为了抓包某app,我折腾了10天,原来他是这样防抓包的纯css实现超宽图片全屏居中（兼容淘宝店铺）css3边框阴影效果

站长推荐

在线生成软件帮助文档实现淘宝基础版详情页导航全屏背景的方法第二期:玩转淘宝店铺装修网站部分文章更新动态一览表淘宝天猫店铺装修问题与技巧性经验汇总淘宝Widget库中轮播特效从入门到精通曝淘宝网往期改销量多处漏洞淘宝卖家有无必要开通css纯css实现超宽图片全屏居中（兼容淘宝店铺）鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)
关于艺灵网站地图艺灵团队
Copyright © 2012 - 2022 艺灵设计, all rights reserved. 技术支持：艺灵设计 网站备案：豫ICP备13015019号
特别申明：本站内容仅供个人学习参考，不做其它用途。