當(dāng)前位置:軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > DIV+CSS > 框架垂直分割窗口cols

框架垂直分割窗口cols

2012/11/22 13:39:49作者:佚名來源:網(wǎng)絡(luò)

移動端

【實(shí)例介紹】

框架垂直分割窗口cols

垂直分割窗口就是將頁面沿豎直方向垂直分割成多個窗口,也就是將頁面分成左右排列的多個窗口。

【基本語法】

<frameset  cols="框架窗口的寬度1、框架窗口的寬度2···">
<frame  src="ur1">
<frame  src="ur2">
···
</frameset>

【語法介紹】

cols可以取多個值,每個值表示一個框架窗口的水平寬度,它的單位可以是像素,也可以示百分比。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>垂直分割窗口</title> </head> <frameset rows="*" cols="123*,641*" framespacing="1" frameborder="yes" border="1">   <frame src="left.html" name="leftFrame" id="leftFrame" />   <frameset rows="*" cols="275,363">     <frame src="zhong.html" name="mainFrame" id="mainFrame" />     <frame src="right.html" />   </frameset> </frameset> <noframes><body> </body></noframes> </html>

【代碼分析】

在代碼中,加粗部分的C01S="123*",641"標(biāo)記將窗口垂直分割成3個部分,第1個窗口占了123px.第2個窗口占了641px,第3個窗口的寬度為全屏寬度減去前兩個窗口屏幕所剩下的大小,在瀏覽器中預(yù)覽,效果如圖所示。

垂直分割窗口cols運(yùn)行效果

 【素材及源碼下載】

請點(diǎn)擊:垂直分割窗口cols 下載本實(shí)例相關(guān)素材及源碼

 

標(biāo)簽: 框架  垂直分割  窗口