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

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

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

效果图如下:

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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值