实现效果图：

看上去是不是很屌的样子？其实实现起来主要就是用到了一个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. Allure 安装及使用

    linux下安装方法 Allure requires Java 8 or higher    npm install -g allure-commandline --save-dev (如果npm不能 ...

  2. UNIX高级环境编程（1）File I/O

    引言: Unix系统中主要的文件操作包括: open read write lseek close unbuffered IO和standard I/O相对应,后面的章节我们会讨论这两者的区别. 在讨 ...

  3. matlab操作(整理)

    http://blog.csdn.net/ysuncn/article/details/1741828 http://zhan.renren.com/h5/entry/3602888498000464 ...

  4. jiekou

    接口 新的接口 package cn.eangaie.jingdong.controller;   import cn.eangaie.jingdong.entity.Result; import c ...

  5. 关于markdown格式的测试..

    标题 标题一 这是? 标题二 标题三 标题四 区块 1.这是一个列表项目 还是吗? 嵌套了? 空格了? 区块加列表 标题加二级列表 嘿嘿 无序列表 RED GREEN BLUE 有序列表 dog ca ...

  6. Fix for: Permission denied to access property 'toString'

    Originally posted by rwolffgang here. Hi guys,when developing a game that runs in an iframe (Faceboo ...

  7. Java进阶 -- 文章汇总

    文章汇总 Java集合源码 -- Collection框架概述 Java集合源码 -- Map映射和Set集合 Java集合源码 -- List列表 String和StringBuffer 内部类 j ...

  8. HBase学习之路 （十一）HBase的协过滤器

    协处理器—Coprocessor 1. 起源 Hbase 作为列族数据库最经常被人诟病的特性包括:无法轻易建立“二级索引”,难以执 行求和.计数.排序等操作.比如,在旧版本的(<0.92)Hba ...

  9. Odoo发送短信

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9281581.html 一:阿里云短信服务注册 1:开通短信业务:实名认证的个人用户是免费开通:企业用户需要提供 ...

  10. Apache HttpComponents中的cookie匹配策略

    Apache HttpComponents中的cookie匹配策略 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre. ...