如何使用框架將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+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告