<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style>

 .body{ margin:100px 100px 0 100px; width:300px; height:300px; overflow:hidden;}

 .div{ float:left; width:100px; height:100px; border:1px solid #000; border-right:0 none; margin-left:-2px; margin-top:-2px; border-bottom:0;}

 </style>

 </head>

 <body>

 <div class="body">

 <div class="div"></div>

 <div class="div"></div>

 <div class="div"></div>

 <div class="div"></div>

 <div class="div"></div>

 <div class="div"></div>

 <div class="div"></div>

 <div class="div"></div>

 <div class="div"></div>

 </div>

 </body>

 </html>

效果图：

html/css 浮动练习之井字形布局的更多相关文章

  1. CSS浮动布局与菜单栏设计

    公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...

  2. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

  3. Css - 浮动布局

    Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...

  4. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  5. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  6. CSS浮动专题!

    在css中,浮动问题可能是很多刚入门的小白比较头疼的问题. 1,首先先来介绍一下两种浮动类型:左浮动和右浮动 1) float:left;左浮动,后面的内容会流向对象的右侧 2) float:righ ...

  7. css浮动与清除浮动

    css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...

  8. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  9. CSS 浮动和清除

    CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...

随机推荐

  1. [已解决] github merge指定commit

    比如说有两个branch,分别是master和m1,我们在m1上修改的bug怎么merge到master上呢, 怎么merge我不知道,但是有另外一个命令可以做到,比如m1做commit,sha-1为 ...

  2. fenxi

    线路:通过定义而来(固定线路可以定义,随机和临时线路怎么来) 订单:线路上点对点的关系 装车单:同意线路上的车辆可以有多个订单组成的装车单 车辆任务:给调度接口输入车辆和订单集合,根据订单产生多个车的 ...

  3. tinkphp验证码的使用

    页面显示验证码: <div class="input-group has-feedback "> <input id="yzm" type=& ...

  4. 【Normal Form】数据库表结构设计所遵从的范式

    参考的优秀文章 数据库(第一范式,第二范式,第三范式) 数据库设计是件严肃.关键的事儿,一毕业,加入一个大型的行业项目,那儿的前辈资深工程师,就给我灌输数据库如何关键.神圣.深不可测的观念,所以,我一 ...

  5. AfxBeginThread中使用updatedata出错

    原因:MFC对象不支持多线程操作,不能供多个线程进程使用,所以尽量不要在线程里面更新界面. 解决办法: 1.将工程改为release 2.使用控件来SetWindowText 3.在线程里面发送消息 ...

  6. linux screen 命令详解

    一.背景 系统管理员经常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,比如系统备份.ftp 传输等等.通常情况下我们都是为每一个这样的任务开一个远 ...

  7. Fragment碎片

    布局文件中添加碎片 1.在onCteate()方法中调用inflater.inflate()加载Fragment布局 2.在xml的<fragment>中需要显示指明碎片名称(androi ...

  8. JavaScript parseInt() 函数

    定义和用法 parseInt() 函数可解析一个字符串,并返回一个整数. 语法 parseInt(string, radix) 参数 描述 string 必需.要被解析的字符串. radix 可选.表 ...

  9. Dom中的继承关系

    首先声明,一些内容基于个人猜测,如果哪里有错误,请立即联系在下! 我们用js操作Dom时,会经常用到一些个方法比如基于获取到的元素选择其子元素: <!DOCTYPE html> <h ...

  10. Xcode6 ADD Copy Files Build Phase 是灰色的

    在学习的怎样写frameWork的时候,查看一个教程How to Create a Framework for iOS  [一个中文翻译 创建自己的framework] 其中一个步骤就是添加一个Cop ...