老板说：

我要一行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. C# 使用 Direct2D 实现斜角效果

    Direct2D 是微软新的二维图形 API,可为二维几何图形.位图和文本提供高性能和高质量的呈现.Direct2D 支持硬件加速,无论是绘制速度还是绘制质量,Direct2D 都要比 GDI 和 G ...

  2. React-Native 之控件布局

    Nodejs 一度将前端JS 推到了服务器端,而15年FB的React-Native RN再一次将JS 推到了移动端的开发浪潮中.RN的优势这里不再重复,它是我们这些习惯了服务端.web端开发,而又不 ...

  3. 打造离线使用的Mobile Web App

    最近公司举办技术大赛,我和同事一起制作了一个叫做10K Hours的Mobile Web App,可以帮助你通过一万小时的努力,成为某个领域的专家.正好前段时间翻译了一本书<HTML5 Mobi ...

  4. 我的conky配置

    安装conky的方法请看我博客另外一篇文章,这里不再阐述点这里 附上我的配置2013.08.29(吾喷) background no font WenQuanYi Micro Hei:size=10 ...

  5. 参考XML操作类

    转载参考地址: http://blog.csdn.net/happy09li/article/details/7460521

  6. jsp中如何取得当前页面完整的URL

    JSP页面 <% String url = request.getScheme()+"://"+ request.getServerName()+request.getReq ...

  7. hdu Bone Collector

    入门级动态规划 #include"iostream" #include"string.h" #include"stdio.h" using ...

  8. Use a PowerShell Module to Easily Export Excel Data to CSV

    http://blogs.technet.com/b/heyscriptingguy/archive/2011/07/21/use-a-powershell-module-to-easily-expo ...

  9. 分布式架构高可用架构篇_08_MyCat在MySQL主从复制基础上实现读写分离

    参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...

  10. json格式转换成Map的应用

    jsp 1.引用json.js(将json格式转换成字符串) 2. var name = document.getElementById("name").value; var re ...