做一个有顶，有左侧网页，有右侧网页的框架集网页应该怎么做？
先把各个小的分散页面做好
all2.html
top.html
left.html
right1.html
right2.html
来看每个文件的具体代码：
all2.html
<!--这里开始是整体框架结构，为上下结构-->
<frameset rows="20%,*"
frameborder=0>
<frame src="top.html" noresize scrolling=no
/>
<!--这里开始是另外一个框架集结构为左右结构-->
<frameset cols="20%,*">
<frame src="left.html" noresize
/>
<!--frame元素中有一个name属性，相当于给frame取名，以方便识别位置-->
<frame src="right1.html" name="right"
/>
</frameset>
</frameset>
top.html
这里是顶部内容
left.html
<a href="right1.html"
target="right">青花瓷1</a><br
/>
<a
href="right2.html"
target="right">青花瓷2</a><br
/>
right1.html
这里是right1.html的内容
right2.html
这里是right2.html的内容
田字格布局，要求大小相同的四个正方形。而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/htmlcharset=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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）