如何使用框架将HTML页面分成四个部分？

在HTML的Frameset属性中，我们可以用百分比和像素来定义行和列的尺寸。不同框架的集合称为框架集。要制作框架的特定部分，必须使用frame元素。每个框架都定义了其自身的一些唯一性，而不会干扰任何其他框架。在本文中，我们将逐步了解使用此框架集将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

这是第一个框架，其主体背景颜色设置为seagreen。为了告知这是第一部分，它将使用h1元素。

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

Frame2.html

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

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

Frame3.html

这是框架的第三部分，其主体背景颜色设置为orange。为了告知这是第三部分，它将使用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

在下面的示例中，我们将为frameset元素中的rows和cols设置相等的属性值。然后，我们将使用四个frame元素，这些元素具有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>

结论

以上输出显示了HTML中四个不同框架的特定部分的唯一性。所有框架都使用内联CSS来设置background-color和opacity属性。frameset是包含所有框架的主要元素。例如，浏览器窗口将不同的部分划分开来，以加载其自身的一些唯一性。

更新于：2023年6月8日

4K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告