html 样式:
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.fl {
float: left;
}
.fl{
float: right;
}
body {
background: black;
}
.cll {
width: 1264px;
margin: 0 auto;
background: white;
padding-top: 34px;
}
.clls{
width: 1236px;
margin-left: 28px;
padding-bottom: 336px;
}
.clls .tob {
width: 100%;
height: 40px;
overflow: hidden;
background: #777;
margin-bottom: 25px;
}
.clls .tob p{
float:left;
line-height: 40px;
margin-left:15px;
}
.clls .tob ul{
float:left;
overflow:hidden;
}
.clls .tob ul li{
float:left;
width:56px;
height:24px;
border:1px solid #777;
background:#F1F1F1;
color:#42B9F0;
line-height: 24px;
text-align: center;
margin-top:7px;
margin-right: 8px;
font-weight: 100;
font-size: 14px;
}
.maine{
overflow:hidden;
}
.mains{
width: 228px;
height: 393px;
border: 1px solid #fffefe;
background: #E3E3E3;
margin-right: 8px;
margin-bottom: 16px;
}
.mains .wer{
width:100%;
height:348px;
background:white;
}
.mains .wer>p{
color:cornflowerblue;
font-size:12px;
line-height:16px;
margin-left:7px;
}
.mains .wer .jia{
overflow:hidden;
margin-top:6px;
}
.mains .wer .jia p{
float:left;
color:#FF4200;
margin-left:5px;
}
.mains .wer .jia span{
float: left;
display: block;
text-decoration: line-through;
font-size: 13px;
margin-top: 2px;
color: #777;
margin-left: 60px;
}
.mains .wer .ping{
overflow: hidden;
width: 212px;
margin: 0 auto;
border-top: 1px solid #d4d1d1;
margin-top: 12px;
}
.mains .wer .ping .ping-1,.mains .wer .ping .ping-2{
width:70px;
height:52px;
border-right:1px solid #d4d1d1;
}
.mains .wer .ping .ping-3{
width:70px;
height:52px;
}
.mains .wer .ping .ping-1 p{
font-size:12px;
color:cornflowerblue;
text-align: center;
margin-top:5px;
}
.mains .wer .ping .ping-1 span{
display: block;
font-size:12px;
color:#d4d1d1;
text-align: center;
margin-top:5px;
}
.mains .wer .ping .ping-2 p{
font-size:12px;
color:#B57C5B;
text-align: center;
margin-top:5px;
}
.mains .wer img{
width:220px;
height:220px;
}
.mains .wer .ping .ping-2 span{
display: block;
font-size:12px;
color:#d4d1d1;
text-align: center;
margin-top:5px;
}
.mains .wer .ping .ping-3 p{
font-size:12px;
color:#B57C5B;
text-align: center;
margin-top:5px;
}
.mains .wer .ping .ping-3 span{
display: block;
font-size:12px;
color:#d4d1d1;
text-align: center;
margin-top:5px;
}
PHP数组:
$a=[
0=>[
'name'=>'美国空运车厘子 新鲜水果进口大樱桃 2<br/>斤装',
'print'=>'168',
'Original price'=>'208',
'image'=>'./234/images/1.jpg',
'Sales volume'=>'168',
'Clicks'=>'0'
],
1=>[
'name'=>'佳沛新西兰阳光奇异果12个 进口猕猴<br/>桃 新鲜水果',
'print'=>'88',
'Original price'=>'108',
'image'=>'./234/images/2.jpg',
'Sales volume'=>'88',
'Clicks'=>'0'
],
2=>[
'name'=>'佳沛新西兰绿奇异果36个(原装)进口猕<br/>猴桃 新鲜水果',
'print'=>'148',
'Original price'=>'160',
'image'=>'./234/images/3.jpg',
'Sales volume'=>'148',
'Clicks'=>'0'
],
3=>[
'name'=>'七果果 越南白心火龙果[三斤起拍,只多<br/>不少]进口新鲜水果 堪比红心火龙果',
'print'=>'30',
'Original price'=>'50',
'image'=>'./234/images/4.jpg',
'Sales volume'=>'30',
'Clicks'=>'0'
],
4=>[
'name'=>'哥伦比亚金燕窝果 新鲜进口水果 麒麟果<br/>黄色白心火龙果 4只',
'print'=>'468',
'Original price'=>'499',
'image'=>'./234/images/5.jpg',
'Sales volume'=>'468',
'Clicks'=>'0'
],
5=>[
'name'=>'诚绿丰 越南进口红肉火龙果 新鲜水果红<br/>心火龙果 江浙沪皖包邮 1斤装',
'print'=>'49',
'Original price'=>'69',
'image'=>'./234/images/6.jpg',
'Sales volume'=>'49',
'Clicks'=>'0'
],
6=>[
'name'=>'加拿大樱桃 2斤装 车厘子 樱桃 进口新<br/>鲜水果',
'print'=>'128',
'Original price'=>'149',
'image'=>'./234/images/7.jpg',
'Sales volume'=>'128',
'Clicks'=>'0'
],
7=>[
'name'=>'畅享礼盒 奇异果火龙果佳节送礼进口新<br/>鲜水果',
'print'=>'168',
'Original price'=>'198',
'image'=>'./234/images/8.jpg',
'Sales volume'=>'168',
'Clicks'=>'0'
],
8=>[
'name'=>'越南红心火龙果5斤装 红肉火龙果 新鲜<br/>进口水果',
'print'=>'666',
'Original price'=>'7654',
'image'=>'./234/images/09.jpg',
'Sales volume'=>'666',
'Clicks'=>'0'
],
9=>[
'name'=>'新西兰红玫瑰苹果queen4个(约180g/<br/>个)',
'print'=>'121',
'Original price'=>'312',
'image'=>'./234/images/010.jpg',
'Sales volume'=>'121',
'Clicks'=>'0'
],
];
html代码:
<div class="cll">
<div class="clls">
<div class="tob">
<p>排序 :</p>
<ul>
<li>价格</li>
<li>销量</li>
<li>人气</li>
</ul>
</div>
<div class="maine">
<?php foreach($a as $value):?>
<div class="mains fl">
<div class="wer">
<a href="#"><img src="<?php echo $value["image"]; ?>" alt=""></a>
<p><?php echo $value["name"]; ?></p>
<div class="jia">
<p><?php echo $value["print"]; ?></p>
<span><?php echo $value["Original price"]; ?></span>
</div>
<div class="ping">
<div class="ping-1 fl">
<p><?php echo $value["Sales volume"]; ?></p>
<span>商品销量</span>
</div>
<div class="ping-2 fl">
<p>评论表</p>
<span>用户评论</span>
</div>
<div class="ping-3 fl">
<p><?php echo $value["Clicks"]; ?></p>
<span>点击量</span>
</div>
</div>
</div>
</div>
<?php endforeach;?>
</div>
显示页面如下