<!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. SSH三大框架整合配置详细步骤(3)

    5 配置Spring2.5 5.1 基础配置 1)        导入spring包.下载spring-framework-2.5.6并解压后,在spring-framework-2.5.6" ...

  2. Flame Graphs

    http://www.brendangregg.com/flamegraphs.html Flame graphs are a visualization of profiled software, ...

  3. sqlserver主机名变更后的错误与处理办法

    sqlserver 服务器更改主机名后,须要做一些操作.不然维护计划 以及订阅公布都会有问题,详细过程例如以下:能够參考 有时改动计算机名后,运行select @@servername仍返回原来的计算 ...

  4. CentOS 7.2更改网卡名称

    背景 没啥背景,就是VMWare装的CentOS虚拟机的自带网卡名有点乱,想重新定义一下. 环境 1.VMWare虚拟机 6张网卡 2.系统 [root@localhost ~]# cat /etc/ ...

  5. javascript 二级联动

    <html> <head> <title></title> <meta http-equiv="Content-Type" c ...

  6. BZOJ_2118_墨墨的等式_最短路

    BZOJ_2118_墨墨的等式_最短路 Description 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及 ...

  7. 洛谷 P1071 潜伏者 —— 模拟

    题目:https://www.luogu.org/problemnew/show/P1071 按题意模拟即可. 代码如下: #include<iostream> #include<c ...

  8. appium学习【三】:截图时,图片命令中包含当前的函数名,以区分错误是在哪个函数报的

    import sys funcName = sys._getframe().f_back.f_code.co_name #获取调用函数名 print sys._getframe().f_code.co ...

  9. jsp 中href链接有前缀

    在jsp页面中,如果有一个链接写为:“href="www.hqvolunteer.org"”(链接到的是外网),这样发布项目了后,把鼠标移到上面显示的是:你的项目路径/www.hq ...

  10. Python Import机制备忘-模块搜索路径(sys.path)、嵌套Import、package Import

    出处:http://blog.csdn.net/kernelspirit/article/details/3381666 最近在看<Python源码剖析>,对Python内部运行机制比以前 ...