將不同的html頁面組合成一個——通過框架標籤frameset和frame實現

Renaway發表於2018-02-18
HTML框架

html靜態網頁實現一個選單功能，左邊點不同連結，右邊載入不同頁面。

要實現這一個功能，我們可以使用frameset標籤，它與body標籤屬於同一級，所以我們要在主html頁面編碼中刪除body標籤。

我們使用src指定frame子項載入的網頁的地址，使用name熟悉+target熟悉將頁面顯示在指定位置，如右邊的塊。

實現效果：



程式碼如下

主html檔案：

<html>
<head>
<meta charset=UTF-8">
<title>Frameset Test</title>
</head>

<frameset rows="120,*">
	<frame src="top.html" >
	<frameset cols="120,*">
		<frame src="left.html">
		<frame name="right" src="right.html">
	</frameset>
</frameset>

</html>

top.html:

<html>
<head>
<meta  charset=UTF-8">
<title>top</title>
</head>
<body>
	top
</body>
</html>

right.html:

<html>
<head>
<meta charset=UTF-8">
<title>right</title>
</head>
<body>
	This is right.
</body>
</html>

left.html:

<html>
<head>
<meta charset=UTF-8">
<title>left</title>
</head>
<body>
	<a href="menu1.html" target="right">menu1</a>
	<a href="menu2.html" target="right">menu2</a>
	<a href="menu3.html" target="right">menu3</a>
</body>
</html>

menu1.html:

<html>
<head>
<meta  charset=UTF-8">
<title>menu1</title>
</head>
<body>
	This is menu1.
</body>
</html>
menu2和menu3類似menu1！

相關文章