框架集_在设置框架集中:cols属于-CSDN博客

本文链接：https://blog.csdn.net/weixin_44793200/article/details/89601003

本文介绍了HTML框架集的用途，如论坛、系统后台和个人中心等场景，以及如何通过cols和rows属性进行纵横向分割。重点讲解了frameset、frame的属性，如name和src，并阐述了frame内嵌frameset的规则。示例包括index.html、List.html等多个页面的使用。

摘要由CSDN通过智能技术生成

framer :不与bady共存所有有框架集的页面需要删除body标签

作用：目的是将多个页面组合在一起，一般页面上部分内容发生变更的时候使用居多

用处：论坛，系统后台，个人中心等

cols:纵向分割,纵向分几个块取决于clos中的值

rows:横向分割,横向分几个块取决于rows中的值

最后一个值可以用*号，表示前面的分完剩下的都是最后一块的

框架集分割出的元素一般用frame表示；分几块有几个frame

frame中的属性介绍：

name：框架的名称

src：引用的页面

如果框架集中的某个框架需要继续分割，那就将该frame替换为frameset，继续按照上面方式分割

框架格式

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <frameset rows="">
       <frame name="" src="" />
       <frameset cols="">
           <frame src="" />
           <frame name="" src=""/>
       </frameset>
   </frameset>
</html>

特点：

frameset 括号里rows与cols不能共存，但是rows与cols在frameset括号里他们只有选择一个使用，嵌套多个frame，frame 括号里rows与cols不能共存，但是rows与cols在frame括号里他们只有选择一个使用，frame嵌套多个frameset

1.创建framer页面是index.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <frameset rows="25%,*" border="1">
       <frame name="" src="head.html" />
       <frameset cols="30%,*">
           <frame src="list.html" />
           <frame name="content" src="welcome.html"/>
       </frameset>

<noframes>
       浏览器不支持frameset的时候，显示的内容
   </noframes>
   </frameset>
</html>

2.List.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>list</title>
	</head>
	<body>
		<h1>功能列表</h1>
		<ul>
			<li><h3><a href="poetry.html" target="content">古诗大全</a></h3></li>
			<li><h3><a href="prose.html"  target="content">欣赏散文</a></h3></li>
		</ul>
	</body>
</html>

3head.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title><head>
			<meta charset="utf-8"/>
			<title>框架</title>
			<style type="text/css">
				div{
					background: #00800040;
					    height: 200px
				}
				h1{
					color: white;
					line-height: 200px;
    				text-align: center;
				}
			</style>
	</head>
	<body>
		<div>
		<h1>欢迎进入文学框架的管理系统</h1>
		</div>
	</body>
</html>

4.welcome.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				margin: 20% auto;
				width: 30%;
				height: 220px;
				background: khaki;
				text-align: center;
			}
			
		</style>
	</head>
	<body>
	<div>
			<p>
		文学作品鉴赏不是纯粹的审美活动，它是以实现审美价值为主、包括实现其他价值在内的综合活动。
		“艺术具有一种二重特征；它既是一个摆脱经验现实及其社会效果联系而超乎其上的独立物，然而它同时又落入经验的现实中，
		落入社会的种种效果联系中。于是显示出这种审美现象，它是双重的，既是审美的，又是社会现象的。
		</p>
	</div>
	</body>
</html>

5.poetry.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>古诗词大全</title>
		<style type="text/css">
			div{
				margin: 0 auto;
				width: 30%;
				height: 220px;
				background: blanchedalmond;
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		<div>
		
				
			
					<h3>望岳</h3>
				<p>唐代：杜甫</p>
				<p>岱宗夫如何？齐鲁青未了。</p>
				<p>造化钟神秀，阴阳割昏晓。</p>
				<p>荡胸生曾云，决眦入归鸟。</p>
				<p>会当凌绝顶，一览众山小。</p>
		
		</div>
	</body>
</html>

6prose.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>欣赏散文</title>
		<style type="text/css">
			div{
				margin: 0 auto;
			
				background: #c5e1a5;
				text-align: center;
				width: 47%;
			}
			h1{
					text-align: center;
			}
		
		</style>
	</head>
	<body>
		<div>
			<h1>遇见</h1>
			<p>	
			总想在一场如酥如丝的春雨中，撑着油纸伞穿梭于江南。
			可能没有布满青苔的大石板，没有杨柳拂堤的断桥，
			没有一个且行且谈笑的好友。就一个人，静静的起行。
			在那里，我可以遇到破土而出、正展现着它勃勃生机的小草，
			遇到拂身而来、吹面不寒的二月春风，遇到一个促膝而谈、志同道合的友人。
			</p>
			<p>
			有人说，遇见，不过是在一定的地点，一定的时间，遇到一定的人或物，
			或许还有事情。但是在茫茫人海中，无数次擦肩的人又有几个是隐隐约约还存留着记忆的呢?
			没有心灵上的刻印，或许算不上是遇见吧。西湖三月，白素贞一袭轻衣走过，邂逅了一个儒雅书生，
			从此写就了一段刻骨铭心的爱情。草桥之上，梁山伯遇见祝英台，从十八里相送，到坟前的双双化蝶，
			为他们的爱情点开凄美的涟漪。
			</p>
		</div>
	</body>
</html>