<!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. 【bzoj1965】[Ahoi2005]SHUFFLE 洗牌

    x*2^m==l (mod n+1)x=(n/2+1)^m*l mod n+1 #include<algorithm> #include<iostream> #include& ...

  2. 可以声明接口,但不可以new接口

    接口是一种特殊的抽象类,它包含常量和方法的声明,但没有方法的实现:可以把接口看成是一种特殊的抽象类: 接口实质上是一种规范,它关心的是"做什么",不关心"怎样做" ...

  3. Tomcat 安装错误

    安装tomcat时,遇到"failed to install tomcat6 service check your settings and permissions"的问题 安装时 ...

  4. grails Domian对象转JSON去class以及自己定义字段的最佳方式

    grails:2.4.x IDE:Intellij IDEA 13.x grails的Domain对象之间假设存在环形引用.直接使用as JSON仅仅会输出关联对象的id.而且假设使用deep也会报错 ...

  5. Lightoj 1017 - Brush (III)

    1017 - Brush (III)    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Sam ...

  6. YTU 2579: 填空题----删除指定字符

    2579: 填空题----删除指定字符 时间限制: 1 Sec  内存限制: 128 MB 提交: 164  解决: 61 题目描述 小明想要做个小程序,能够删除字符串中特定的字符. 例如:想要在下面 ...

  7. YTU 1004: 1、2、3、4、5...

    1004: 1.2.3.4.5... 时间限制: 1000 Sec  内存限制: 64 MB 提交: 1275  解决: 343 题目描述 浙江工商大学校园里绿树成荫,环境非常舒适,因此也引来一批动物 ...

  8. FMDB数据库队列

    一.代码示例 1.需要先导入FMDB框架和头文件,由于该框架依赖于libsqlite库,所以还应该导入该库. 2.代码如下: 1 // 2 // YYViewController.m 3 // 05- ...

  9. 适用于PHP初学者的学习线路和建议

    [导读] 这篇文章是围绕PHP的学习问题,之前介绍过<重磅资料!Github上的PHP资源汇总大全><深入探讨PHP类的封装与继承><PHP的学习规划建议>等对PH ...

  10. bzoj 2115: [Wc2011] Xor【线性基+dfs】

    -老是想到最长路上 其实可以这样:把每个环的xor和都存起来,然后任选一条1到n的路径的xor和ans,答案就是这个ans在环的线性基上跑贪心. 为什么是对的--因为可以重边而且是无相连通的,并且对于 ...