<!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. 必备java参考资源列表

    现在开始正式介绍这些参考资源. Web 站点和开发人员 Web 门户 网络无疑改变了共享资源和出版的本质(对我也是一样:您正在网络上阅读这篇文章),因此,从每位 Java 开发人员都应该关注的关键 W ...

  2. File to byte[] in Java

    File to byte[] in Java - Stack Overflow https://stackoverflow.com/questions/858980/file-to-byte-in-j ...

  3. 借助ltp 逐步程序化实现规则库 文本生成引擎基于规则库和业务词库 去生成文本

    [哪个地方做什么的哪家靠谱?地名词库行业.业务词库]苏州做网络推广的公司哪家靠谱?苏州镭射机维修哪家最专业?昆山做账的公司哪家比较好广州称重灌装机生产厂家哪家口碑比较好 [含有专家知识]郑州律师哪个好 ...

  4. js常用操作事件

    触发描述 方法 用法 点击 onclick="method();"   变换 onchange="testChange();"   双击 ondblclick= ...

  5. Lightoj 1014 - Ifter Party

    I have an Ifter party at the 5th day of Ramadan for the contestants. For this reason I have invited  ...

  6. ubuntu12.04安装tftp,配置,修改目录,错误类型

    [前言]学习嵌入式,需要配置tftp服务,在网上搜了搜,很多,但是配置了,我的老是出现Error code 1: File not found错误,经过探索和一个大哥的博客http://blog.cs ...

  7. POJ3186 Treats for the Cows —— DP

    题目链接:http://poj.org/problem?id=3186 Treats for the Cows Time Limit: 1000MS   Memory Limit: 65536K To ...

  8. POJ1458 Common Subsequence —— DP 最长公共子序列(LCS)

    题目链接:http://poj.org/problem?id=1458 Common Subsequence Time Limit: 1000MS   Memory Limit: 10000K Tot ...

  9. regular expression 在线检测的网站

    http://regexone.com/   学习网站 http://regexone.com/lesson/optional_characters? http://regexone.com/less ...

  10. Java中去除字符串中的所有空格

    JAVA中去掉空格     1. String.trim()    trim()是去掉首尾空格         2.str.replace(" ", ""); ...