html用div做一个框架代码,div做网页框架
在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" ""
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
HTML 这个Div框框怎么弄？
div style="border:1px solid #999;padding:3px;"img src="图片路径"/div
这个就是用实线1像素宽的边框，padding 就是补白，做出来的效果就是里面的图片距离边框会有3像素的距离！！
急求，html中用div做一个框架图，每个区域都有不同颜色的
先在head标签里写几个CSS
style type="text/css"
.blue{ background-color:Blue; };
.yellow{ background-color:Yellow };
/style
还想要什么颜色自己再写就行了，然后哪个div里想要什么颜色，将div的class属性设成对应的CSS名称就行了。例如div class="blue"这个div背景就是蓝的，这样写方便以后再修改，不必修改每一个div，只需要修改style里定义的代码就行了
html怎么实现这样的框架 用css div
首先，您需要创建一个div,对div进行添加一个class。我们利用CSS通过class来设置div的边框。创建一个用于设置边框的CSS文件，对于您实际开发中，将边框添加到您的CSS文件中即可。在CSS文件中设置DIV的边框，首先我们可以先给div一个宽度与高度。得到了宽度与高度后，如果我们没有边框，是看不到样式的。如果您的div中有内容，那么只是显示那些内容而已。接下来，添加一个border边框我们将边框设置为1px.如果只是设置了宽度而没有设置颜色与具体的显示样式的话，边框并不会显示，您现在可以刷新一下您的页面看一下，添加了border:1px后是否显示，答案是肯定不显示的，因为我们参数没有写完整。参加第二个参数颜色值，具体的颜色您可以百度搜索具体的样式值的代码，您可以使用基本色直接使用单词拼写也是可以的。最后一个参数是显示样式，您可以选择不同的样式来进行显示，我们这里使用的是实线的方式来实现。如果您使用的是一些专门用来做前端开发的软件，您输入后，会有一些提示，您如果选择不同样式来试一试看。添加了上述的三个属性后，您的div边框即可显示出来了。您可以根据您的需求，对边框做其他操作。