内联框架与table布局

最新推荐文章于 2020-07-24 18:37:59 发布

小王要认真！

最新推荐文章于 2020-07-24 18:37:59 发布

阅读量307

点赞数

本文链接：https://blog.csdn.net/qq_40474184/article/details/82914565

版权

内联框架

iframe内联框架

（1）iframe元素用来在文档中添加一个内联框架
（2）iframe为body元素的子元素，必须放置在body中使用

属性	值	描述
src	URL	在框架中需要显示的内容
name/id	任意值	a标签中的target值和 iframe标签name的值一致
width	number,pixels,pixels%	设置框架的宽度
height	number，pixel	设置框架的高度，由于高度会随着内容的添加而变化，所以不能将高度设置百分比
border	number	设置框架边框大小

示例：
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>内联框架</title>
</head>
<body style="height: 800px">
	<a href="https://www.baidu.com/" target="F">百度一下，你就知道！</a><br>
	<iframe src="https://www.csdn.net/" frameborder="1" width="80%" height="80%" name="F"></iframe>
	<!--height不能设置百分比高度，高度不是固定值，会随着信息的添加而增加 -->
	<!--当height的值设置为百分值的时候，就需要在<body>元素中使用style属性-->

</body>
</html>

在这里插入图片描述

table布局

将iframe标签嵌入到table布局中，使网页和链接在表格中排列。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>内联框架</title>
</head>
<body style="margin: 0">
	<!--<a href="https://www.baidu.com/" target="F">百度一下，你就知道！</a><br>
	<iframe src="https://www.csdn.net/" frameborder="1" width="80%" height="80%" name="F"></iframe>
	height不能设置百分比高度，高度不是固定值，会随着信息的添加而增加 -->
	<!--当height的值设置为百分值的时候，就需要在<body>元素中使用style属性-->
	<table style="background: white; width: 100%; height: 1000px;" >
			<tr style="background:indigo">
				<td colspan="3" style="height: 20%" ><h3 align="center">Welcom to my page</h3></td>
			</tr>			
			<tr>
				<td style="background: powderblue" width="30%">
					<a href="https://www.csdn.net/" target="F">
					欢迎来到csdn社区</a><br>
					<a href="https://www.baidu.com/" target="F"><img src="E:\Image\网络图片\timg.jpg" height="30%" width="30%"></a>
				</td>
				<td style="background: white" colspan="2">
					<iframe src="https://www.baidu.com/" width="100%" height="100%" name="F"></iframe>
				</td>
				<!--<td style="background: mintcream"></td>--->
			</tr>
			<tr style="background:lightcyan">
				<td td colspan="3" style="height: 20%" ></td>
			</tr>	
				
	</table>

</body>
</html>

在这里插入图片描述

小王要认真！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内联框架与table布局

内联框架iframe内联框架（1）iframe元素用来在文档中添加一个内联框架（2）iframe为body元素的子元素，必须放置在body中使用属性值描述srcURL在框架中需要显示的内容name/idwidthnumber,pixels,pixels%设置框架的宽度heightnumber，pixel设置框架的高度，由于高度会随着内...
复制链接

扫一扫