HBuilder开发词典app（一）--基本页面布局

首先下载HBuilder；
在红色➕号按钮下新建移动app，选择mui项目，确定，然后去掉不需要的js和css，并添加h.js和一些我们用到的图片，代码图片自取：https://github.com/lightTrace/Hbuilder-app

首先index.html是整个app的入口页面，header有两个div，一个是书本样式的logo和红色背景，一个是搜索框，下面的四个nav可以通过mtab自动补全hbuilder的底部选项卡：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><link href="css/mui.css" rel="stylesheet"/></head>
<body><header class="mui-bar mui-bar-nav hBg"><div id="logo"><img src="imgs/logo.png"/></div><div id="searchBut">请输入要翻译的文本</div></header><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-compose"></span><span class="mui-tab-label">词典</span></a><a class="mui-tab-item"><span class="mui-icon mui-icon-star"></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><script src="js/mui.min.js"></script><script type="text/javascript" charset="utf-8">mui.init();</script>
</body>
</html>

然后是通过在mui.css中添加部分css样式实现我们要的效果，主要在mui.css的5612行开始写我们自己的css，大家可以自己调节：

.hBg{background:#F03844 !important;}#logo{width:44px; height:44px; float:left;overflow:hidden;}
#logo img{height:44px; width:44px;}
#searchBut{width:70%; height:30px; line-height:30px; margin:7px; border-radius:30px; float:right; background:url(../imgs/searchBut.png) no-repeat 8px center #FFFFFF; background-size:auto 68%; padding-left:35px; color:#6D6D72; font-size:14px;}

连接手机后可以ctrl+r真机调试，也可以在右边选择边看边改查看效果：

HBuilder开发词典app（一）--基本页面布局相关推荐

混合App开发，HBuilder开发移动App
使用HBuilder开发混合App: Hbuilder:是一个在线打包工具,不需要在本地配置开发环境:直接将做好的网站,通过一些简单的操作,就能在线打包为一个App: 混合APP开发常见技术:Html ...
使用HBuilder开发移动APP
前言 HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写,它基于 ...
hbuilder 开发5+ APP采坑记录
开发一款APP产品需要在安卓和苹果2大平台发布,同时开发团队也需要有安卓和IOS. HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种Ap ...
Hbuilder开发移动App（1）
奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟 ...
微信开发之小程序的页面布局
flex布局用途:快速实现你所需要的布局(水平居中.垂直居中.左右对齐等) 居中布局实现: 1.对布局容器设置display:flex; 2.利用属性(justify-content(水平方向)和 ...
Hbuilder开发HTML5 APP之打开新页面
mui.openWindow({url: 'examples/info.html', id:'info' }); 要在页面间传递参数,需要使用一个extras:{}对象另外打开的页面显示的内容必须装在 ...
Hbuilder开发HTML5 APP之图标和启动页制作
1.点击项目下的"manifest.json"文件,会出现自动化的配置工具: 2.点"图标配置",上传制作好的图标文件,自动生成不同大小的ico,这个要赞下! ...
mui开发项目流程_【经验分享】用HBuilder开发的基于MUI和H5+的APP开发及上架经历...
一.写在前面 2017年,个人最大的收获,是第一次完成了这一款APP的开发并顺利上架,同时获得了还算可观的收益. 这是我前公司的项目,公司的主营业务是旅游,并不是什么科技公司,我之前一直在公司任职技术 ...
用HBuilder开发的基于MUI和H5+的APP开发及上架经历
一.写在前面 2017年,个人最大的收获,是第一次完成了这一款APP的开发并顺利上架,同时获得了还算可观的收益. 这是我前公司的项目,公司的主营业务是旅游,并不是什么科技公司,我之前一直在公司任职技术 ...

HBuilder开发词典app（一）--基本页面布局

HBuilder开发词典app（一）--基本页面布局相关推荐

最新文章

热门文章