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边框即可显示出来了。您可以根据您的需求,对边框做其他操作。