老板说：

我要一行5个商品，每个长得都不一样

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>练习</title>

<style>

    li{list-style: none;}

    .slide-content li{float:left;width:100px;height:100px;border:1px solid #000;margin:5px;line-height: 100px;color:#000;text-align: center;}

    .li-1{background:red;}

    .li-2{background:yellow;}

    .li-3{background:blue;}

    .li-4{background:green;}

    .li-5{background:gray;}

</style>

</head>

<body>

<?php

//商品组至少5个噢

$items=array(

    array("name"=>"product1","price"=>10),

    array("name"=>"product2","price"=>20),

    array("name"=>"product3","price"=>30),

    array("name"=>"product4","price"=>40),

    array("name"=>"product5","price"=>10)

);

//一行显示5个

    $li_n=5;

    //宝贝数

    $p_num=count($items)+1;

    //循环的ul数，cei(1.5)=2

    $ul_n=ceil($p_num/$li_n);

for($i=1;$i<$ul_n;$i++){

    $li_nav=1;

    echo '<ul class="slide-content">';

            foreach($items as $key => $item){

                /*listart*/

                $s_n=$key+1;

                $end_q=$i*$li_n;

                $star_q=$end_q-$li_n;

                /*1-5,5-10,10-15等，li_nav每次从1开始*/

                if($s_n>$star_q and $s_n<=$end_q){

                    echo '<li class="li-'.$li_nav.'">'.$item['name'].'</li>';

                    $li_nav++;

                }

                /*liend*/

            }

echo '</ul>';

    }

?>

</body>

</html>

但是，我不会告诉你我有更好的方法>>使用array_chunk()数组分割

php练习：每5个商品一排的更多相关文章

  1. ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能

    如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...

  2. HTML5 CSS3 专题 ：诱人的实例 3D展示商品信息

    强化下perspective和transform:translateZ的用法.传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~ 效果图: 说明一 ...

  3. vue+element 实现商品sku效果

    在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能.实现的效果如下图 除成本.售价.库存.货号这几个写死的属性外,可自行添加/删除商品属性,自行添加 ...

  4. 如何一步一步用DDD设计一个电商网站（四）—— 把商品卖给用户

    阅读目录 前言 怎么卖 领域服务的使用 回到现实 结语 一.前言 上篇中我们讲述了“把商品卖给用户”中的商品和用户的初步设计.现在把剩余的“卖”这个动作给做了.这里提醒一下,正常情况下,我们的每一步业 ...

  5. DDD 领域驱动设计-商品建模之路

    最近在做电商业务中,有关商品业务改版的一些东西,后端的架构设计采用现在很流行的微服务,有关微服务的简单概念: 微服务是一种架构风格,一个大型复杂软件应用由一个或多个微服务组成.系统中的各个微服务可被独 ...

  6. 【Machine Learning】决策树案例：基于python的商品购买能力预测系统

    决策树在商品购买能力预测案例中的算法实现 作者:白宁超 2016年12月24日22:05:42 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本 ...

  7. 电商系统中的商品模型的分析与设计—续

    前言     在<电商系统中的商品模型的分析与设计>中,对电商系统商品模型有一个粗浅的描述,后来有博友对货品和商品的区别以及属性有一些疑问.我也对此做一些研究,再次简单的对商品模型做一个介 ...

  8. Redis命令拾遗四（集合类型）—包含简单搜索筛选商品设计实例。

    本文版权,归博客园和作者吴双共同所有.转载和爬虫请注明博客园蜗牛Redis系列文章地址 http://www.cnblogs.com/tdws/tag/NoSql/ Redis数据类型之集合(Set) ...

  9. C#开发微信门户及应用(23)-微信小店商品管理接口的封装和测试

    在上篇<C#开发微信门户及应用(22)-微信小店的开发和使用>里面介绍了一些微信小店的基础知识,以及对应的对象模型,本篇继续微信小店的主题,介绍其中API接口的封装和测试使用.微信小店的相 ...

随机推荐

  1. 实践1-qq邮箱主页

    纯html的网页 采用table分割板块进行布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  2. POJ3659 Cell Phone Network（树上最小支配集：树型DP）

    题目求一棵树的最小支配数. 支配集,即把图的点分成两个集合,所有非支配集内的点都和支配集内的某一点相邻. 听说即使是二分图,最小支配集的求解也是还没多项式算法的.而树上求最小支配集树型DP就OK了. ...

  3. BZOJ3776 : 警察局

    怎么3776又换题目了…换题目了…题目了…目了…了… SCC缩点后只有入度或者出度为0的点必须要放警察局 假设一共有t-1个入度或者出度为0的SCC q[1]-q[t-1]表示这些SCC中点的个数 q ...

  4. svg―Raphael.js Library

    Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...

  5. TYVJ P1013 找啊找啊找GF Label：动态规划

    做题记录:2016-08-15 22:19:04 背景 MM七夕模拟赛 描述 "找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手,你是我的好GF.再见.""诶,别再见啊.. ...

  6. Windows7下面手把手教你安装Django

    我所使用的操作系统是Windows7,内存是2G 在搜索了一些资料发现,对于Django的安装,详细的真的很少,都说的很简化,然而,这篇blog可以手把手教你成功安装Django 对于Django的详 ...

  7. OFFICE 修改记录保存在单元格批注中vba

    Dim ydtext As String '原单元格值 Private Sub Worksheet_Change(ByVal Target As Range) If Target.Cells.Coun ...

  8. android ScrollView滚动距离和判断滚动停止状态

    今天很高兴,自己解决了判断ScrollView滚动停止的监听,现在分享给大家. 因为ScrollView没有像listView中的setOnScrollListener()监听,当然也就没有SCROL ...

  9. include动作标记和include指令标记学习笔记

    我的jsp学习参考书是耿祥义,张跃平编著的jsp大学使用教程这本书,我也向大家推荐这本书,我觉得这本书适合我的学习方式,知识的讲解透彻易懂. include指令标记                   ...

  10. 3. Configure the Identity Service

    Controller Node: 安装认证服务: 1. sudo apt-get install keystone   2. sudo vi /etc/keystone/keystone.conf [ ...