<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>淘宝购物界面</title>

    </head>

    <body>

        <div style="width: 800px;height: 200px;margin: 300px;">

            <div style="width: 200px;height: 200px;float: left;line-height: 2em;">

                <img src="img/pic_1.jpg"/>

                家用超大式儿童洗澡桶

                <p>￥44</p>

            </div>

            <div style="width: 200px;height: 200px;float: left;line-height: 2em;">

                <img src="img/pic_3.jpg"/>

                实木躺椅

                <p>￥4000</p>

            </div>

            <div style="width: 200px;height: 200px;float: left;line-height: 2em;">

                <img src="img/pic_4.jpg"/>

                高档收藏书法包装字画盒

                <p>￥10</p>

            </div>

            <div style="width: 200px;height: 200px;float: left;line-height: 2em;">

                <img src="img/pic_5.jpg"/>

                2018春夏新款百搭

                <p>￥208</p>

            </div>

        </div>

    </body>

</html>

结果：

Html学习之五（嵌套之简单购物界面设计）的更多相关文章

  1. 我的Android 4 学习系列之创建用户基本界面

    目录 使用视图和布局 理解Fragment 优化布局 创建分辨率无关的用户界面 扩展.分组.创建和使用视图 使用适配器将数据绑定到视图 使用视图和布局 1. Android UI 几个基本概念 视图: ...

  2. day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui   本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...

  3. .Net程序员安卓学习之路1：登陆界面

    任何编程学习起步均是HelloWorld,作为稍有>net编程经验的我们来说就跳过这步吧,咱们且从简单登录界面开始.先看看效果: 一.准备知识: 1. 安卓环境:安装好JDK,直接去官网下载AD ...

  4. Linux第三周学习总结——构造一个简单的Linux系统MenuOS

    第三周学习总结--构造一个简单的Linux系统MenuOS 作者:刘浩晨 [原创作品转载请注明出处] <Linux内核分析>MOOC课程http://mooc.study.163.com/ ...

  5. Win32简单图形界面程序逆向

    Win32简单图形界面程序逆向 前言 为了了解与学习底层知识,从 汇编开始 -> C语言 -> C++ -> PE文件 ,直至今天的Win32 API,着实学的令我头皮发麻(笑哭). ...

  6. phpunit测试学习 1：一点简单的扼要有用的东西的总结 一点入门认识

    16:45 2015/12/8phpunit测试学习 1:一点简单的扼要有用的东西的总结  一点入门认识 具体的入门安装和入门实践请参照文中的推荐博客或网上其他博客推荐博客,我感觉这几篇博客写得很不错 ...

  7. Quartz定时任务学习（一）简单任务

    学习quartz首先了解三个概念: 调度器:负责调度作业和触发器: 触发器:设置作业执行的时间.参数.条件等:(简单触发器和Cron触发器) 作业:定时任务内容,被执行的程序: 下载必要的jar包,直 ...

  8. python_day2_homework_1（简单购物商城）

    '''简单购物商城(要求):1,商品展示,价格2,买,加入购物车3,付款,钱不够''' 1 #_*_ coding: utf-8 _*_ __author__ = 'A-rno' meu_list_1 ...

  9. C++学习之嵌套类和局部类

    C++学习之嵌套类和局部类 局部类 在一个函数体内定义的类称为局部类. 局部类中只能使用它的外围作用域中的对象和函数进行联系,因为外围作用域中的变量与该局部类的对象无关.在定义局部类时需要注意:局部类 ...

随机推荐

  1. Winclone 8 Mac增强汉化版 Windows分区备份迁移工具 8.0.1

    winclone 8 for Mac版是一款系统清理工具winclone的Mac平台版本,winclone Mac版可以将Bootcamp分区安装的windows进行克隆也可将克隆文件传回Bootca ...

  2. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

  3. （day67）作业

    有以下广告数据(实际数据命名可以略做调整) ad_data = { tv: [ {img: 'img/tv/001.png', title: 'tv1'}, {img: 'img/tv/002.png ...

  4. 设计模式-Decorator(结构型模式) 用于通过 组合 的方式 给定义的类 添加新的操作，这里不用 继承 的原因是 增加了系统的复杂性，继承使深度加深。

    以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //Decorator.h #pragma once class Component { public: virtual ~C ...

  5. SQL Server 移位运算符

    参考链接:http://dataeducation.com/bitmask-handling-part-4-left-shift-and-right-shift/ SQL Server 官网的连接:h ...

  6. 【转】SQL中GROUP BY语句与HAVING语句的使用

    一.GROUP BY GROUP BY语句用来与聚合函数(aggregate functions such as COUNT, SUM, AVG, MIN, or MAX.)联合使用来得到一个或多个列 ...

  7. 《Spring Cloud微服务 入门 实战与进阶》

    很少在周末发文,还是由于昨晚刚收到实体书,还是耐不住性子马上发文了. 一年前,耗时半年多的时间,写出了我的第一本书<Spring Cloud微服务-全栈技术与案例解析>. 时至今日,一年的 ...

  8. electron窗口间通信

    以下代码均来自于我开发的开源软件:想学吗 窗口A的渲染进程发消息给主进程 const { clipboard, ipcRenderer, remote } = require('electron'); ...

  9. jTessBoxEditor训练识别库

    1.背景 前文已经简要介绍tesseract ocr引擎的安装及基本使用,其中提到使用-l eng参数来限定语言库,可以提高识别准确率及识别效率. 本文将针对某个网站的验证码进行样本训练,形成自己的语 ...

  10. IT兄弟连 Java语法教程 数组 多维数组 二维数组的初始化

    二维数组的初始化与一位数组初始化类似,同样可以使用静态初始化或动态初始化. 1)静态初始化 静态初始化的格式如下: 数组名字 = new 数组元素的类型[][]{new 数组元素的类型[]{元素1,元 ...