你好,游客 登录 注册 搜索
站长(煌流云)QQ:1107629738
详情页面

【京东】一排四图周大福表格布局两排简洁商品展示代码

日期:2017-10-31

 


 

 

<style>.user_jy47_sptjzdfmx ul{
padding:0px;
margin:0px;
list-style-type: none;
position:relative;
z-index:5;
}

.user_jy47_sptjzdfmx a.tablink{
width:154px;
height:39px;
overflow:hidden;
position:absolute;

}

.user_jy47_sptjzdfmx .tabli .tablink img{
position:absolute;
top:0px;
}

.user_jy47_sptjzdfmx a.tablink:hover img{ 
top:-39px;
}

.user_jy47_sptjzdfmx ul li ul{
display: none;
}

.user_jy47_sptjzdfmx ul li:hover ul{
display:block;
position:absolute;
top:47px;
left:0px;
padding:0px 0px;
}
.user_jy47_sptjzdfmx table div.item{
display:block;
width:243px;
height:243px;
z-index:1;
position:relative;
cursor:pointer;
}
.user_jy47_sptjzdfmx table .item{
display:block;
width:243px;
height:243px;
z-index:1;
position:relative;
}
.user_jy47_sptjzdfmx .item .price{
width: 243px;
height: 49px;
background-color: #000000;
opacity: 0.6;
color: #FFF;
text-align: center;
padding-top: 10px;
font-family: microsoft yahei;
font-size: 14px;
position:absolute;
bottom:0;
display:none;
}
.user_jy47_sptjzdfmx table div.item:hover .price{
display:block;
}
.user_jy47_sptjzdfmx table a.item:hover {

}
</style>
<div class="user_jy47_sptjzdfmx"> 


