使用HTML5开发App（二）

这个章节呢我主要是跟着大家一块儿来搭建一下网易新闻客户端的界面（注意是界面，没有后台数据，数据会在下一篇文章中讲到）

网易新闻

首先来分析一下他的结构，它是最经典的App布局，上面导航栏，轮播图，中间列表，下边Tab切换，这里我们用MUI框架搭建，来感受一下MUI的牛逼之处吧。
第一步：完成上面导航栏部分MUI框架里面有直接封装好的，在HBuilder里面也有快捷键，直接打MH看下效果

标题

这个时候标题栏就出来了，网易新闻的标题栏中间‘网易’两个字是个图片，那我们也来添加一张图片，这里的图片是从网易新闻的ipa包里面获取的，如果大家不会的话可以看以下我的教程 http://www.jianshu.com/p/8c3490eac56f
HTML代码：

第一步

这个时候图片已经添加上去了，运行看一下，发现好丑啊，图片怎么这么大？好吧，我也这么认为的，那来通过CSS来调一下图片的尺寸和标题栏背景色。
CSS代码：

修改过样式之后我们来看下效果

第二步

嗯哼...比刚才好看多了
到现在还没有完成，标题栏两侧有两个小图标，这里我只添加右侧的按钮。左侧思路一样所以就不在这里面废话了。
右侧‘搜’图标还是在标题栏里面，所以我们在header标签里面添加一个div
HTML代码：

CSS代码：

   .login_img img{
           width: 37px;
           height: 37px;
           margin:1% 0 0 91%;
           cursor: pointer;
       }

标签和样式都修改之后，标题栏基本上就搞定了，继续来写导航，我这里面的导航写的属于MUI框架中主体部分，所以要用MUI的框架，输入mbody出现

标签，剩余的内容在这大的DIV中写
HTML代码：

CSS代码：

    .tab_title a{
            color: black;
            margin:0 0 0 6%;
            line-height: 40px;
        }
        .tab_title a:hover{
            color: #dc3137;
        }

写到这里感觉效果还是挺好的哈。

第四步

Come on，下一步来写轮播图

哇！好简单啊，有没有这种感觉啊？马上一个App的界面搭建就完成了

第五步

下一步来新闻写列表，同样MUI提供了图文列表，输入ML来试一下


            
                
                    
                    
                        标题
                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    
                
            
           
                
                    
                    
                        标题
                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    
                
            
            
                
                    
                    
                        标题
                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    
                
            
            
                
                    
                    
                        标题
                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    
                
            
            
                
                    
                    
                        标题
                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    
                
            
            
                
                    
                    
                        标题
                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    
                
            
            
                
                    
                    
                        标题
                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    
                
            
            
                
                    
                    
                        标题
                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

第六步

一个小的demo马上成型了，最后一步就是TabBar了，继续
HTML代码：

由于tabBar的颜色刚才我们设置为红色的，现在通过CSS来改变下底部TabBar的颜色
CSS代码：

        .mui-tab-item {
            background-color: white;
        }

界面搭建完成

好了大功告成，但是有一点儿欠缺的就是下面的TabBar的图标与我们想要的不一样，而且MUI中没有提供太多的图标。怎么办呢？
下一章节中我会专门写一篇文章介绍怎么替换图片。

下集预告：使用Ajax请求数据并且赋值，让它看起来像是一个真正的App。

未完待续...

使用HTML5开发App（二）

你可能感兴趣的:(使用HTML5开发App（二）)