手把手教你做手机婚恋网热衷理财的技术渣渣

我们在上面有说到要使用em来处理，因为em会获取上级的百分比进行自动计算，另外如果我们能够获取当前移动屏幕高度的像素，并把高度的像素平均分成几份那么不就可以保证模块在屏幕中所占的百分比，即位置是确定的，其他的整体布局也会跟着变化，JS代码如下：

$(function(){varfontsize=window.screen.height/30;$(".container").css("fontSize",fontsize);})

其中我们为什么要获取屏幕在除以30呢？最主要的原因还是个人的原因，因为我的调试环境是在iphone4下面进行的，iphone4的height值是480像素，所以除以30刚好也就是16像素，这根默认的像素值是一直的，也是为了方便我在后面的em与px之间的换算，当然这个fontsize不一定要跟我一样，主要是看你的习惯。

首页的的基本结构也已经搭建好了，这时我们应该将body的background设置为white，yellow只是为了让效果更为明显而已

在头部我们应该要包括一个地区的选择按钮，一个搜索框，和一个性别的选择按钮

各部分的设计如下：

地区选择按钮：点击跳转到相应的页面，左边距5px

搜索框：点击跳转到相应的页面

性别选择按钮：点击跳转到相应的页面，右边距5px，

代码如下：

HTML代码：

*{margin:0;padding:0;}/*header*/#header{height:2em;line-height:2em;width:100%;background:#339EE2;color:#FCECDF;}#area{margin-left:0.5em;}#sex{margin-right:0.5em;}#search{margin-left:0.5em;width:-webkit-calc(100%-9em);height:1.2em;}#search>input{width:100%;height:1.2em;line-height:1.2em;padding-top:0.3em;font-size:0.8em;border-radius:0.5em;box-shadow:00.125em2px#ccc;}/*container*/#contain{min-height:50em;width:100%;background:#FCECDF;}/*footer*/#footer{position:fixed;left:0px;bottom:0px;height:2.5em;line-height:2.5em;width:100%;background:#339ee2;color:#FCECDF;vertical-align:center;text-align:center;}/*other*/.fl{float:left;}.fr{float:right;}

其中的CSS代码我们要注意一下规范，就是对各部分的CSS样式进行分开注解一下，这样有利于以后的代码维护

JS代码

$(function(){varfontsize=window.screen.width/20;$("body").css("fontSize",fontsize);$("#search>input").css("height",fontsize*1.2);$("#footer").click(function(){//alert("该内容未设置");});})好的我们来运行一下结果看看，结果如下所示：

由于整个项目可能会比较冗余，这里我们就挑选几个功能进行讲解，其他的功能会在后面提供源代码供大家下载

这里我们挑选比较有代表性的“全国”和底部栏进行更进一步的讲解，“全国”这个相信大家都会知道这个所要实现的功能是什么，底部栏“我也恋爱”要实现的是相当于注册的功能，其他的细节如下：

“全国”：跳转到相应页，相应页中有，省份、城市等信息，底部有确定和取消按钮，右上角有一个红X用来取消，左上角有一个返回按钮，背景不透明

“我也恋爱”：跳转到相应页，相应页中有姓名，年龄，匹配范围等设置，有确定和取消按钮，右上角有一个白色的X，背景为透明

好了基本的细节就是这样了，其他的一些细节我们就来自由发挥

那么我们就来看一下我们所实现的“全国”相应页面的效果图：

其中我们虽然实现了大部分的页面上的基本功能，但是省市联动这一块我们是没有实现的，具体的实现方法请自行百度解决，这个问题在网上的教程比较多

HTML核心代码：

核心CSS代码：

.cityheader{height:2em;line-height:2em;width:100%;background:#339EE2;color:#FCECDF;}#return{margin-left:0.5em;}.area{line-height:2em;padding-left:35%;color:#FCECDF;}.closespan{margin-right:0.5em;line-height:2em;color:#FCECDF;}#hr1{border:0.125emdashed#D7AE53;margin-top:3em;}#hr2{border:0.125emdashed#D7AE53;margin-bottom:3em;}.cityfooter{position:fixed;left:0px;bottom:0px;height:2.5em;line-height:2.5em;width:100%;background:#339ee2;color:#FCECDF;vertical-align:center;text-align:center;}#selectarea{margin:1em1em;}.table{cellspacing:10%;}.xiala{height:1.5em;width:13em;}#hot{margin-left:2em;margin-top:3em;margin-bottom:1em;}#hot>a{text-decoration:none;}

由于Jq代码比较少，就直接全部拿出来展示

jquery代码

$(function(){varfontsize=window.screen.width/20;$("body").css("fontSize",fontsize);$("#search>input").css("height",fontsize*1.2);$(".xiala").css("height",fontsize*1.2);$("#footer").click(function(){//alert("该内容为设置");});$(".address").click(function(){$("#main").addClass("hide");$(".city").slideToggle();});$("#return").click(function(){$("#main").removeClass("hide");$(".city").slideToggle();});$(".close").click(function(){$("#main").removeClass("hide");$(".city").slideToggle();});})

我们最后实现的效果大致如下所示：

我们在实现这个效果的时候，是通过实现三层盒子模型来实现的，最底下是首页层，然后是一层高斯模糊的滤镜层，但是直接在滤镜层上面写姓名等信息会导致字体模糊等问题，所以我们就创建第三层，也就是你所看到的黄色的区域内的内容，在实现这三层关系的时候我们采用的布局是absolute，但是经过实践发现，黄色的区域会被显示在滤镜层的下面，所以我们可以通过z-index属性来把黄色层提到最上面