<table border="0" cellpadding="0" cellspacing="0" width="990"> 
<tbody valign="top"> 
<tr> 
<td style="width:249px;height:249px;">
<div class="item"> 
<a href="#" target="_blank" clstag="jshopmall|keycount|14766183|4"> <img class="" src="http://img10.360buyimg.com/imgzone/jfs/t2338/127/988590564/38861/c6976bf2/56386bd5N5ebf84f4.jpg" alt="" border="0" height="243" width="243" ks_mark="y"></a> 
<div class="price"> 
<a href="#http://www.jy47.com/1003154847.html" target="_blank" clstag="jshopmall|keycount|14766183|5"><span style="color:white;text-align:center;">迷你转运珠</span></a> 
<p>官方售价:¥<span class="user_piof" >349.00</span></p> 
</div> 
</div></td> 
<td style="width:249px;">
<div class="item"> 
<a href="#http://www.jy47.com/1468214910.html" target="_blank" clstag="jshopmall|keycount|14766183|6"> <img class="" src="http://img10.360buyimg.com/imgzone/jfs/t2431/61/972062252/15877/d2d44892/563972d8N3ed0b515.jpg" alt="" border="0" height="243" width="243" ks_mark="y" ks_natural="y"></a> 
<div class="price"> 
<a href="#http://www.jy47.com/1468214910.html" target="_blank" clstag="jshopmall|keycount|14766183|7"><span style="color:white;text-align:center;">简约水波链</span></a> 
<p>官方售价:¥<span class="user_piof" >533.00</span></p> 
</div> 
</div></td> 
<td style="width:249px;">
<div class="item"> 
<a href="#http://www.jy47.com/10128656597.html" target="_blank" clstag="jshopmall|keycount|14766183|8"> <img class="" src="http://img10.360buyimg.com/imgzone/jfs/t2107/263/1470856755/39454/48929080/56a5c939N97c71932.jpg" alt="" border="0" height="243" width="243" ks_mark="y"></a> 
<div class="price"> 
<a href="#http://www.jy47.com/10128656597.html" target="_blank" clstag="jshopmall|keycount|14766183|9"><span style="color:white;text-align:center;">花绕指尖</span></a> 
<p>官方售价:¥<span class="user_piof" >809.00</span></p> 
</div> 
</div></td> 
<td>
<div class="item"> 
<a href="#" target="_blank" clstag="jshopmall|keycount|14766183|10"> <img class="" src="http://img10.360buyimg.com/imgzone/jfs/t1453/321/1337575512/20405/6661d5c1/55c46ff7N917ea9be.jpg" alt="" border="0" height="243" width="243" ks_mark="y"></a> 
<div class="price"> 
<a href="#" target="_blank" clstag="jshopmall|keycount|14766183|11"><span style="color:white;text-align:center;">清新花介</span></a> 
<p>官方售价:¥<span class="user_piof" >441.00</span></p> 
</div> 
</div></td> 
</tr> 
<tr> 
<td style="height:249px;">
<div class="item"> 
<a href="#" target="_blank" clstag="jshopmall|keycount|14766183|12"> <img class="" src="http://img10.360buyimg.com/imgzone/jfs/t1498/92/1337029998/21329/ce0e2146/55c4701eN89477341.jpg" alt="" border="0" height="243" width="243" ks_mark="y" ks_natural="y"></a> 
<div class="price"> 
<a href="#" target="_blank" clstag="jshopmall|keycount|14766183|13"><span style="color:white;text-align:center;">彩色的梦</span></a> 
<p>官方售价:¥<span class="user_piof" >791.00</span></p> 
</div> 
</div></td> 
<td>
<div class="item"> 
<a href="#http://www.jy47.com/1709070684.html" target="_blank" clstag="jshopmall|keycount|14766183|14"> <img class="" src="http://img10.360buyimg.com/imgzone/jfs/t2320/91/14800596/38902/ddc99cd2/55e69780Nf589580e.jpg" alt="" border="0" height="243" width="243" ks_mark="y" ks_natural="y"></a> 
<div class="price"> 
<a href="#http://www.jy47.com/1709070684.html" target="_blank" clstag="jshopmall|keycount|14766183|15"><span style="color:white;text-align:center;">恋恋不忘</span></a> 
<p>官方售价:¥<span class="user_piof" >1435.00</span></p> 
</div> 
</div></td> 
<td>
<div class="item"> 
<a href="#http://www.jy47.com/1339126637.html" target="_blank" clstag="jshopmall|keycount|14766183|16"> <img class="" src="http://img10.360buyimg.com/imgzone/jfs/t1453/350/1346440120/17972/7d273126/55c46ffbN980dcc5d.jpg" alt="" border="0" height="243" width="243" ks_mark="y" ks_natural="y"></a> 
<div class="price"> 
<a href="#http://www.jy47.com/1339126637.html" target="_blank" clstag="jshopmall|keycount|14766183|17"><span style="color:white;text-align:center;">可爱kitty</span></a> 
<p>官方售价:¥<span class="user_piof" >1380.00</span></p> 
</div> 
</div></td> 
<td>
<div class="item"> 
<a href="#http://www.jy47.com/1709516779.html" target="_blank" clstag="jshopmall|keycount|14766183|18"> <img class="" src="http://img10.360buyimg.com/imgzone/jfs/t2491/317/1225217662/27790/5bf1cbfb/568cce35N6b0e1dd5.jpg" alt="" border="0" height="243" width="243" ks_mark="y"></a> 
<div class="price"> 
<a href="#http://www.jy47.com/1709516779.html" target="_blank" clstag="jshopmall|keycount|14766183|19"><span style="color:white;text-align:center;">爱你如初</span></a> 
<p>官方售价:¥<span class="user_piof" >533.00</span></p> 
</div> 
</div></td> 
</tr> 
</tbody> 
</table> 
</div>

本文地址:/n762c47.aspx,转载请注明出处。

快来喂养你的小仓鼠:左键点击喂食互动↓

 

0 | | 煌流云 |
本文评论
姓名:
字数
    内容分类
    PS教学