網頁的一個頁面中顯示另一個頁面
阿新 • • 發佈：2018-12-16
1、定義
內聯框架：HTML內聯框架是為了實現在網頁中顯示網頁，突出了內聯二字，就是在一個網頁中，我們能夠控制在這個網頁中用多大的框去顯示另外一個網頁，並且能通過CSS對其進行控制。
2、兩種應用場景：
（1）固定右側或左側按鈕，修改另一側或網頁中某個部分的內容
（2）網站中很多頁面都用到相同的程式碼，例如頁尾
3、使用<iframe>
編寫footer.html用來公用的頁尾
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>poesy_footer</title> <link href="css/footer.css" rel="stylesheet" type="text/css"> </head> <body> <footer> <div class="footer_me"> <a>關於我</a> <em>·</em> <a>我的部落格</a> <em>·</em> <a>聯絡我</a> <em>·</em> <a>關於我</a> <em>·</em> <em>·</em> </div> <p> Copyright 2018*** All Rights Reserved <a href="http://www.miitbeian.gov.cn/" target="_blank">*ICP備*******號</a> </p> </footer> </body> </html>
css修飾：
footer{
width: 100%;
margin: 1em auto;
}
footer > .footer_me{
width: 50%;
font-size: 14px;
margin: 0px auto;
color: #787878;
}
footer > p{
font-size: 12px;
width: 60%;
margin: 0px auto;
color: #787878;
}到需要用到網頁進行引用：<iframe>這裡面寫的字是防止不識別瀏覽器標籤，做的預防性替換文字</iframe>
<footer>
<iframe src="../footer.html">
<p>
Copyright 2018*** All Rights Reserved
<a href="http://www.miitbeian.gov.cn/" target="_blank">**ICP備******號</a>
</p>
</iframe>
</footer>引用網頁css修飾：
/*-----------------------------------------------------腳部css*/ footer{ width: 100%; } footer > iframe{ width: 100%; height: 4.5em; border: 0px; }
4、大功告成。