html小集HBuilder❀⚘工༵具༵开༵发༵H༵T༵M༵L༵5༵⚘❀Hbuilder+MUI开发5+app

使用HTML5开发App（二）

2016-03-03  本文已影响3887人  陶好达

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

网易新闻 首先来分析一下他的结构，它是最经典的App布局，上面导航栏，轮播图，中间列表，下边Tab切换，这里我们用MUI框架搭建，来感受一下MUI的牛逼之处吧。
第一步：完成上面导航栏部分MUI框架里面有直接封装好的，在HBuilder里面也有快捷键，直接打MH看下效果 标题
这个时候标题栏就出来了，网易新闻的标题栏中间‘网易’两个字是个图片，那我们也来添加一张图片，这里的图片是从网易新闻的ipa包里面获取的，如果大家不会的话可以看以下我的教程http://www.jianshu.com/p/8c3490eac56f
HTML代码： 
<body>

    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">
                <img src="imgs/navbar_netease@2x.png"/>
        </h1>
    </header>
</body>
第一步

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

 <style type="text/css">
        .mui-bar{
           background-color: #dc3137;
         }
    .mui-title img{
            margin-top: 4%;
            width: 14%;
        }
    </style>

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


第二步

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

<body>
   <header class="mui-bar mui-bar-nav">
       <!--中间“网易log”-->
       <h1 class="mui-title">
               <img src="imgs/navbar_netease@2x.png"/>
       </h1>
       <!--右侧“搜”图标-->
       <div class="login_img"><img src="imgs/login_username_icon@2x.png"/></div>
   </header>
</body>

CSS代码：

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

标签和样式都修改之后，标题栏基本上就搞定了，继续来写导航，我这里面的导航写的属于MUI框架中主体部分，所以要用MUI的框架，输入mbody出现<div class="mui-content"></div>标签，剩余的内容在这大的DIV中写
HTML代码：

<div class="mui-content">
        <div>
            <div class="tab_title">
                <a>头条</a>
                <a >热点</a>
                <a >娱乐</a>
                <a >财经</a>
                <a >体育</a>
                <a ><img src="imgs/comment_arrow_down@2x.png"/></a>
            </div>
        </div>
</div>

CSS代码：

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

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

第四步

Come on，下一步来写轮播图

<div class="mui-slider ">
           <div class="mui-slider-group">
                   <div class="mui-slider-item">
                   <a href="#">
                       <img src="http://img2.imgtn.bdimg.com/it/u=3435748019,1733487343&fm=21&gp=0.jpg">
                       <p class="mui-slider-title">标题1</p>
                   </a>
               </div>
               <div class="mui-slider-item">
                   <a href="#">
                       <img src="http://img1.imgtn.bdimg.com/it/u=933204148,833772717&fm=21&gp=0.jpg">
                       <p class="mui-slider-title">标题2</p>
                   </a>
               </div>
               <div class="mui-slider-item">
                   <a href="#">
                       <img src="http://img0.imgtn.bdimg.com/it/u=522735967,1809391751&fm=21&gp=0.jpg">
                       <p class="mui-slider-title">标题3</p>
                   </a>
               </div>
           </div>
           <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
           <div class="mui-slider-indicator">
               <div class="mui-indicator mui-active"></div>
               <div class="mui-indicator"></div>
               <div class="mui-indicator"></div>
           </div>
       </div>

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

第五步

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

<ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img2.imgtn.bdimg.com/it/u=2532707366,72783300&fm=11&gp=0.jpg">
                    <div class="mui-media-body">
                        标题
                        <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    </div>
                </a>
            </li>
           <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img2.imgtn.bdimg.com/it/u=2532707366,72783300&fm=11&gp=0.jpg">
                    <div class="mui-media-body">
                        标题
                        <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img2.imgtn.bdimg.com/it/u=2532707366,72783300&fm=11&gp=0.jpg">
                    <div class="mui-media-body">
                        标题
                        <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img2.imgtn.bdimg.com/it/u=2532707366,72783300&fm=11&gp=0.jpg">
                    <div class="mui-media-body">
                        标题
                        <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img2.imgtn.bdimg.com/it/u=2532707366,72783300&fm=11&gp=0.jpg">
                    <div class="mui-media-body">
                        标题
                        <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img2.imgtn.bdimg.com/it/u=2532707366,72783300&fm=11&gp=0.jpg">
                    <div class="mui-media-body">
                        标题
                        <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img2.imgtn.bdimg.com/it/u=2532707366,72783300&fm=11&gp=0.jpg">
                    <div class="mui-media-body">
                        标题
                        <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img2.imgtn.bdimg.com/it/u=2532707366,72783300&fm=11&gp=0.jpg">
                    <div class="mui-media-body">
                        标题
                        <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    </div>
                </a>
            </li>
        </ul>
第六步

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

<nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>

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

        .mui-tab-item {
            background-color: white;
        }
界面搭建完成

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

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

未完待续...

上一篇 下一篇

猜你喜欢

热点阅读