实现效果图：

看上去是不是很屌的样子？其实实现起来主要就是用到了一个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. September 17th 2017 Week 38th Sunday

    Distance could make you forget about them, but the memories would always be there. 距离会让你遗忘,但是回忆却始终在那 ...

  2. Uva821 Page Hopping (Floyd)

    题目大意: 最近的研究表明,互联网上任何一个网页在平均情况下最多只需要单击19次就能到达任 意一个其他网页.如果把网页看成一个有向图中的结点,则该图中任意两点间最短距离的平 均值为19. 输入一个n( ...

  3. mysql大数据量使用limit分页，随着页码的增大，查询效率越低下

    1.   直接用limit start, count分页语句, 也是我程序中用的方法: select * from product limit start, count当起始页较小时,查询没有性能问题 ...

  4. linux中Vi编辑器使用

    1.如需要编辑aaa.txt文件: vi  aaa.txt   就可以进入到   aaa.txt文件中, 输入  i   进入到编辑模式, 按 Esc 退出编辑模式  , :wq   保存退出编辑模式 ...

  5. redis-Sentinel配置

    Sentinel介绍 Redis的主从模式下,主节点一旦发生故障不能提供服务,需要人 工干预,将从节点晋升为主节点,同时还需要修改客户端配置. 对于很多应用场景这种方式无法接受. Redis从 2.8 ...

  6. 对于高并发短连接造成Cannot assign requested address解决方法

    https://www.cnblogs.com/dadonggg/p/8778318.html 感谢这篇文章给予的启发 在tcp四次挥手断开连接时,主动释放连接的一方最后会进入TIME_WAIT状态, ...

  7. node-webkit,nwjs 系统托盘【Tray】实践

    参照自:https://www.cnblogs.com/xuanhun/p/3678943.html Tray包含title.tooltip.icon.menu.alticon五个属性. title属 ...

  8. JDBC通过配置文件（properites）读取数据库配置信息

    扫盲: Classloader 类加载器,用来加载 Java 类到 Java 虚拟机中.与普通程序不同的是.Java程序(class文件)并不是本地的可执行程序.当运行Java程序时,首先运行JVM( ...

  9. 如何使用eclipse运行简单的java程序

    打开eclipse,选择“file——new——Java project”   为我们的java项目取一个名字,然后点击完成.   这时候左侧列表就有了我们刚才新建的java项目,点开项目,在src目 ...

  10. CATransform3D 使用

    struct CATransform3D { CGFloat m11(x轴缩放), m12(y轴切变), m13, m14(x轴拉伸); CGFloat m21(x轴切变), m22(y轴缩编), m ...