在HTML开发中如何利用DIV实现这样的布局?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在HTML开发中如何利用DIV实现这样的布局?相关的知识,希望对你有一定的参考价值。
田字格布局,要求大小相同的四个正方形。而html里div如果不加控制的话是独占一行的,现在要做的是把四个大小相同的方块,排列成“田”字。第一步、新建html文档并搭建框架
新建一个TXT文档,重命名为“田子格布局.html”,然后用记事本打开,输入表头信息,已经html整体框架搭建。包括head与body。
第二步、DIV布局
分别复制4个不同的div作为4部分,并且分别命名为不同id;显示内容为块1、块2、块3、块4。
【提示】div在html里是单独占一列的(如果不控制),现在4个div布局完成。
【代码如下】
</head>
<body>
<div id="prat1">块1</div>
<div id="prat2">块2</div>
<div id="prat3">块3</div>
<div id="prat4">块4</div>
</body>
</html>
第三步、CSS控制4个DIV显示
输入style然后开始对4个div进行控制,分别对四个块进行大小和颜色的设定,处理之后在浏览器中打开显示如下图所示。
【提示】由于是田子格,所以四个div大小应该相同,为了可以区分颜色分别采用不同的颜色。
【代码如下】
<style>
#prat1
width: 200px;
height: 200px;
background: blue;/*边长200像素的蓝色方块*/
#prat2
width: 200px;
height: 200px;
background: red;/*边长200像素的蓝色方块*/
#prat3
width: 200px;
height: 200px;
background: yellow;/*边长200像素的蓝色方块*/
#prat4
width: 200px;
height: 200px;
background: green;/*边长200像素的蓝色方块*/
</style>
第四步、使用浮动
在CSS里控制输入float:left;四个div全部输入一样内容,这时候看到的是四个并排的div,而没有达到想要的效果,如下图所示。
【代码如下】
<style>
#prat1
width: 200px;
height: 200px;
background: blue;
float: left;
#prat2
width: 200px;
height: 200px;
background: red;
float: left;
#prat3
width: 200px;
height: 200px;
background: yellow;
float: left;
#prat4
width: 200px;
height: 200px;
background: green;
float: left;
</style>
第五步、清除浮动
在第三块上使用清除浮动clear:left;其余的代码保持不变,然后保存代码,刷新打开的页面,就会看到一个田字格了,如下图所示。
【代码如下】
#prat3
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
【注意】只清除第三块的就可以了。
【完整的代码】
<!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=UTF-8">
<title>田字格布局</title>
<style>
#prat1
width: 200px;
height: 200px;
background: blue;
float: left;
#prat2
width: 200px;
height: 200px;
background: red;
float: left;
#prat3
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
#prat4
width: 200px;
height: 200px;
background: green;
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> 参考技术A 中间红色那个DIV定义它的position,然后利用margin定位!! 参考技术B 下面三个你自己知道吧 最后一个 可以用绝对定位 然后调Top 或者直接调margin-top为负数
如何让div滚动时页面不跟着滚动?
参考技术A滚动条是容器所固有的,不管是外面的滚动条,还是里面的滚动条,只要让固定的div和body或者html容器脱离关系,即可实现DIV固定在页面而不随着滚动条随意滚动。
1.html,body,将默认出现的滚动条,完全地隐藏,这样不管什么内容都不会出现了。
2.virtual_body,写一个假的body,设置它的长宽为100%,这样利用可视的浏览器窗体显示所有的内容,并垂直允许出现滚动条。
3.fixed_div,用它进行绝对值进行定位,因为在这个容器下,该页面100%的被假冒body覆盖了,滚动条自然也显示不出来了。
4.<html><head> <title></title> <style type="text/css"> html,body overflow:hidden; margin:0px; width:100%; height:100%; .virtual_body width:100%; height:100%; overflow-y:scroll; overflow-x:auto; 。
5.fixed_div position:absolute; z-index:2008; bottom:20px; left:40px; width:800px; height:40px; border:1px solid red; background:#e5e5e5 。
6.</style></head><body><div class="fixed_div">I am still here!</div><div class="virtual_body"> <div style="height:888px;"> I am content ! </div></div></body></html>。
以上是关于在HTML开发中如何利用DIV实现这样的布局?的主要内容,如果未能解决你的问题,请参考以下文章