田字格布局html div
<!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>
田字格布局html div的更多相关文章
- css田字格布局
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 常用布局，div竖直居中
常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...
- CSS布局：div高度随窗口变化而变化(BUG会有滚动条)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 浅谈分析表格布局与Div+CSS布局的区别
(1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表 ...
- 2017-12-04HTML布局＿div布局
HTML布局＿div布局 <!doctpye> <html> <head> <meta charset = 'utf-8'> <title> ...
- HTML 布局 - 使用<div> 元素
网站布局 大多数网站会把内容安排到多个列中(就像杂志或报纸那样).高佣联盟 www.cgewang.com 大多数网站可以使用 <div> 或者 <table> 元素来创建多列 ...
- CSS布局之div交叉排布与底部对齐--flex实现
最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...
- [转]CSS网页布局：div水平居中的各种方法
http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...
- 【html】【8】div布局[子div在父div居底]
从今天起 开始细话div布局 思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...
随机推荐
- Hibernate中二级缓存指的是什么？
一.一级缓存.二级缓存的概念解释 (1)一级缓存就是Session级别的缓存,一个Session做了一个查询操作,它会把这个操作的结果放在一级缓存中,如果短时间内这个 session(一定要同一个se ...
- 返回模式有流式(streaming)和整体(total) 热词词表解决方案
重要术语说明_语音识别(ASR)_智能语音交互-阿里云 https://help.aliyun.com/document_detail/72238.html 返回模式(response mode) ...
- js常用操作事件
触发描述 方法 用法 点击 onclick="method();" 变换 onchange="testChange();" 双击 ondblclick= ...
- Lightoj 1029 - Civil and Evil Engineer
1029 - Civil and Evil Engineer PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limi ...
- HDU1114 Piggy-Bank —— DP 完全背包
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1114 Piggy-Bank Time Limit: 2000/1000 MS (Java/ ...
- 吃CPU的openmp 程序
g++ -o eat -fopenmp eat.cpp #include "stdio.h" int main(int argc, char *argv[]) { #pragma ...
- 配置磁盘映射（在服务器和eclipse 中）
在eclipse中配置磁盘映射和项目名称访问省略:
- Ural2102：Michael and Cryptography(数论&素数)
The hacker Michael develops breakthrough password manager, which is called KEK (Keeper of Encrypted ...
- linux内存管理之全局框架
讲解复杂繁琐的机制原理,最通俗的方法就是用模型架构的方式向读者呈现,先要在整体上了解大方向大架构,再根据大方向大架构来进行分支深入,犹如毛主席那句话“战略上蔑视敌人,战术上重视敌人”.下面我也以这种方 ...
- 超强XSS攻击利器
======================================================================= BackTrack 5 R1 XSS研究之XSSer(超 ...