首页 > 代码库 > 水平列表仿京东
水平列表仿京东
//css
*{
margin:0;
padding:0;
}
body{
font-size:12px;
font-family:tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;
line-height:1.5;
color: #666;
background:#ddd;
}
a{
text-decoration:none;
}
ul{
list-style:none;
}
h2{
font-weight:normal;
}
i,em{
font-style:normal;
}
/*倒计时列表*/
.clearfix:after{
visibility:hidden;
clear:both;
content:"";
display:block;
height:0;
}
.panci-list{
width:1200px;
margin:50px auto;
background:#fff;
/*阴影*/
box-shadow:0 5px 10px 0 rgba(0,0,0,0.1);
/*圆角*/
border-radius:5px;
}
.panci-list-cont{
width:200px;
box-sizing:border-box;
float:left;
position:relative;
}
.panci-list-cont.hid-line:before{
content:"";
width:0;
height:0;
background:#fff;
}
.panci-list-cont:before{
position:absolute;
height:100%;
width:1px;
background:#ddd;
right:0px;
top:0px;
content:"";
/*缩放*/
transform:scale(0.8);
}
.panci-list-cont a{
color:#999;
}
.panci-list-cont a:hover{
color:#f90000;
}
.panci-list-cont a:hover .panci-list-img img{
transform:translateY(-6px);
}
.panci-list-cont a:last-child:hover .panci-list-img img{
transform:translateY(0px);
}
.panci-list-sale{
display:block;
width:26px;
padding:0 2px;
height:39px;
background:url(image/sprite_index@1x.png) -53px -41px;
position:absolute;
top:20px;
left:10px;
color:#fff;
text-align:center;
line-height:36px;
}
.panci-list-img{
text-align:center;
padding-top:14px;
}
.panci-list-img img{
transition:all 0.35s;
-webkit-transition: all 0.35s;
}
.panci-list-text{
padding: 0px 15px;
padding-top: 5px;
max-height: 40px;
overflow: hidden;
}
.panci-list-price{
padding:10px 15px;
}
.panci-list-price .current{
color:#f90000;
font-weight:bold;
font-size:16px;
}
.panci-list-price .current i,.panci-list-price .prime i{
font-size:12px;
}
.panci-list-price .prime{
color:#999;
text-decoration:line-through;
padding-left:10px;
}
.panci-list-price .prime i{
text-decoration:none;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局列表01</title> <link rel="stylesheet" href="http://www.mamicode.com/src01.css"> </head> <body> <div class="panci-list clearfix"> <div class="panci-list-cont"> <a href="http://www.mamicode.com/#"> <div class="panci-list-img"> <img src="http://www.mamicode.com/image/1.webp.jpg"> </div> <div class="panci-list-text">【京东超市】哈尔滨（Harbin）小麦王啤酒 500ml*18听</div> </a> <div class="panci-list-price"> <span class="current"><i>￥</i>77.33</span> <span class="prime"><i>￥</i>68.00</span> </div> <em class="panci-list-sale"> 热卖 </em> </div> <div class="panci-list-cont"> <a href="http://www.mamicode.com/#"> <div class="panci-list-img"> <img src="http://www.mamicode.com/image/2.webp.jpg"> </div> <div class="panci-list-text">【京东超市】哈尔滨（Harbin）小麦王啤酒 500ml*18听</div> </a> <div class="panci-list-price"> <span class="current"><i>￥</i>77.33</span> <span class="prime"><i>￥</i>68.00</span> </div> <em class="panci-list-sale"> 热卖 </em> </div> <div class="panci-list-cont"> <a href="http://www.mamicode.com/#"> <div class="panci-list-img"> <img src="http://www.mamicode.com/image/3.webp.jpg"> </div> <div class="panci-list-text">【京东超市】维达（Vinda) 抽纸 婴儿抽纸 软抽3层150抽*18包 (整箱销售)</div> </a> <div class="panci-list-price"> <span class="current"><i>￥</i>77.33</span> <span class="prime"><i>￥</i>68.00</span> </div> <em class="panci-list-sale"> 热卖 </em> </div> <div class="panci-list-cont"> <a href="http://www.mamicode.com/#"> <div class="panci-list-img"> <img src="http://www.mamicode.com/image/4.webp.jpg"> </div> <div class="panci-list-text">【京东超市】哈尔滨（Harbin）小麦王啤酒 500ml*18听</div> </a> <div class="panci-list-price"> <span class="current"><i>￥</i>77.33</span> <span class="prime"><i>￥</i>68.00</span> </div> <em class="panci-list-sale"> 热卖 </em> </div> <div class="panci-list-cont hid-line"> <a href="http://www.mamicode.com/#"> <div class="panci-list-img"> <img src="http://www.mamicode.com/image/6.webp.jpg"> </div> <div class="panci-list-text">【京东超市】哈尔滨（Harbin）小麦王啤酒 500ml*18听</div> </a> <div class="panci-list-price"> <span class="current"><i>￥</i>77.33</span> <span class="prime"><i>￥</i>68.00</span> </div> <em class="panci-list-sale"> 热卖 </em> </div> <div class="panci-list-cont"> <a href="http://www.mamicode.com/#"> <div class="panci-list-img"> <img src="http://www.mamicode.com/image/5.jpg!q90"> </div> </a> </div> </div> </body> </html>
水平列表仿京东
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。