实现效果图：

看上去是不是很屌的样子？其实实现起来主要就是用到了一个float，不难。

实现步骤：
1、新建一个大div，300*3000
2、里面放5个小div，100*100
3、将div定位

CSS快速入门-定位布局(九宫格)的更多相关文章

  1. CSS快速入门-定位(position)

    一.概述 CSS 定位 (Positioning) 属性允许你对元素进行定位. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的 ...

  2. CSS快速入门-前端布局1(抽屉）

    一.效果图 前面对CSS基础知识有了一定的了解,是时候开始实战了!以下我对抽屉(https://dig.chouti.com/)主页进行模拟布局. 官方网站效果图: 模拟网站图: 二.实现步骤 1.整 ...

  3. CSS快速入门-前端布局2(唯品会1)

    上一篇我模仿了抽屉网站,这一节我来对唯品会主页进行模仿. 我觉得写一个主页大概思路如下: 1.确定整体布局方式:(html框架布局) 2.针对每一块进行细化,尽量做到模块化.(css) 3.加上特效效 ...

  4. CSS快速入门-后端布局

    一.后台框架概述 我们在网上随便搜索后台框架,你会发现大部分都查不多.正所谓:好看的皮囊千篇一律,有趣的灵魂万里挑一. 第一个是H-ui,H-ui.admin是用H-ui前端框架开发的轻量级网站后台模 ...

  5. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  6. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  7. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

  8. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  9. Html与CSS快速入门04-进阶应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...

随机推荐

  1. 安装oracle 11g时，报启动服务出现错误，找不到OracleMTSRecoveryService的解决方法

    很多人在安装orcl数据库时,出现很多报错,我也不例外,因上次数据库出现问题,无法修复,只能从新安装,无奈的是,安装时报启动服务出现错误,找不到OracleMTSRecoveryService错MMP ...

  2. GitBlit集成AD域LDAP

    GitBlit的配置文件: gitlblit安装目录下的 /data/gitblit.properties   ,用记事本或其他编译器打开即可. 集成AD域的LDAP操作步骤 打开配置文件,添加以下内 ...

  3. 铁乐学python_md5校验两个文件的一致性

    # 写一个函数,参数是两个文件的路径 # 返回的结果是T/F # 判断两个文件的md5值是否相同 import hashlib def diff_md5(file1,file2): def chick ...

  4. vs2012配置

    ogre1.9 http://m.blog.csdn.net/blog/u013025310/20869871 http://www.cnblogs.com/zhouxin/p/4258849.htm ...

  5. Ubuntu下安装指定版本的mysql

    1.编辑/etc/apt/sources.list和/etc/apt/sources.list.save, 手动加上deb http://archive.ubuntu.com/ubuntu trust ...

  6. September 28th 2017 Week 39th Thursday

    Every saint has a past and every sinner has a future. 圣人皆有过去,罪人皆有未来. If you were a sinner in the pas ...

  7. Alpha 冲刺报告

    Alpha 冲刺报告(4/10) 队名:洛基小队 峻雄(组长) 已完成:继续行动脚本的编写 明日计划:尽量完成角色的移动 剩余任务:物品背包交互代码 困难:具体编码进展比较缓慢 ----------- ...

  8. PHP Redis 全部操作方法 转载

    PHP Redis 全部操作方法   Classes and methods Usage Class Redis Class RedisException Predefined constants C ...

  9. Echarts 多曲线“断点”问题解决方法

    Echarts 用来做可视化曲线是非常优秀的一个库.建议使用 Echarts 作为项目的可视化图标库时,仔细研究 官方实例,根据需求来选择类似的示例,下载实例模板来开发,节省时间,减少出错,提高效率. ...

  10. 操作系统的三个接口 shell gui api

    操作系统的三个接口 shell gui api 编程语言是用来告诉操作系统干什么的语言. 编程语言是人机交互语言. 程序.进程:任务集.