艺灵设计

全部文章
×

九宫格式选项卡特效

作者:艺灵设计 - 来源: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

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2014-01-12/145.html

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

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

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

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

评论区