用内联框架和table元素来布局页面

最新推荐文章于 2024-07-24 16:34:02 发布
原创 最新推荐文章于 2024-07-24 16:34:02 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #框架

本文介绍了如何使用内联框架iframe和table元素来创建一个类似购物网站的布局，通过点击图片在当前页面展示详细内容。以蘑菇街为例，展示了如何构造一个包含标题、图片和iframe窗口的表格布局，并通过CSS去除列表样式点，调整iframe尺寸以适应单元格。最后，讨论了将样式与结构分离的方法，以保持代码整洁。

内联框架iframe元素与table元素结合可以实现在本页面内就可以链接到目标页面，而不用打开另外的页面，这就像是某些购物网站一样，我们通常的使用习惯是当看到左侧的文字链接，如果点击文字的话，就可以在页面中间的内容展示“窗口”那里看到文字链接的相关商品信息，而刚提到的iframe元素就可以实现这样的”窗口”。在这里，我以蘑菇街网站为例，用图片来代替文字，来把内容链接到“窗口”里。

效果图如下：

ps：当点击左侧第一张图，框架里显示的就是对应的页面，页面链接可在代码那里查看，以此类推，点击下面的每一张图都回跳到相应的页面






我的页面构思是用table元素首先写出一个三行两列的表格，第一行一般是导航栏，但内容比较简单，这里我只是写了一个标题，第二行第一个单元格放图片，第二个单元格放iframe窗口，最后一行是一些备注等信息。

iframe元素在这里需要设置width、height属性，因为默认的大小是不能填充整个单元格的。第二行左侧的图片用无序列表元素ol把图片列出来的时候会出现圆点，为了去掉圆点，所以用了一个list-style-type: none样式。

效果如下：


代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用内联框架和table元素来布局页面</title>
	<style>
		body{
			margin: 0;
		}
		h3{
			color:  #A9A9A9;
		}
	</style>
</head>
<body>
	<table style="height: 540px;width: 100%;">
			<tr style="height: 40px; width: 100%">
			<td colspan="2" align="center" bgcolor="#A9A9A9;"><h3>蘑菇街网站</h3></td>
		</tr>

			<tr style="height: 460px;">
			<td style="background: #A9A9A9;width: 20%;">
				<ul style="list-style-type: none;">
					<li>
						<a href="http://act.mogujie.com/dongridapeizhinanpc?acm=3.mce.1_10_1evv0.19221.0.5jJjoqzajOyN6.m_347210-pos_5-mf_15261_643574-idx_17-mfs_21&ptp=1._mf1_1239_15261.0.0.7IATgOz" target="frame">
							<img src="mogu1.jpg" alt="蘑菇街" title="蘑菇街女装" width="100%">
						</a>
					</li>
					<li>
						<a href="http://act.mogujie.com/mogunew17pcnz?acm=3.mce.1_10_1evuq.19221.0.5jJjoqzajOyN6.m_347205-pos_0-mf_15261_643574-idx_25-mfs_33&ptp=1._mf1_1239_15261.0.0.7IATgOz" target="frame">
							<img src="mogu2.jpg" alt="蘑菇街" title="蘑菇街" width="100%">
						</a>
						
					</li>
					<li>
						<a href="http://act.mogujie.com/sports11?acm=3.mce.1_10_1evuy.19221.0.5jJjoqzajOyN6.m_347209-pos_4-mf_15261_643574-idx_40-mfs_45&ptp=1._mf1_1239_15261.0.0.7IATgOz" target="frame">
							<img src="mogu3.jpg" alt="" title="蘑菇街" width="100%">	
						</a>
						
					</li>
					<li>	
						<a href="http://act.mogujie.com/qiudongdapeigoupc?acm=3.mce.1_10_1evuu.19221.0.5jJjoqzajOyN6.m_347207-pos_2-mf_15261_643574-idx_38-mfs_45&ptp=1._mf1_1239_15261.0.0.7IATgOz" target="frame">
							<img src="mogu4.jpg" alt="" title="蘑菇街" width="100%">
						</a>
					</li>
					<li>
						<a href="http://act.mogujie.com/uzt/pc/taozhuang?acm=3.mce.1_10_1evuw.19221.0.5jJjoqzajOyN6.m_347208-pos_3-mf_15261_643574-idx_57-mfs_63&ptp=1._mf1_1239_15261.0.0.7IATgOz" target="frame">
							<img src="mogu5.jpg" alt="" title="蘑菇街" width="100%">	
						</a>
						
					</li>
				</ul>
			</td>
			<td style="background: gray;width: 80%;">
				<iframe src="http://www.baidu.com" frameborder="0" style="width: 100%; height: 100%" name="frame">
					
				</iframe>
			</td>
		</tr>
	


			<tr style="background: #A9A9A9;">
				<td colspan="2">
					<p>时间：2017-10-26    jjy</p>
				</td>
			</tr>

	
		
	
		
	</table>
