内嵌框架——位于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>
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
