H5怎么实现网站的浏览功能？

一(yī)、css

div.preview-layer{

display: none;

position: relative;

left:50%;

margin-left:-205px;

}

div.preview-layer .preview-bg{

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index:999;

background-color:#000;

opacity:0.7;

}

.preview-close{

position: fixed;

width: 20px;

height: 10px;

color:#fff;

cursor:pointer;

z-index:1000;

top:50%;

left:50%;

margin-left:220px;

}

div.preview-layer .preview-phone{

position: fixed;

width: 410px;

height: 840px;

background: url(../images/iphone-bg.png) no-repeat no-repeat;

z-index: 1000;

}

.preview-html{

position: absolute;

width:361px !important;

height: 638px !important;

top:98px;

left:24px;

border:2px solid #000;

border-radius: 5px;

outline: none;

background-color: #fff;

}

二、html

<!-- /.main-container -->

<div class="f5d5-9eef-92f8-c6e4 preview-layer">

<div class="9eef-92f8-c6e4-ed36 preview-bg"></div>

<div class="92f8-c6e4-ed36-1d43 preview-phone">

<div class="c6e4-ed36-1d43-0088 preview-close" οnclick="previewclose();">关闭预览</div>

<iframe id="preview-html" name="preview-html" class="ed36-1d43-0088-f8d7 preview-html" src=""></iframe>

</div>

</div>

三、JS

//预览

function preview(ID){

var murl = '<%=basePath%>wxwebindex/previewcourseware.do?ID='+ID;

if(ID=='' || ID==null){

alert("请先保存信息!");

}

else{

$("#preview-html").attr('src', murl);

$("#zhongxin").hide();

$(".preview-layer").css('display','block');

}

}

//关闭预览

function previewclose(){

$(".preview-layer").css('display','none');

$("#zhongxin").show();

}