如何使用框架将 HTML 页面划分为四个部分?

htmlweb developmentfront end technology更新于 2024/7/24 23:40:17

在 HTML 的 Frameset 属性中，我们可以用百分比或像素来定义行和列的尺寸。不同框架的集合称为框架集。要创建框架的特定部分，必须使用框架元素。每个框架都定义了一些独特的特性，而不会干扰任何其他框架。在本文中，我们将逐步讲解如何使用此框架集将 HTML 页面划分为四个部分。

语法

示例中使用了以下语法 -

<frameset rows = "25%, 25% " cols = "20%,70%">

框架集是包含不同框架的 HTML 元素。框架集中有两种类型的属性 -

rows - 定义行数。
cols - 定义列数。

<frame src = "frame1.html"></frame>

HTML 中的框架用于将浏览器窗口划分为不同的部分，每个部分都可以在其框架中加载内容。

示例 1

在本例中，我们将使用四个不同的框架组成一个框架集，该框架集在 HTML 中划分框架的特定部分。

Frame.html

这是程序的主要输入，它使用 <frame> 标签包含四个不同的框架。为了设置框架的位置，它使用了两个属性——rows 和 cols。

<!DOCTYPE html>
<html>
<head>
   <title>Frame into 4 parts</title>
</head>
   <frameset rows="25%, 25% " cols="20%,70%">
   <frame src = "frame1.html"  name = "frame1">
   <frame src = "frame2.html" name = "frame2">
   <frame src = "frame3.html" name = "frame3">
   <frame src = "frame4.html" name = "frame4">
<body>
</body>
</html>

Frame1.html

这是第一个将主体背景色设置为海绿色的框架。为了通知第一部分，它将使用 h1 元素。

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body style = "background-color: seagreen; opacity: 0.5;">
   <h1>First part</h1> 
</body>
</html>

Frame2.html

这是框架的第二部分，其主体部分的背景颜色设置为粉蓝色。为了通知第二部分，它将使用 h1 元素。

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body style = "background-color: powderblue; opacity: 0.5;"><h1>Second part</h1> 
</body>
</html>

Frame3.html

这是框架的第三部分，其主体部分的背景颜色设置为橙色。为了通知第三部分，它将使用 h1 元素。

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body style = "background-color: orange; opacity: 0.5;">
   <h1>Third part</h1>
</body>
</html>

Frame4.html

这是框架的第四部分，其主体部分的背景颜色设置为#e1a5e8。为了通知第四部分，它将使用 h1 元素。

<!DOCTYPE html>
<html>
<head>
   <meta charset = "utf-8">
   <meta name = "viewport" content = "width=device-width, initial-scale = 1">
   <title></title>
</head>
<body style = "background-color: #e1a5e8; opacity: 0.5;">
   <h1>Fourth part</h1>
</body>
</html>

示例 2

在下面的示例中，我们将为元素框架集中的 rows 和 cols 设置相同的属性值。然后，我们将使用四个具有 src 属性的框架元素将 HTML 页面分成四个部分。

<!DOCTYPE html>
<html>
   <head>
      <title>Frame into 4 parts</title>
   </head>
   <frameset rows="250px, 250px " cols="250px,250px">
   <frame src = "https://www.shutterstock.com/image-vector/flat-line-design-website-banner-600w-391212160.jpg" name = "frame4"  name = "frame1">
   <frame src = "https://image.shutterstock.com/z/stock-vector-flat-line-design-website-banner-of-health-plan-management-solutions-modern-vector-illustration-for-391212160.jpg" name = "frame2">
   <frame src = "https://image.shutterstock.com/z/stock-vector-flat-line-design-website-banner-of-health-plan-management-solutions-modern-vector-illustration-for-391212160.jpg" name = "frame4" name = "frame3">
   <frame src = "https://www.shutterstock.com/image-vector/flat-line-design-website-banner-600w-391212160.jpg" name = "frame4">
</html>