大家好，欢迎来到IT知识分享网。
内嵌框架——位于body内
（1）作用：用于在网页中嵌入一个网页并让它在网页中显示。
（2）标签：
<iframe src=”URL”></iframe>
URL指定独立网页的路径。
（3）属性：
src——指向目标页面。
name——内嵌框架自定义名称，超链接跳转展现位置。
frameborder——设置边框宽度。
scrolling——设置是否显示滚动条。
width——设置框架宽度。
height——设置框架高度。
练习
（1）目标效果 ：
上侧框架左侧内嵌项目导航栏，右侧框架内嵌左侧导航对应跳转的页面内容。下侧框架内嵌一个百度网页。
（2）代码实现：
内嵌框架首页——index.html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>内嵌框架</title> <!-- 内嵌框架——用于在网页中嵌入一个网页并让它在网页中显示。 语法： <iframe src="URL"></iframe> URL指定独立网页的路径。 属性： src——指向目标页面。 name——内嵌框架自定义名称，后面超链接跳转呈现位置。 frameborder——设置边框宽度。 scrolling——设置是否显示滚动条。 width——设置框架宽度。 height——设置框架高度。 --> </head> <body> <!-- 图片展示首页 --> <iframe src="左侧导航.html" height="500px" width="20%"></iframe> <iframe src="右侧展示.html" name="iframe_my" height="500px" width="78%"></iframe> <iframe src="https://www.baidu.com/" height="500px" width="100%"></iframe> </body> </html>左侧导航栏网页——左侧导航.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>目录导航</title> </head> <body> <h3>我喜欢的图片</h3> <ul type="square"> <li> <a href="img/001.jpg" target="iframe_my">MCA</a> </li> <li> <a href="img/002.jpg" target="iframe_my">Java</a> </li> <li> <a href="img/003.jpg" target="iframe_my">背影</a> </li> <li> <a href="img/004.jpg" target="iframe_my">湖面</a> </li> <li> <a href="img/005.jpg" target="iframe_my">女孩</a> </li> </ul> </body> </html>右侧导航栏网页——右侧展示.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片展示</title> </head> <body> 展示图片框 </body> </html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/143006.html
