<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #content{

            width: 1000px;

            margin: 300px auto;

            border: 1px solid #000;

            overflow: hidden;

        }

        .box{

            border: 1px solid #000;

            overflow: auto;

            width: 200px;

            box-sizing: border-box;

            float: left;

        }

        .box p{

            line-height:15x;

            font-size: 14px;

            width: 100%;

        }

        .box span{

            font-size: 16px;

            color: red;

        }

    </style>

</head>

<body>

<div id="content">

        <p>暂时没有货</p>

        <!--<img src="https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg" alt="">-->

        <!--<p>苏泊尔（SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶（赠汤锅+炒锅）</p>-->

        <!--<span>499</span>-->

</div>

<script>

    var data=[{

        img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",

        name:"苏泊尔（SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶（赠汤锅+炒锅）",

        price:"499"

    },

        {

            img:"https://img11.360buyimg.com/babel/s180x180_jfs/t1/71634/16/6480/286082/5d48e109Ee6ec4ab4/114c9c81eeb8cfa3.jpg",

            name:"美的(Midea) 三门冰箱美的 双门冰箱无霜风冷家用节能静音电冰箱 BCD-231WTM(E)",

            price:"288"

        },

        {

            img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",

            name:"苏泊尔（SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶（赠汤锅+炒锅）",

            price:"499"

        },

        {

            img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",

            name:"苏泊尔（SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶（赠汤锅+炒锅）",

            price:"499"

        },

        {

            img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",

            name:"苏泊尔（SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶（赠汤锅+炒锅）",

            price:"499"

        }

    ];

    var oContent=document.getElementById("content")

    var str=""

    for(var i=0;i<data.length;i++){

        str+='<div class="box"><img src="'+data[i].img+'" alt=""><p>'+data[i].name+'</p><span>'+data[i].price+'</span></div> '

    }

    oContent.innerHTML = str;//除了表单标签用value，其他都用innerHTML;

</script>

</body>

</html>

步骤：1、首先正常设置好大盒子里小盒子的样式，然后删除小盒子，只留着样式。这些样式可以统以给剩下的用。

  <style>

        #content{

            width: 1000px;

            margin: 300px auto;

            border: 1px solid #000;

            overflow: hidden;

        }

        .box{

            border: 1px solid #000;

            overflow: auto;

            width: 200px;

            box-sizing: border-box;

            float: left;

        }

        .box p{

            line-height:15x;

            font-size: 14px;

            width: 100%;

        }

        .box span{

            font-size: 16px;

            color: red;

        }

    </style>

</head>

<body>

<div id="content">

        <p>暂时没有货</p>

        <!--<img src="https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg" alt="">-->

        <!--<p>苏泊尔（SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶（赠汤锅+炒锅）</p>-->

        <!--<span>499</span>-->

</div>

　　　2、当没有数据包时自己制作数据包，制作要求：数组里面有多个对象，每个对象里都是键值对。属性值要用双引号（“”）包裹住，键值对之间用逗号（，）隔开，对象与对象之间也用逗号隔开，一定要注意格式别写错。

 var data=[{

        img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",

        name:"苏泊尔（SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶（赠汤锅+炒锅）",

        price:"499"

    },

        {

            img:"https://img11.360buyimg.com/babel/s180x180_jfs/t1/71634/16/6480/286082/5d48e109Ee6ec4ab4/114c9c81eeb8cfa3.jpg",

            name:"美的(Midea) 三门冰箱美的 双门冰箱无霜风冷家用节能静音电冰箱 BCD-231WTM(E)",

            price:"288"

        },

        {

            img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",

            name:"苏泊尔（SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶（赠汤锅+炒锅）",

            price:"499"

        },

        {

            img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",

            name:"苏泊尔（SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶（赠汤锅+炒锅）",

            price:"499"

        },

        {

            img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",

            name:"苏泊尔（SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶（赠汤锅+炒锅）",

            price:"499"

        }

    ];

　3、通过大盒子的id与js实现练习。设置一个空字符串，利用for循环，将设置的数据库data里面的各个属性值一次赋值给str，一定要注意格式。属性值外面要‘+xx.x+’，单引号和加号别搞忘了。

然后将str被赋到的值传给大盒子。str就相当于是小盒子

var oContent=document.getElementById("content")

    var str=""

    for(var i=0;i<data.length;i++){

        str+='<div class="box"><img src="'+data[i].img+'" alt=""><p>'+data[i].name+'</p><span>'+data[i].price+'</span></div> '

    }

    oContent.innerHTML = str;//除了表单标签用value，其他都用innerHTML;

