宜宾网站建设公司

WebApp(JqueryMobile)实战(一)-创新互联

其实WebApp这个版块已经放置一段时间了，但是一直没有写文章，那是因为我还在学习中。今天的话，我们就来写一篇关于布局的，以前在没有BootStrap，Jquery EasyUI，Jquery Mobile之前不论是做web项目还是web 移动站点都是那么费劲，尤其是我这种学不会css的人，实在是搞不了前台。OK，废话不多说，我们来看一下今天要仿制的页面，手机头条网。

创新互联服务项目包括靖江网站建设、靖江网站制作、靖江网页制作以及靖江网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，靖江网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到靖江省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

WebApp(JqueryMobile) 实战(一)

看到了吧，这个界面如果用BootStrap的话可能更简单一些，因为它是单纯的三列或者两列布局，利用Bootstrap的网格系统可以很好的布局出来。那今天的话还是用Jquery Mobile css。

首先看一下最顶端的头部，我的代码如下

@section Header
{
    
        
            
            今日头条             
        
                              
     }

其实这里我们使用Jquery Mobile css中的一些样式及属性。我们看一下data-role="header"

WebApp(JqueryMobile) 实战(一)

在这里我们设置头部不会在点击屏幕的时候缩回去data-tap-toggle="false"，这样当页面内容随着滚动条上移时，会被头部盖住。data-theme="f"这个是我自己定义的主题，主题可以是a-z。而Jquery Mobile css默认只提供了五种主题。

WebApp(JqueryMobile) 实战(一)

所以f需要自己定义，我们来看一下

.ui-bar-f {
    background-color: red;
    color: white;
    font-weight: bold;
    height:45px;
    font-family:微软雅黑;
}

.img-corner {
    border-radius: 50%;
}

.a-header {
    text-decoration:none;
    color:white;
}

body {
    font-family:微软雅黑;
    background-color:white;
}

.img-shrink {
    height:150px;
    width:100%;
    border:1px solid white;
}

.news-footer {
    font-size:10px;
}

第一个css就是我们自己定义的主题，必须是以ui-bar-[a-z]来命名。头部的话在这里共分了三列，因为我们的第一个div是 

这个css就把屏幕分成了相等的三份。

WebApp(JqueryMobile) 实战(一)

然后我们在每一份放我们的元素。

WebApp(JqueryMobile) 实战(一)

效果如上，那么这个圆圈图片是怎么实现的呢，很简单，css3很好实现，将下面的css应用到图片即可。

.img-corner {
    border-radius: 50%;
}

OK，头部还有一个Nav bar，这个其实将div的data-role设置为navbar，然后在div中嵌套

                                                                                                                                                                                   《芈月转》孙俪近照曝光网友:太美了！                                                                125                                                                                                                                                 初二女生收到情书，超牛老妈只说了五句话！                                                                751                                                                                                                                                 那些发生在汽车历史上的第一次！                              推广                 上海通用                                  751                                                                                                                      

其实我们观察一下，就会发现，第一行是标题，第二行是三个图片，第三行是一些其他的信息。

那么第一部分我们布局就可以采用

完成这三部分。第一行没什么说的，第二行我们使用网格系统，将屏幕分成三列，每列一张图，最后一行需要注意这个"刚刚+"是在右边，需要使用float="right"，看一下效果

WebApp(JqueryMobile) 实战(一)

怎么样，还行吧。OK，我们接着看下面的布局，下面的布局我在使用Jquery mobile的网格系统的时候没有查到像BootStrap那样的跨列功能。所以我暂时先用50%/50%的网格。

第一个网格我们放置文字，第二个网格我们放置图片。

WebApp(JqueryMobile) 实战(一)

需要注意的是上面的两个height，我们设置总高度为150，设置文字的高度为135，那么小文字的高度为15，此时我们设置小文字所在的层的float:left，因为高度不够，它就会自动沉底。

WebApp(JqueryMobile) 实战(一)

如上图，小字都沉底了。OK，其实真个头条网都采用这样的布局方式，其实我们只需要在数据库表创建好类型(是一行文字+一行3图片+小字或者是左边文字(打字加小字)+右边图片)，标题，小字内容，图片我们就可以动态生成或者加载页面，这个是我下节要实现的内容。

最后我们还给这个页面加了foot。

@section Footer
{
    
        
头条网，一个神奇的网站！

    
}

WebApp(JqueryMobile) 实战(一)

头条网，一个神奇的网站。这个脚我们设置点击屏幕时该脚会收缩。好了，我们看一下全部页面的效果

WebApp(JqueryMobile) 实战(一)

收缩掉脚，我们再看看

WebApp(JqueryMobile) 实战(一)

OK，页面今天就到这里，最后告诉大家怎么创建移动项目的

WebApp(JqueryMobile) 实战(一)

点击确定

WebApp(JqueryMobile) 实战(一)

选择移动应用程序，确定，项目就创建好了。

最后，大家如果需要源码的话去下载，下载请点击这里源码

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网站标题：WebApp(JqueryMobile)实战(一)-创新互联
分享URL：http://ybzwz.com/article/ceejpi.html

其他资讯