淘宝宝贝展示-CSS3动态边框代码

淘宝宝贝展示模板代码

边框动态展示模块

--CSS动态边框：鼠标经过显示黑色边框，鼠标移开边框消失。

  效果如下图所示

1. <div style="height:780px;">
   
2.   <div class="J_TWidget" data-widget-type="Carousel" data-title="网店装修网" data-widget-config="{'duration':0.1,'activeTriggerCls':'\u00A0tshop-pbsm-shop-nav-ch','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'nav_zw','contentCls':'content_zw','autoplay':true}" style="position:relative;">
   
3.     <ul class="content_zw" style="display: none; width: 999999px; left: 0px; position: absolute;">
   
4.       <li class="-_-switchable-panel-internal283 -_-switchable-panel-internal206 ks-switchable-panel-internal1739" style="display: block; float: left;"> </li>
   
5.     </ul>
   
6.     <ul class="nav_zw">
   
7.       <li style="width:950px;height:500px;" class="ks-switchable-trigger-internal1738 tshop-pbsm-shop-nav-ch">
   
8.         <div class="new-issue-list310-index clearfix">
   
9.           <div class="con">
   
10.             <TABLE border=0 cellSpacing=0 cellPadding=0 width=950 height=771>
    
11.               <TBODY>
    
12.                 <TR>
    
13.                   <TD><A href="#"
    
14.         target=_blank><IMG alt=""
    
15.         src="http://img.tbzxiu.com/05/TB2RnvWaXXXXXXLXXXXXXXXXXXX_!!688196721.jpg" width=317
    
16.         height=387>
    
17.                     <DIV style="WIDTH: 300px; HEIGHT: 370px"
    
18.         class=footer-more-trigger></DIV>
    
19.                     </A></TD>
    
20.                   <TD><A href="#"
    
21.         target=_blank><IMG alt=""
    
22.         src="http://img.tbzxiu.com/05/TB2C.zVaXXXXXalXXXXXXXXXXXX_!!688196721.jpg" width=313
    
23.         height=387>
    
24.                     <DIV style="WIDTH: 300px; HEIGHT: 370px"
    
25.         class=footer-more-trigger></DIV>
    
26.                     </A></TD>
    
27.                   <TD><A href="#"
    
28.         target=_blank><IMG alt=""
    
29.         src="http://img.tbzxiu.com/05/TB2DK_VaXXXXXa7XXXXXXXXXXXX_!!688196721.jpg" width=320
    
30.         height=387>
    
31.                     <DIV style="WIDTH: 300px; HEIGHT: 370px"
    
32.         class=footer-more-trigger></DIV>
    
33.                     </A></TD>
    
34.                 </TR>
    
35.                 <TR>
    
36.                   <TD><A href="#"
    
37.         target=_blank><IMG alt=""
    
38.         src="http://img.tbzxiu.com/05/TB2o4LVaXXXXXaWXXXXXXXXXXXX_!!688196721.jpg" width=317
    
39.         height=384>
    
40.                     <DIV style="WIDTH: 300px; HEIGHT: 370px"
    
41.         class=footer-more-trigger></DIV>
    
42.                     </A></TD>
    
43.                   <TD><A href="#"
    
44.         target=_blank><IMG alt=""
    
45.         src="http://img.tbzxiu.com/05/TB2SkPTaXXXXXacXXXXXXXXXXXX_!!688196721.jpg" width=313
    
46.         height=384>
    
47.                     <DIV style="WIDTH: 300px; HEIGHT: 370px"
    
48.         class=footer-more-trigger></DIV>
    
49.                     </A></TD>
    
50.                   <TD><A href="#"
    
51.         target=_blank><IMG alt=""
    
52.         src="http://img.tbzxiu.com/05/TB2QIPWaXXXXXXMXpXXXXXXXXXX_!!688196721.jpg" width=320
    
53.         height=384>
    
54.                     <DIV style="WIDTH: 300px; HEIGHT: 370px"
    
55.         class=footer-more-trigger></DIV>
    
56.                     </A></TD>
    
57.                 </TR>
    
58.               </TBODY>
    
59.             </TABLE>
    
60.           </DIV>
    
61.         </DIV>
    
62.       </LI>
    
63.     </UL>
    
64.   </DIV>
    
65. </DIV>
    

复制代码

导航CSS代码：

1. .new-issue-list310-index{width:950px;position:relative;padding:0px;}.new-issue-list310-index .con a{display:block;position:relative;padding:0px;}.new-issue-list310-index .con a img{display:block;padding:0px;}.new-issue-list310-index .con a div{border:0px solid #000;visibility:hidden;left:0;top:0;right:0;bottom:0;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;opacity:0;padding:0px;}.new-issue-list310-index .con a:hover div{border:7px solid #000;visibility:visible;opacity:1;padding:0px;}

复制代码