一次偶然的機(jī)會(huì)灼捂，朋友找我讓我給她實(shí)現(xiàn)一個(gè)類似于CSDN 開發(fā)者社區(qū)論壇的顯示效果。嘻嘻片吊，原因是她知道我在學(xué) Android 之前是學(xué) H5 開發(fā)的。故事講到這里协屡，開始切入正題俏脊。
導(dǎo)航-內(nèi)容顯示效果
一、Frame實(shí)例中至少要包含三個(gè)頁(yè)面：
- 承載左右兩個(gè)框架的 Main.html肤晓；
- 呈現(xiàn)鏈接的左框架 LeftFrame.html爷贫；
- 呈現(xiàn)左框架鏈接中的主要內(nèi)容 index.html；
二补憾、三個(gè)頁(yè)面的代碼編寫
1.Main.html 中的代碼
<!DOCTYPE html>
<html>
<head>
<title>我的主頁(yè)</title>
</head>
<frameset cols="20%,*" > <!--左右框架的比例漫萄，自定義 -->
<frame src="LeftFrame.html" />
<frame src="Index.html" name="showContent" />
<!--name屬性必須填寫，它與LeftFrame.html 中每個(gè)鏈接<a>屬性的action 相對(duì)應(yīng)的盈匾，否則鏈接的頁(yè)面無(wú)法顯示 -->
</frameset>
</html>
科普一下：frameset（框架的生成的標(biāo)記）是和html的<body>標(biāo)簽同等級(jí)的腾务，所以不能將<frameset></frameset>寫在<body></body>標(biāo)簽內(nèi)部，否則會(huì)出錯(cuò)或無(wú)法顯示削饵；
2. LeftFrame.html 中的代碼
<!DOCTYPE html>
<html>
<head>
<title>LeftFrame</title>
</head>
<body>
<a href="index.html" target="showContent" >鏈接一</a>
<a href="index2.html" target="showContent" >鏈接二</a>
<a href="index3.html" target="showContent" >鏈接三</a>
</body>
</html>
3. index.html 中的代碼
<!DOCTYPE html>
<html>
<head>
<title>contex 內(nèi)容</title>
</head>
<body>
<h1>hello world!</h1>
</body>
</html>
感謝您能看完這篇文章岩瘦，希望對(duì)您有所幫助！??
