田字格布局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 ...
随机推荐
- Virtual IP address
https://en.wikipedia.org/wiki/Virtual_IP_address Virtual IP address From Wikipedia, the free encyclo ...
- grails Domian对象转JSON去class以及自己定义字段的最佳方式
grails:2.4.x IDE:Intellij IDEA 13.x grails的Domain对象之间假设存在环形引用.直接使用as JSON仅仅会输出关联对象的id.而且假设使用deep也会报错 ...
- mongodb09----replicattion set--健壮性
replication set复制集 replicattion set 多台服务器维护相同的数据副本,提高服务器的可用性.一台是服务器出问题了另外2台还可以接收干,secondary平时保持只读状态, ...
- YTU 2864: 分跑道。
2864: 分跑道. 时间限制: 1 Sec 内存限制: 128 MB 提交: 23 解决: 19 题目描述 有N个人参加100米短跑比赛.跑道为8条.程序的任务是按照尽量使每组的人数相差最少的原 ...
- YTU 2838: 改错题AB-装置连接
2838: 改错题AB-装置连接 时间限制: 1 Sec 内存限制: 128 MB 提交: 81 解决: 49 题目描述 注:本题只需要提交标记为修改部分之间的代码,请按照C++方式提交. 有AB ...
- YTU 2801: 用数字造数字(II)
2801: 用数字造数字(II) 时间限制: 1 Sec 内存限制: 128 MB 提交: 244 解决: 168 题目描述 输入一个3位以上的整数,求其中最大的两个数字之和与最小的数字之和之间的 ...
- YTU 1098: The 3n + 1 problem
1098: The 3n + 1 problem 时间限制: 1 Sec 内存限制: 64 MB 提交: 368 解决: 148 题目描述 Consider the following algor ...
- 删除oracle数据库用户的dba权限（当出现同一用户DBA可以登录，normal不能登录）“无法对SYS拥有的对象创建触发器”
系统报错:“无法对SYS拥有的对象创建触发器”,搞不懂是什么原因了,到底这触发器要用什么用户才能建立啊? ORA-04089: 无法对 SYS 拥有的对象创建触发器 第一种方式: 首先,用sys用户a ...
- WdatePicker.js的使用方法(转)
WdatePicker.js的使用方法 博客分类: 其他 1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨 ...
- 并不对劲的Loj6031:「雅礼集训 2017 Day1」字符串
题目传送门:-> 看到题目的第一反应当然是暴力:对于串s建后缀自动机,每次询问中,求w对应的子串在s的SAM中的right集合.O(qmk)听上去显然过不了. 数据范围有个∑w<=1e5, ...