田字格布局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 ...
随机推荐
- C 编程中fseek、ftell的用法总结
fseek 函数功能是将文件指针移动到指定的地方,因此可以通过fseek重置文件指针的位置.函数原型: int fseek(FILE *stream, long offset, int origi ...
- Semantic Parsing（语义分析） Knowledge base（知识图谱） 对用户的问题进行语义理解 信息检索方法
简单说一下所谓Knowledge base(知识图谱)有两条路走,一条是对用户的问题进行语义理解,一般用Semantic Parsing(语义分析),语义分析有很多种,比如有用CCG.DCS,也有用机 ...
- 搭建基于Maven的SSM框架
先展示文件结构图对工程结构有大致了解: 主要为 ssm-parent (用来管理jar包版本)是每个工程的父工程,ssm-common(用来处理底层数据),ssm-manager(对数据库信息进行操 ...
- git pull ，git fetch ，git merge
git pull 是git fetch与git merge的组合. 有时候拆开使用,会更加的安全. 比如想比较,本地分支,与线上分支的差别,就可以先 git fetch 这样就可以,git diff ...
- 并不对劲的bzoj4651:loj2084:uoj220:p1173:[NOI2016]网格
题目大意 有一个\(n*m\)(\(n,m\leq10^9\))的网格,每个格子是空地或障碍(\(障碍数\leq10^5\)) 定义两块空地连通,当且仅当它们是"相邻的两块空地"或 ...
- [noip模拟赛]小U的女装
https://www.zybuluo.com/ysner/note/1329304 题面 有一张\(n\)点\(m\)边的.不一定联通的无向图. 如果选了一条边,就不能选其两个端点. 现在同时选点和 ...
- CentOS 6 网络设置修改 指定IP地址 DNS 网关
环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Centos-6.5-x86_64 路由器网关:192.168.1.1 步骤: 1.查看网络MAC地址 [ro ...
- Swift4 模式, 枚举型
创建: 2018/03/05 完成: 2018/03/05 更新: 2018/03/10 改变标题 [Swift4 模式] -> [Swift4 模式, 枚举型] 补充RawRepresenta ...
- Ruby Numeric类
Numeric类 Numeric ---------> Integer ---------> Fixnum ...
- 爬虫—Selenium爬取JD商品信息
一,抓取分析 本次目标是爬取京东商品信息,包括商品的图片,名称,价格,评价人数,店铺名称.抓取入口就是京东的搜索页面,这个链接可以通过直接构造参数访问https://search.jd.com/Sea ...