实现效果图：

看上去是不是很屌的样子？其实实现起来主要就是用到了一个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. linux 创建新用户并增加管理员权限

    1.adduser与useradd有什么区别?2.那种方式会自动创建组.用户组等信息? 3.如何新建用户具有管理员权限? $是普通管员,#是系统管理员,root用户默认是没有密码的,因此也就无法使用( ...

  2. hibernate设置了not-null 为什么无效？

    因为设错地方了! 错误--写在了property标签里 <property name="password" type="string" length=&q ...

  3. 18年11月5日 NOIP模拟赛

    T1 题解 对于k=100的情况,贪心 对于100%的数据 可以发现,当前的决策只对后面的开采有影响,且剩余耐久度与之后的开采收益成正比,如果倒着考虑这个问题,得出i-n的星球1点耐久度所能获得的最大 ...

  4. php添加mongo模块

    可以从 http://pecl.php.net/package/mongo 下载目前的stable稳定版 我添加的是mongo-1.5.2.tgz # wget http://pecl.php.net ...

  5. python队列

    先入先出队列: import queue q = queue.Queue(10) # 10为队列长度 for i in range(5): q.put(i, block=False) # block= ...

  6. ui-sref

    angularjs中路由跳转可以在模板页面上使用ui-sref="a-state({param1: value})"; 如果想为当前state的导航按钮添加一个激活class,可以 ...

  7. python第二十一课——str中的常用函数（重要）

    演示str中常用的一些函数: 1.join():将容器对象以某种特定的格式(字符串)进行拼接组合,最后以字符串的形式返回 lt=['i','love','you','very','much'] str ...

  8. swift内存管理：值类型与引用类型

    Use struct to create a structure. Structures support many of the same behaviors as classes, includin ...

  9. 切换composer国内镜像

    composer config -g repo.packagist composer https://packagist.phpcomposer.com

  10. PHP MemCached高级缓存配置图文教程

    memcache是一个高性能的分布式的内存对象缓存系统,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等.     1.Memcache相关介绍 memcache是一个高性能的 ...