</body>
</html>

这样一来，样式设了不少，如果用内部样式的话代码看起来就会很乱，所以接下来就是写一个内联样式，把结构层与样式层分离，用的标签是<style></style>，分离样式后的效果和原来的一样。

效果如下：


代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用内联框架和table元素来布局页面</title>
	<style>
		body{margin: 0;}
		h3{color:  #A9A9A9;}
		table{height: 540px;width: 100%;}
		#tr1{height: 40px; width: 100%;}
		#tr2{height: 460px;}
		#tr3{background: #A9A9A9;}
		#td1{background: #A9A9A9;width: 20%;}
		#td2{background: gray;width: 80%;}
		ul{list-style-type: none;}
	</style>
</head>
<body>
	<table>
			<tr id="tr1">
			<td colspan="2" align="center" bgcolor="#A9A9A9;"><h3>蘑菇街网站</h3></td>
		</tr>

			<tr id="tr2">
			<td id="td1">
				<ul>
					<li>
						<a href="http://act.mogujie.com/dongridapeizhinanpc?acm=3.mce.1_10_1evv0.19221.0.5jJjoqzajOyN6.m_347210-pos_5-mf_15261_643574-idx_17-mfs_21&ptp=1._mf1_1239_15261.0.0.7IATgOz" target="frame">
							<img src="mogu1.jpg" alt="蘑菇街" title="蘑菇街女装" width="100%">
						</a>
					</li>
					<li>
						<a href="http://act.mogujie.com/mogunew17pcnz?acm=3.mce.1_10_1evuq.19221.0.5jJjoqzajOyN6.m_347205-pos_0-mf_15261_643574-idx_25-mfs_33&ptp=1._mf1_1239_15261.0.0.7IATgOz" target="frame">
							<img src="mogu2.jpg" alt="蘑菇街" title="蘑菇街" width="100%">
						</a>
						
					</li>
					<li>
						<a href="http://act.mogujie.com/sports11?acm=3.mce.1_10_1evuy.19221.0.5jJjoqzajOyN6.m_347209-pos_4-mf_15261_643574-idx_40-mfs_45&ptp=1._mf1_1239_15261.0.0.7IATgOz" target="frame">
							<img src="mogu3.jpg" alt="" title="蘑菇街" width="100%">	
						</a>
						
					</li>
					<li>	
						<a href="http://act.mogujie.com/qiudongdapeigoupc?acm=3.mce.1_10_1evuu.19221.0.5jJjoqzajOyN6.m_347207-pos_2-mf_15261_643574-idx_38-mfs_45&ptp=1._mf1_1239_15261.0.0.7IATgOz" target="frame">
							<img src="mogu4.jpg" alt="" title="蘑菇街" width="100%">
						</a>
					</li>
					<li>
						<a href="http://act.mogujie.com/uzt/pc/taozhuang?acm=3.mce.1_10_1evuw.19221.0.5jJjoqzajOyN6.m_347208-pos_3-mf_15261_643574-idx_57-mfs_63&ptp=1._mf1_1239_15261.0.0.7IATgOz" target="frame">
							<img src="mogu5.jpg" alt="" title="蘑菇街" width="100%">	
						</a>
						
					</li>
				</ul>
			</td>
			<td id="td2">
				<iframe src="http://www.baidu.com" frameborder="0" style="width: 100%; height: 100%" name="frame">
					
				</iframe>
			</td>
		</tr>
	


			<tr id="tr3">
				<td colspan="2">
					<p>时间：2017-10-26    jjy</p>
				</td>
			</tr>
	</table>
</body>
</html>


yin_991
关注
6、使用框架(Frames)进行网页布局
css33的专栏
06-07 147
本文详细介绍了使用框架(Frames)进行网页布局的技术细节，包括创建框架集文档、处理不支持框架的浏览器、在框架之间创建链接等内容。同时，文章还探讨了框架的具体应用场景、优化技巧以及与其他现代网页技术的比较，帮助开发者更好地理解和选择合适的网页布局技术。
27、HTML 框架与表单元素全解析
最新发布
e3f4g5的博客
08-05 36
本文深入解析了HTML中的框架元素和表单元素，涵盖了<frame>、<frameset>、<iframe>等框架相关元素的属性和用法，以及<form>、<input>、<textarea>、<button>等表单元素的详细说明。文章还提供了多个代码示例，并讨论了表单提交方式（GET和POST）、浏览器兼容性问题以及用户体验优化策略。最后，通过一个综合应用案例展示了框架与表单元素的结合使用，帮助开发者创建功能丰富、交互性强的网页。
内联框架与table布局
季白之二七的博客
10-07 395
内联框架 iframe内联框架 （1）iframe元素用来在文档中添加一个内联框架 （2）iframe为body元素的子元素，必须放置在body中使用 属性 值 描述 src URL 在框架中需要显示的内容 name/id width number,pixels,pixels% 设置框架的宽度 height number，pixel 设置框架的高度，由于高度会随着内...
<div>和<table>元素的布局
u012416664的博客
08-15 339
元素布局代码： html> html lang="en"> head> meta charset="UTF-8"> title>div布局title> style type="text/css"> body{ margin: 0px; } div#contaoner{ width:100%; height
内联框架和CSS
m0_62140068的博客
09-25 205
1. 内联框架 内联窗口（框架）：在一个窗口中嵌入一个子窗口，在子窗口中显示一个网页。 补充超链接target target="指定的窗口名称" target="childframe" _parent 在上一级窗口打开链接 _top 在顶级窗口打开链接 <iframe src="初始页面的URL"> </iframe> 2. CSS CSS(Cascading Style Sheets)：级联样式表。 作用：用来修饰网页的外观，控制外观，定义布局。 级联：关联
table布局和内联框架模式
qq_43123533的博客
09-23 395
用table布局和内联框架模式制作了一个简单的视频播放器，原本打算做购物app的网页，可是像唯品会，蘑菇街的网址不能打开，代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&a
HTML 布局 - 使用表格
Kiddie_Lu的博客
05-02 274
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;luxuze.com&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="500"
什么是块元素block和内联元素inline
11-22
### 什么是块元素（block）和内联元素（inline） 在HTML中，元素根据其默认...理解块元素和内联元素的概念及其应用是网页设计的基础，通过合理利用这两种元素的不同特性，可以有效地控制网页布局和内容呈现的方式。
CSS基础面试题：内联与块元素及浮动原理详解
在前端面试中，CSS基础知识是考察候选人对网页布局理解和实践能力的关键部分。本文主要聚焦于内联元素与块元素的区别以及...在实际项目开发中，正确地运用内联元素、块元素和浮动布局技巧能提升页面性能和用户体验。
HTML元素标签详解：块级、内联与可变元素
- `<iframe>`：内联框架，用于嵌入其他网页。 - `<ins>`：表示插入的文本。 - `<map>`：图像映射，定义图像的可点击区域。 - `<object>`：插入对象，如多媒体内容。 - `<script>`：客户端脚本，主要用于...
5分钟玩转Axure之动态面板、中继器、内联框架的使用
05-31
资源里是rp文件，实现了对动态菜单的实现、动态面板常见的各中使用案列，实现表格全操作（包括表格的搜索筛选、翻页、增加数据、修改表格数据、单条删除和批量删除表格数据）
HTML 之内联框架
从零开始的异世界JAVA学习
03-15 1322
内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面。 <iframe src=#<!--初始页面的URL--> name=#<!--框架名称--> width=#<!--宽度--> height=# <!--高度--> frameborder=# <!--框架的边框高度--> > </iframe> 例如： 新建一个初始页面文件"initial page.html"； &lt
table+内联样式写邮件模板
smily_word的博客
04-28 1008
兼容outlook，需要table加内联样式,，大概如下： <table border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto; width: 800px; background-color: #fff; box-shadow: 0 0 10px #eee; border-radius: 8px; padding: 20px;"> <tbody>
html中table是块元素吗,列表及表格（块元素，内联元素）
weixin_39540315的博客
06-10 1886
## 列表**ul**无序列表、**ol**有序列表、**dl**自定义列表~~~ul{//样式重置，去除ul中的样式(内容前边的图形)list-style: none;}}这两个标签往下看一级只能是标签，不允许有其他别的标签标签中允许有别的标签，但是往上看一级只能是标签标签里有，标签~~~***## 表格表格tabletr：行标签td：单元格th：单元格--与td的区别，居中，字体加粗属性：ro...
HTML Iframe（HTML内联框架）（有用哎哟！）
不再想当菜鸟了
03-11 5783
frame 用于在网页内显示网页。 添加 iframe 的语法 URL"> URL 指向隔离页面的位置。 Iframe - 设置高度和宽度 height 和 width 属性用于规定 iframe 的高度和宽度。 属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。 实例 亲自试一试 Iframe - 删除边框 frameborder
原来报表可以做这么多动态交互效果
cainiao_M的博客
10-16 462
通常我们将报表嵌入到应用中做数据展现的中间件，通常展现的数据的形式就是表格，统计图，其实你的报表还可以有更多动态交互效果哦！ 1. 多个报表 TAB 页切换 功能简述:将多个业务联系紧密，但又不想在一个页面中显示的多个报表以 TAB 页的方式显示，点击 TAB 页即可进行切换。 实现方式：通过润乾的报表组功能实现。 具体实现可参考：tab 页形式展现多张报表 2. 点击表头排序 ...
最近碰到的一个firefox下table标签和iframe标签问题
sinple123456的专栏
12-31 601
我只是解决了问题，原因我还不知道，付代码：           之后删除中的style="background-color:red" 就可以了。 这是无法显示iframe内容的截图 这是正常显示iframe的截图，用来显示仿真视频
RAS--APEI 报错解析流程(1)
qq_43561214的博客
07-24 2529
1.注册SMI ApuRasDispatch gFchSmmApuRasDispatchProtocolGuid,当PCIE产生错误，CPU的寄存器会存在错误状态，IOHCRAS会有错误的信息，同时会产生SMI的中断，BIOS会读取错误信息同时去扫描PCIE 的配置空间AER Capbility的错误状态填写到APEI HEST GHES type9中对应的PCIE错误结构体,同时汇报ipmi 错误到BMC和清除错NBIO Global Status误状态，AER 错误可以OS 清除。
【web前端】table的border属性解析（内联样式表和内部样式表中的区别）
Cassie_zkq的博客
11-18 5630
今天做实验的时候被table的border属性搞的眩晕(´･Д･)」特此总结一下。 （我不去学前端框架那些高级知识在纠结这些大作业用不到的基础东西干啥。。） 一、内部样式表中内table的border属性测试 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值