大家好，我是新媒之声广告工作室的大白，今天给大家带来的是移动app开发第二节。

首先给大家看看，我前面写好的效果图；

现在我开始讲解今天的内容今天的内容主要讲的是移动app首页布局。

我们现在打开开发软件→点击昨天创建好的文件夹（我的这里是新媒之声）→双击打开index.html进入页面编辑。

我们首先引用css文件和jquery文件。

在写一个iframe标签，用来引用业面，就点击下面到导航列表，上面的内容就会改变，我们给iframe一个类名为class=“kjiframe”。

Frameborder=“0”的意思就是将iframe标签的外边框全部取消。

我们现在开始写jquery，首先定义两个常量，ksg（因为我英语不好这里我用拼音首字母代替“可视高”）=$（window）.hight（）；（这里的意思是获取浏览器下窗口可是区域高度），ksk（可视宽）=$（window）.with()；（这里的意思是获取浏览器下窗口可是区域宽度），

我们在通过类名来获取iframe标签$(‘.kjiframe’)，再将刚刚定义的常量赋给iframe标签$(‘.kjiframe’).css({“height”:ksg,”with”:ksk});这句话的总意思就是获取浏览器下窗口区域的高和宽再把值赋给iframe标签，把iframe的高和宽设置为刚刚获取的浏览器下窗口区域的高和宽，也就是自适应可以自动识别屏幕大小从而设置成相应比例。

我们在打开index.css来设置相应的样式，*{margin：0px；padding：0px}这句话就是去除浏览器自带的外边距和内边距我们在给类名kjiframe设置背景颜色来直观表现出自适应iframe .kjiframe{background：#faa}；。

总体效果如下：

这节课内容就到这，下节课讲解移动app导航的制作。

谢谢观看，下节课见哦，记得加关注哦！！！！！！