jason数组实现页面的更多相关文章

  1. jQuery Ajax遍历表格，填充数据，将表格中的数据一条一条拼成Jason数组

    $.ajax({ url: baseURL + "InvoiceSale/OnQuotaInvoiceSale", //点击核销单号时,点击核销时,交互的页面           ...

  2. JS数组 编程练习 使用Javascript语言，把以下数组 在页面显示如下图所示的图案

    编程练习 使用Javascript语言,把以下数组 var  arr = ['*','##',"***","&&","****&quo ...

  3. php中使用mysql_fetch_array输出数组至页面中展示

    用的是CI框架,很好的MVC结构 在Model层 public function showProteinCategory(){ $sql = "SELECT DISTINCT protein ...

  4. springmvc使用数组接收页面商品列表批量删除传过来的参数，并完成批量删除的操作。

    1.1 需求 在商品列表页面选中多个商品,然后删除. 1.2 需求分析 此功能要求商品列表页面中的每个商品前有一个checkbox,选中多个商品后点击删除按钮把商品id传给controller,根据商 ...

  5. Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式

    Linux就这个范儿 第15章 七种武器  linux 同步IO: sync.fsync与fdatasync   Linux中的内存大页面huge page/large page  David Cut ...

  6. Spring MVC数组绑定

    需求:商品批量删除,用户在页面选择多个商品,批量删除. 关键:将页面选择(多选)的商品id,传到controller方法的形参,方法形参使用数组接收页面请求的多个商品id // 批量删除 商品信息 @ ...

  7. JQuery Uplodify上传附件（同一个页面多个uplodify控件解决方案）

    功能描述:实现同一页面中多个不同附件的上传保存,且做到最大程度的减少代码修改量(最大程度的公用),为了方便实现垃圾数据和垃圾文件的处理,项目采用临时文件夹的方式:即:文件自动上传先保存到临时文件夹下, ...

  8. springMVC学习(6)-包装pojo类型、数组、list、Map类型参数绑定

    一.包装类型pojo参数绑定: 需求:商品查询controller方法中实现商品查询条件传入. 实现方法: 1)在形参中 添加HttpServletRequest request参数,通过reques ...

  9. php数据库访问及增删改

    利用PHP访问由MySQL构建的数据库 连接到数据库 //1.造连接对象 $db = new MySQLi("localhost","root","1 ...

  10. SQLite剖析之存储模型

    前言 SQLite作为嵌入式数据库,通常针对的应用的数据量相对于DBMS的数据量小.所以它的存储模型设计得非常简单,总的来说,SQLite把一个数据文件分成若干大小相等的页面,然后以B树的形式来组织这 ...

随机推荐

  1. 1903021126-申文骏-Java第十一周作业-Java中继承、多态及抽象类的使用

    项目 内容 课程班级博客链接 19级信计班(本) 作业要求链接 第十一周作业 博客名称 1903021126-申文骏-Java第十一周作业-Java中继承.多态及抽象类的使用 作业要求 每道题要有题目 ...

  2. SQL Sever ——基础篇之数据库的基本操作

    数据库定义:对数据进行存储喝管理 数据库的系统模型:层次型,网状型,关系型(主流)和对象关系型. 关系型:Realation model 关系-->行列交叉.形式:表示实体和实体间相互联系的数据 ...

  3. 反序列化 sqlserver 中的 sysdiagrams，找到其中包含的表的信息

    转载于:Script SQL Server 2005 diagrams to a file - CodeProject /** <summary> Based on ufn_Varbina ...

  4. 解决spring boot 2.6.4版本循环依赖问题

    引用spring boot 2.6.4 版本 报循环依赖错误 *************************** APPLICATION FAILED TO START ************* ...

  5. python 前言

    # python前言简介: ## 文件的概诉 ```py# 什么是文件 .文件夹? 其实是操作系统暴露给用户可以简单快捷操作硬盘的"接口"``` ## 计算机内部储存数据的原理 ` ...

  6. 位置式PID和增量式PID

    PID介绍 PID 是 Proportional(比例).Integral(积分).Differential(微分)的首字母缩写:是一种结合比例.积分和微分三种环节于一体的闭环控制算法.PID 控制的 ...

  7. MySQL Workbench常用快捷键及修改方法

    常用快捷键: 1. 执行整篇sql脚本:Ctrl + Shift + Enter 2. 执行当前行:Ctrl + Enter 3. 注释/取消注释: Ctrl + / 4. 格式化sql语句(美化sq ...

  8. 实践课：i至诚app案例分析---江洁兰

    这个作业属于哪个课程 至诚软工实践F班 这个作业要求在哪里 作业要求 这个作业的目标 分析产品软件,找出其中的问题并进行分析,提高对产品软件bug方面的认识 学号 212106715 第一部分 找Bu ...

  9. ASP.NET在Repeater中使用Button控件报错

    普通Button在这里会报错,小编找了一天也没有解决这个问题, 这里可以换做LinkButton或者ImageButton替换普通的Button

  10. 转载C#加密方法

    方法一:    //须添加对System.Web的引用     using System.Web.Security;          ...          /// <summary> ...