HTML内嵌框架

内嵌框架:内嵌框架是用于在网页中嵌入一个网页并让它在网页中显示.

添加内嵌框架:<iframe src=" URL "></iframe> (scr属性是默认显示的内容)

展示图书案例:左侧显示书名，在右侧显示书的照片

书籍展示首页：

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <iframe src="书籍导航页面.html" height="700px" width="30%"></iframe>
                <!--内嵌框架-->
                <iframe name="iframe_my" width="67%" height="700px" src="img/think in java.jpg"></iframe>
        </body>
</html>

左侧导航页面：

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <h1>我喜欢的图书展示</h1>
                <ul>
                        <li>
                                <a href="img/java核心技术.jpg" target="iframe_my">java核心技术</a>
                        </li>
                        <li>
                                <a href="img/think in java.jpg" target="iframe_my">think in java</a>
                        </li>
                        <li>
                                <a href="img/大话设计模式.jpg" target="iframe_my">大话设计模式</a>
                        </li>
                        <li>
                                <a href="img/深入理解java虚拟机.jpg" target="iframe_my">深入理解java虚拟机</a>
                        </li>
                        <li>
                                <a href="img/算法图解.jpg" target="iframe_my">算法图解</a>
                        </li>
                </ul>
        </body>
</html>

我们做一个小实验，邮箱的登录，我们不填写账号密码，直接登录，点击写信收信和草稿箱分别显示三张图片:

登录首页.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		用户名:<input type='text'/><br />
		密&emsp;码:<input type='password'/><br />
		<a href='邮箱首页.html'>登录</a>
	</body>
</html>

点击登录我们就进入了邮箱首页.html网页

邮箱首页.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe width="100%" height="100px" src="邮箱上侧页面.html"></iframe>
		<iframe width="20%" height="600px" src="邮箱左侧导航.html"></iframe>
		<iframe width="79%" height="600px" name="rightiframe"></iframe>
	</body>
</html>

我们把邮箱首页分为三部分，点击邮箱左侧导航就在rightname显示图片

邮箱左侧导航:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>
				<a href="img/QQ图片20230422135654.jpg" target="rightiframe">写信</a>
			</li>
			<li>
				<a href="img/QQ图片20230422141256.jpg" target="rightiframe">收信</a>
			</li>
			<li>
				<a href="img/QQ图片20230423164113.jpg" target="rightiframe">草稿箱</a>
			</li>
		</ul>
	</body>
</html>

邮箱上册页面:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>欢迎<font color='coral'>xiaosen</font>来到邮箱!</h1>
	</body>
</html>

执行效果(谷歌)：

框架集合：

我们可以用框架集合把网页切割成任意部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 框架集合:和body是并列的 -->
	<frameset rows='20%,*,30%'>
		<frame/>           <!--frame必须放在frameset中使用-->
		<frameset cols='30%,40%,*'>
			<frame />
			<frame src='index.html'/>
			<frame />
		</frameset>
		<frameset cols='50%,*'>
			<frame />
			<frame />
		</frameset>
	</frameset>
</html>

每一个frameset都是一个大框架，可以按照行和列切割，里面有很多小框架

结果展示:

猜你喜欢