iframe應用,懸浮框架

解決的問題:

1、關於iframe裏面內容的:文本或者圖片的樣式設計可以在引用的html文中設置其中的內容爲div層

應用iframe佈置頁面整體佈局

<body>
<map name="load">
    <area shape="rect" coords="1222,23,1254,38" href="load.html">
</map>
<table border="0" cellspacing="0" cellpadding="0">
    <tr><td><img src="top.JPG"></td></tr>
    <tr><td><img src="2.JPG"></td></tr>
    <tr><td><img src="3.JPG" usemap="#load"></td></tr>
</table>
<iframe src="left.html" width="700px" height="400px" marginwidth="50px" ></iframe>
<iframe src="right.html" width="600px" height="400px" marginwidth="50px"   align="right"></iframe>
</body>


一個table上頁和下面的兩個iframe懸浮框架

懸浮框架iframe引入兩個用frameset設計的網頁。如下:

left.html

<frameset rows="85%,15%">
    <frame src="左大圖.html" name="zuo" scrolling="no" frameborder="0">
    <frame src="ul1.html" scrolling="no" frameborder="0">
</frameset>

左大圖.html

<table width="500px" height="600">
    <tr><td>
<a name="two"> <img src="left1.JPG"></a>
<a name="three"> <img src="left3.JPG"></a>
<a name="four"> <img src="left4.JPG"></a>
<a name="one"> <img src="left.JPG"></a>
    </td>
    </tr>
</table>
ul1.html
<a href="左大圖.html #two" target="zuo"><img src="左二.JPG"></a>
<a href="左大圖.html #three"target="zuo"><img src="左三.JPG"></a>
<a href="左大圖.html #four" target="zuo"><img src="左四.JPG"></a>
<a href="左大圖.html #one" target="zuo"><img src="左一.JPG"></a>
在這個left頁面中,引用的table標籤好像不可以。在iframe中引入marginwidth纔可以。

right.html

<frameset rows="15%,70%,15%">
    <frame src="右上文.html" scrolling="no" frameborder="0" align="center">
    <frame src="右下文.html" name="you" scrolling="no" frameborder="0">
    <frame src="youdown.html" scrolling="no" frameborder="0" >
</frameset>

右上文.html

<style>
        #div1{
            background: #aaaaaa;
        }
        #div1 a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div align="center" style="font-size: 40px" id="div1" >
       <a href="右下文.html #one" target="you">綜合</a>
       <a href="you2.html #two" target="you">賽事</a>
       <a href="you3.html #three" target="you">公告</a>
       <a href="you4.html #four" target="you">論壇</a>
</div>
</body>

運用了css,將裏面的內容設置成一個div層,再 用css設計,就可以在iframe中顯示居中或其他的樣式了。

右下文.html

<style>
        div{
            background: beige;
        }
    </style>
</head>
<body>
<div align="center" >
  <a name="one"><b>LOL最新精彩刺激偷家top5</b></a></td>
      <p>M馬爾扎哈表現驚豔 EDG輕鬆斬獲15連勝
      <p>賽事中心進入賽事中心
      <p>題 電腦及其他問題 LOL遊戲崩潰提示
      <p>正忙,請稍後再試(登錄錯誤)
      <p>事VG鏖戰險勝OMG LGD遺憾無緣季後賽08/0
      <p>賽事【OMG】OPENDAY:酷熱夏天
</div>
其他you2~4的頁面同上。

問題:打開的頁面在chrome中不能打開,在IE9就可以打開。兼容性問題。。。。。。。。當用chrome打開時就下載文件。











發佈了42 篇原創文章 · 獲贊 11 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章