本文介绍了一个在PC端通过iframe和CSS技术实现网页内容平铺在手机壳背景上的演示项目。首先，利用div和手机壳图片作为背景定位在屏幕中央，然后将iframe内容绝对定位在手机壳内。为了解决滚动条不美观的问题，使用CSS隐藏滚动条，同时确保内容仍可滚动。这个简单的方法可以用于创建具有视觉效果的网页演示。
一，项目需求：做一个演示的项目，要求在PC端平铺展示，内容外套个手机壳。
二，实现思路
（1）用iframe嵌套内容，iframe外面套个div，背景加载网上找的手机壳素材图片，然后定位到屏幕中央（宽高要是手机壳素材的宽高）
（2） iframe要演示展示的内容绝对定位，top手机壳的上面高度，left手机壳左面的宽度
（3）解决的问题演示的内容带有上下左右滚动条非常的不美观，设置scrolling:no-------始终隐藏滚动条却无法滚动，需要在被嵌套的页面里面设置
::-webkit-scrollbar {
height: 0 !important;
width:0 !important;
}就实现简单版本的了
1，
扫一扫
4856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
