WebApp(JqueryMobile) 实战(二)
天比较冷，在这里我就不费话了，本片还是介绍前台布局，看下图，用过Android手机的用户都知道打开UC浏览器之后会出现下面的网址导航界面。
看到了吧，就是这两张，一个是主界面，一个是展开Collapse后的界面。
OK，那么我们先看一下第一张图的布局，首先先看一下head部分，引用了JqueryMobile的css以及JqueryMobile js还有一个angular.js，一个诞生于2009的web前端框架，后被google收购发展壮大。style部分是我自己定义的一些css样式
@{Layout = null;
}
Main @Styles.Render("~/Content/mobileCss", "~/Content/css")@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/jquerymobile")>.img-app {width: 18px;height: 18px;vertical-align: middle;}.img-app-word {font-family: 微软雅黑;font-size: 14px;vertical-align: middle;}.ui-grid-x-margin {margin-top: 10px;}hr {margin: 15px 5px 0px 5px;}
OK，Head没什么可说的。接下来我们先看顶部天气部分。
5℃西安 -5℃-5℃45优 天气部分，我们采用了蓝底白字的主题(data-theme="b")，并且是始终显示在页面上的，不会随着滚动条的拉动而消失。OK，这里我们为了使得文字在div中居中，我们设置height和line-height的值都是40px。然后距左右各5px，html中的margin是上右下左的顺序，而silverlight是左下右上的顺序，别搞混了。然后我们还是让晴天向右漂浮，看一下效果
怎么样，还行吧。OK，我们接着往下看，看搜索部分
搜索 很简单，一个input type="search"，并设置未输入前的文字是"输入关键词"。然后search按钮其实是一个超链接设置其data-role="button"，再设置icon就行了。icon有如下这么多，你可以随便设置。
ok，搜索做好后，它的效果如下
大家看到，放到了两行上，那么为什么会这样，我也不知道，下回再讲。
接下来我们就要看新浪，百度等等12个站点超链接是怎么实现的。大家其实看过上一篇文章的话应该知道Jquery Mobile的网格系统。是的，在这里我要将屏幕分成4份。
那么我们会使用ui-grid-c这个css将div分成四份。
新浪 
