网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷。
1、先添加一个style样式控制div默认不换行
<style>
div{float:left} </style>
2、然后输入PHP代码
<?php $arr = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20); foreach($arr as $key => $val){ $j = 1; if($key % 10 >3){ $j = 2; } if($key%10 == 4 || $key%10 == 0){ echo "<br>"; } if($j == 2){ if($key%10 == 0 || $key%10 ==1){ if($key%2!=0){ echo "<div style=\"width:20px;height:20px;background-color:#2864bb;\"></div>"; }else{ echo "<div style=\"width:20px;height:20px;background-color:#7ea2d6;\"></div>"; } }else{ if($key%2!=0){ echo "<div style=\"width:20px;height:20px;background-color:#2864bb;\"></div>"; }else{ echo "<div style=\"width:20px;height:20px;background-color:#7ea2d6;\"></div>"; } } }else{ if($key%10 == 0 || $key%10 ==1){ if($key%2==0){ echo "<div style=\"width:40px;height:20px;background-color:#2864bb;\"></div>"; }else{ echo "<div style=\"width:40px;height:20px;background-color:#7ea2d6;\"></div>"; } }else{ if($key%2==0){ echo "<div style=\"width:20px;height:20px;background-color:#2864bb;\"></div>"; }else{ echo "<div style=\"width:20px;height:20px;background-color:#7ea2d6;\"></div>"; } } } } ?>
然后打印出来的效果是如下的图片,每一个颜色块都是一个div块,第一个和第二个为长方形,第三个和第四个是正方形,颜色从偶数行开始颜色的排列和奇数行相反。