常見頁面布局方式(三種框架集)


frameset框架集

Frameset標簽可定義一個框架集,它用來組織多個窗口(框架),每個框架有獨立的html文檔,在有frameset時,不可以同時存在body標簽,他和body標簽是同級的。

多個框架組成了一個框架集

1 框架集標簽(frameset)定義了如何將窗口分割為框架

2 每個frameset 定義了一系列行或列

3 rows、columns的值規定了每行或每列占據屏幕的面積

frameset的一些屬性

  cols“”把一個瀏覽器窗口按列進行切割,也就是把瀏覽器豎着切分

      cols“20%,200px,*”上半部分戰20%,中間部分占200px,剩下的為第三部分。

  rows=“20%,200px,*”以行方式分割,橫着划分

  border=“1”設置間距為1等等

  bordercolor=“red”框架邊的顏色

  frameborder=“no/yes” 是否顯示邊框線(也可以寫0或1)

  noresize=“noresize”不可以重新設置大小(兩個內容之間不可以移動了)瀏覽器之間解析方式不太一樣最好在frame單獨寫,而不是在frameset上寫

它們都在frameset標簽上顯示。

 

框架標簽<frame />

frame標簽定義了放置在每個框架中的HTML文檔。它通過引用要顯示的HTML文檔的路徑,他是自閉合標簽。

frame常用屬性

1 name設置框架名稱

2 src 設置此框架要顯示的網頁名稱或路徑。此為必須設置的屬性。

3 scrolling=“” 設置是否要顯示滾動條。設定值為auto,yes,no。不可以用0  1來寫值:

!不能將body和frameset標簽同時使用,但是如果添加包含一段文本的<noframeset>標簽,就必須得將這段文字嵌套於<body>標簽內:

<frameset rows="200px,*" border="1" bordercolor="red">
  <frame src="http://www.baidu.com" />
  <frameset cols="30%,*">
  <frame src="http://www.360.com" name="leftwindows" scrolling="no" />
  <frame src="http://www.taobao.com" noresize=“noresize”/>
  </frameset>
</frameset>
<noframes>
  <body>
    你的瀏覽器不支持frameset框架集
  </body>
</noframes>

瀏覽器不支持框架集用norframes標簽來顯示,一般寫咋frameset下面里面包含body標簽。

例如百谷歌度網站,百度谷歌一起搜

 

iframe內聯框架和框架集實例

<iframe>內聯框架標簽

iframe元素會創建包含另外一個文檔的內聯框架(即行內框架)。iframe是屬於內聯框架,他是body的子集。iframe作為一個普通元素放在body里,而frameset是代替了body元素

屬性:

1width可設置內聯框架的寬

2 height可設置高

3 name 設置框架名稱

4 src設置頁面的路徑

例子:<a href="http://www.youdao.com: target="right">百度</a>

  <iframe name="right" src="http://www.baidu.com" frameborder="1" width="400" hright="200">你的瀏覽器不支持iframe標簽</iframe>

制作頁面是沒有寫單位,都默認為像素。

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.jd.com" target="iframeName">點擊</a>
<iframe name="iframeName" src="http://www.baidu.com" width="600" height="600" frameborder="0">你的瀏覽器不支持iframe標簽</iframe>
</body>
</html>

通過target屬性指向了iframe的名字所以頁面會在iframe里面顯示,如果不加target,就會在整個頁面打開。

a標簽的target屬性值:

_blank,在新的窗口打開

_self,默認,在相同的框架中打開被連接文檔

_parent,在父框架集中打開被連接文檔(在最外面的frameset中打開)

_top,在整個窗口中打開

framename,通過名字在指定的框架中打開

可以應用的qq郵箱類型的,在左面點擊在右面被打開如下:

list.html

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="utf-8">

  <title></title>

</head>

<body>

  <ul>

    <li><a href="htto://www.baidu.com" target="rightWindow">百度</a></li>

    <li><a href="htto://www.360.com" target="rightWindow">360</a></li>

    <li><a href="htto://www.taobao.com" target="rightWindow">淘寶</a></li>

    <li><a href="htto://www.jd.com" target="rightWindow">京東</a></li>

  </ul>

</body>

</html>

 

index.html

<!DOCTYPE html>

<html>

<head lang="en">

  <title></title>

</head>

<frameset rows="20%,*">

  <frame src="http://www.baidu.com" />

  <frameset rows="20%,*>

  <frame src="list.html" />

  <frame name="rightWdow" src="http://www.youdao.com" />

  </frameset>

</frameset>

</html>

顯示如下:在左下點擊的效果會在右面的框架里產生。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM