雷速体育比分直:

您的位置:雷速体育答题测试答案 > html教程 > 怎么在HTML中使用frameset

怎么在HTML中使用frameset

時間:2016-06-02 10:12:32  來源:免費模板網 作者:風雪 閱讀次數 tagsframeset

在網頁里面嵌套其它網站數據 這個時候就會用到frameset這個標簽,那么怎么使用呢,他有哪些屬性設置呢

frameset頁面與普遍的Web頁面有些不同。雖然仍舊以<HTML>和包含標題的<HEAD>標記以及其他腳本開始,但是其內容僅僅是表示的各個頁面的版式設計。因此,不再需要有<BODY>元素,只需要<frameset>標記。

屬性介紹
border:設置框架的邊框粗細。

bordercolor:設置框架的邊框顏色。

frameborder:設置是否顯示框架邊框。設定值只有0、1;0 表示不要邊框,1 表示要顯示邊框。

cols:縱向分割頁面。其數值表示方法有三種:“30%、30(或者30px)、”;數值的個數代表分成的視窗數目且數值之間用“,”隔開。“30%”表示該框架區域占全部瀏覽器頁面區域的30%;“30”表示該區域橫向寬度為30像素;“”表示該區域占用余下頁面空間。例如:cols="25%,200,*" 表示將頁面分為三部分,左面部分占頁面25%,中間橫向寬度為200像素,頁面余下的作為右面部分。

rows:橫向分割頁面。數值表示方法與意義與cols相同。

framespacing:設置框架與框架間的保留的空白距離。

用法
來看看這段代碼:

 
  1. <frameset rows="*" cols="180,*" frameborder=0 border=0 >  
  2.  <frame src="left.html" scrolling="no" noresize></frame>  
  3.         <frame src="main.html" name="main"></frame>  
  4. </frameset>  

這段代碼的意思是:置了一個兩列的框架集,左邊一列寬度為180px,noresize表示寬度固定不變。

那么,怎么使用框架導航跳轉到指定的節呢?下面這段代碼是左邊的導航框架:

 
  1. <html>  
  2.  <head>  
  3.   <meta charset="utf-8">  
  4.  </head>  
  5.  <body bgcolor="#ffffd2">  
  6.   <ul>  
  7.  <li><a href="./reg.html" target="main">注冊用戶</a></li>  
  8.  <li><a href="./main.html" target="main">返回主頁</a></li>  
  9.   <ul>  
  10.  </body>  
  11. </html>  

這些鏈接將第二個框架作為目標。第二個框架顯示被鏈接的文檔。導航框架其中的鏈接指向目標文件中指定的節。

在來進一步看看這個例子:

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en">  
  3.   
  4. <head>  
  5.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  6.     <title>haorooms博客frame標準demo</title>  
  7. </head>  
  8.   
  9. <frameset row="180,*">  
  10.     <frame name="topFrame" src="topframe.html" />  
  11.     <frameset cols="50%,50%">  
  12.         <frame src="left.html" name="leftFrame" />  
  13.         <frame src="right.html" name="rightFrame" />  
  14.   
  15.     </frameset>  
  16.   
  17. </frameset>  
  18.   
  19. </html>  

布局及用js選區各個部分效果圖如下:
2016530120259070.png (799×559)

本文地址://www.384142.live/htmljc/2016/0602/2615.html

猜你喜歡
欄目推薦
模板推薦

Copyright:雷速体育答题测试答案 www.384142.live 免費模板網 All Rights Reserved 雷速体育答题测试答案   遼公網安備 21010602000376號  遼公網安備:42900402000182號

免責聲明:本站部分資源來自互聯網收集,版權歸原創者所有,如果侵犯了你的權益,我們會及時刪除侵權內容,聯系QQ:1615187561 謝謝合作!

{ganrao} 追光娱乐4 25选5是什么彩票 好看视频大胸美女捕鱼 捕鱼达人4破解版单机 北京麻将攻略 国际盛世棋牌游戏平台 四川金七乐彩开奖结果 2020年今晚开奖结果 JJ手机千炮捕鱼攻略 波克棋牌千炮捕鱼 河南体彩快赢481合并走势图 22选5几点开奖 官方天天捕鱼游戏下载 真人麻将游戏 永利棋牌技巧 网赚项目博客