【背景】
尝试用easyUI:
中的:
Panel
去实现编辑的html内容,在手机上预览显示。
【折腾过程】
1.先去拿到背景图片:
再去找个单独的html去测试。
2.网上随便下载了个页面
单独打开效果是:
然后用如下代码:
HTML页面编辑手机端预览测试放在里面效果是:
3.尝试去加上对应的背景图片:
把:
中的源码:
.device{
width: 400px;
height: 760px;
margin:10px 0 0 170px;
background:url('../images/phone.png') no-repeat;
position:relative;
}
.demo-wrap{
position:absolute;
width:322px;
height:482px;
background: #ccc;
top:117px;
left:23px;
}
拷贝过来:
再去试试:
HTML页面编辑手机端预览测试.device{
width: 400px;
height: 760px;
margin:10px 0 0 170px;
background:url('images/phone.png') no-repeat;
position:relative;
}
.demo-wrap{
position:absolute;
width:322px;
height:482px;
background: #ccc;
top:117px;
left:23px;
}
结果显示效果没变化。
4.把路径都改为上一级的目录:
只显示文字了,其他内容都不显示了。。。
5.后来又经过N多次的折腾,结果都还是显示乱码,或者异常。
6.最后的最后,终于用如下代码:
HTML页面编辑手机端预览测试.device{
width: 400px;
height: 760px;
margin:10px 0 0 170px;
background:url('images/phone.png') no-repeat;
position:relative;
}
.demo-wrap{
position:absolute;
width:322px;
height:482px;
background: #ccc;
top:117px;
left:23px;
}