本文介绍了如何使用内联框架iframe和table元素来创建一个类似购物网站的布局，通过点击图片在当前页面展示详细内容。以蘑菇街为例，展示了如何构造一个包含标题、图片和iframe窗口的表格布局，并通过CSS去除列表样式点，调整iframe尺寸以适应单元格。最后，讨论了将样式与结构分离的方法，以保持代码整洁。
内联框架iframe元素与table元素结合可以实现在本页面内就可以链接到目标页面，而不用打开另外的页面，这就像是某些购物网站一样，我们通常的使用习惯是当看到左侧的文字链接，如果点击文字的话，就可以在页面中间的内容展示“窗口”那里看到文字链接的相关商品信息，而刚提到的iframe元素就可以实现这样的”窗口”。在这里，我以蘑菇街网站为例，用图片来代替文字，来把内容链接到“窗口”里。
效果图如下：
ps：当点击左侧第一张图，框架里显示的就是对应的页面，页面链接可在代码那里查看，以此类推，点击下面的每一张图都回跳到相应的页面
最低0.47元/天 解锁文章
扫一扫
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
