JavaWeb_HTML(20)_HTML框架集

版权声明:如需转载,请注明出处 https://blog.csdn.net/qq_36260974/article/details/88371973

HTML框架集

  • body 和框架集标签不同时使用。

框架集标签:frameset

属性:

  • rows:行分割
  • cols:列分割

子标签 frame

属性 :

  • src
    指定要嵌入的页面
  • noresize="noresize"
    可以阻止border拖拽 。
  • name
    用于指定展示的内容所在的 frame。

示例代码:

<html>
	
	<head>
		<title>www.weiyuxuan.com</title>		
	</head>
	
	<frameset rows="20%,20%,*">
		
		<frame src=""></frame><!--占20%-->
		<frame src=""></frame><!--占20%-->
		<frame src=""></frame><!--占剩下的-->
		
	</frameset>
	
</html>

结果图:
在这里插入图片描述

在这里插入图片描述

框架设计

示例代码:
在这里插入图片描述
index:

<html>
	
	<head>
		<title>www.weiyuuxan.com</title>		
	</head>
	
	<frameset rows="20%,*">
		
		<frame src="top.html">
		
		</frame>
		
		
		<frameset cols="20%,*" >
			
			<frame src="left.html" noresize>
			
			</frame>
				
			<frame src="main.html" name="main">
			
			</frame>
				
		</frameset>	
		
	</frameset>
	
</html>

main:

<html>
	
	<head>
		<title>www.weiyuuxan.com</title>		
	</head>
	
	<body>
		<a href="1.jpg" target="_blank">
			图片一
		</a>
		<br/>		
		<a href="1.jpg" target="main">
			图片二
		</a>	
	</body>
	
</html>

left:

<html>
	
	<head>
		<title>www.weiyuuxan.com</title>		
	</head>
	
	<body>
		主区域	
	</body>
	
</html>

top:

<html>
	
	<head>
		<title>www.weiyuxuan.com</title>		
	</head>
	
	<body>
		顶部区域
	</body>
	
</html>

结果图(打开index.html):
在这里插入图片描述
如有错误,欢迎指正!

猜你喜欢

转载自blog.csdn.net/qq_36260974/article/details/88371973
今日推荐