<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>田字格布局</title>
<style>
#prat1{
width: 200px;
height: 200px;
background: #CDAD00;
float: left;
}
#prat2{
width: 200px;
height: 200px;
background: #CD6839;
float: left;
}
#prat3{
width: 200px;
height: 200px;
background: #CD6090;
float: left;
clear: left;
}
#prat4{
width: 200px;
height: 200px;
background: #CD3333;
float: left;
}
</style>
</head>
<body>
<div id="prat1">块1</div>
<div id="prat2">块2</div>
<div id="prat3">块3</div>
<div id="prat4">块4</div>
</body>
</html>

块1
块2
块3
块4

田字格布局html div的更多相关文章

  1. css田字格布局

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  2. 常用布局,div竖直居中

    常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...

  3. CSS布局:div高度随窗口变化而变化(BUG会有滚动条)

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

  4. 浅谈分析表格布局与Div+CSS布局的区别

    (1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表 ...

  5. 2017-12-04HTML布局_div布局

    HTML布局_div布局 <!doctpye> <html> <head> <meta charset = 'utf-8'> <title> ...

  6. HTML 布局 - 使用<div> 元素

    网站布局 大多数网站会把内容安排到多个列中(就像杂志或报纸那样).高佣联盟 www.cgewang.com 大多数网站可以使用 <div> 或者 <table> 元素来创建多列 ...

  7. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  8. [转]CSS网页布局:div水平居中的各种方法

    http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...

  9. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

随机推荐

  1. C项目实践--俄罗斯方块(1)

    俄罗斯方块游戏是由前苏联科学院计算机中心的工程师阿列克谢.帕基特诺夫发明的一款小游戏. 1.功能需求分析 1.1主要功能 实现三个功能:1.游戏欢迎界面:2.游戏执行功能,包括计算得分:3.游戏结束界 ...

  2. 加载之ready和onload

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 真不知道这个标题该怎么取,暂时就先凑 ...

  3. log4j_自定义样式参数意义

    #自定义样式 %c 输出所属的类目,通常就是所在类的全名 %C 输出Logger所在类的名称,通常就是所在类的全名 %d 输出日志时间点的日期或时间,默认格式为ISO8601,也可以在其后指定格式,比 ...

  4. next数组求最小循环节

    1.kmp产生的next数组: 最小循环节(长度)=len-next[len]; 证明: ----------------------- ----------------------- k    m ...

  5. Ruby: 获取IE的一些信息(其实应用AutoIt脚本本身,获取这些信息更加简单)

    require'win32/registry' hkey_local_machine=Win32::Registry::HKEY_LOCAL_MACHINE defgetKeyValue(hive, ...

  6. Properties 文件的简单操作

    properties 文件里面主要 存 一个Key对应一个Value  一般用来存放账户密码资料 方法有:Properties p=new  Properties(); p.setproperty(& ...

  7. spring/spring boot/spring cloud书籍推荐

    最近看了一些spring书籍,主要都是工作需要,实话说,没有必要买这么多书,每个主题一本就足够了,其他的补充可以通过项目实战和上网看官网或者博客补充. 说是推荐,其实只是一些简单读后感想而已,每本书都 ...

  8. ROS学习笔记五:创建和使用ROS msg和srv

    1 msg和srv简介 1.1 msg文件 msg文件就是一个简单的text文件,其中每行有一个类型和名称,可用的类型如下: int8, int16, int32, int64 (plus uint* ...

  9. ACM配置指南

    Ubuntu桌面入门指南 ACM比赛系统ubuntu 使用指南 ACM核武器 简明 Vim 练级攻略 Vim命令合集 代码编辑神器VIM(附我写acm程序时的配置) my_vimrc in ubunt ...

  10. 贪心/思维题 Codeforces Round #310 (Div. 2) C. Case of Matryoshkas

    题目传送门 /* 题意:套娃娃,可以套一个单独的娃娃,或者把最后面的娃娃取出,最后使得0-1-2-...-(n-1),问最少要几步 贪心/思维题:娃娃的状态:取出+套上(2),套上(1), 已套上(0 ...