《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程
点击整个专栏查看其它系列文章 （系列文章更新中…）：《iVX 高仿美团APP制作移动端完整项目》
项目界面预览：
一、创建项目
首先打开在线编辑器地址：https://editor.ivx.cn/
随后登录帐号后创建一个相对应用项目，并且给予一个项目名称：
点击创建后进入线上IDE：
接着选择对象树中的前台，为其创建一个页面：
随后选择页面，邮件重命名，命名为首页：
二、添加基本背景
我们可以观察页面，发现当前首页可以分为标题和下面的内容页：
在此我们先创建一个行，该行将会包含“标题”以及“内容”两个区域：
此时我们在行的属性面板中找到对应的背景色，将其值拖拽至最左侧，将会使其背景色透明：
此时该行会有高度，我们可以在行属性中的高度中设置其属性为包裹，设置包裹后其中的内容有多高，那么该行的高度就会随着其内容的高度改变：
急着我们点击首页设置其背景颜色：
三、设置标题内容
此时我们已经完成了背景和主要容器的添加，此时我们在主要行中，添加一个行，重命名为标题：
在此我们可以分析一下该行的区域分布，我们可以分布为左和右，那么我们即可在这个行中再添加两个行，一个命名为左，一个命名为右：
添加完毕后如下：
此时我们可以发现由于行本身占据了一定的宽度，左右分别占据了两行，这两行我们需要将其并为一行；我们在此分析，在当前标题内容中，左侧为大部分内容，右侧为小部分内容，我们可以将左侧的行的宽度设置为 90%，右侧行的宽度设置为 10%，此时页面中两行内容将会显示在一行之中：
此时行的宽度太高，我们将其标题行的宽度设置为 40px：
但由于标题行中的左右两行明显其本身占据了一定高度，所以会超出显示，在此我们将左右两行的高度设置为包裹：
此时还有最后一个因素需要解决，咱们将标题行中的所有行（包括标题行）的背景色全部设置为透明：
接着我们查看原网页，可以得知原网页的标题左侧为一个 icon 图标，接着是一个文本，最右侧是一个箭头图标：
此时我们点击行，在其中添加图标：
接着我们在图标样式中找到 location，并且设置，并对其更改对应的大小：
接着添加文本内容以及箭头图标（自己需要设置其大小）：
此时我们发现，当前内容并不垂直对其，我们只需要设置其父容器为垂直居中即可：
接着我们再到右边添加一个图标为 bell 即可：
为了保证其靠右显示并且垂直居中，需要对其行进行对其的设置：
接着由于其内容太贴近于左右两侧，我们需要设置其父容器，也就是标题行，设置标题行的左右上下内编剧：
设置完之后效果如下：
《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程相关推荐
- 《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.推荐信息制作 推荐信息与之前的标题下推荐信息制作类似: 此时依旧创建一 ...
- 《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.搜索制作 在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索 ...
- 《iVX 高仿美团APP制作移动端完整项目》04 美食页 标题、搜索、商家标题制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.美食页顶部商家页制作 1.1 页面主格调确认 该美食页为首页中美食按钮 ...
- 《iVX 高仿美团APP制作移动端完整项目》05 美食页商家推荐内容、分类、推荐商家制作
这一节我们将讲解美食页下半部分内容制作: 一.完善店铺推荐 接下来继续制作以下内容: 1.1 满减信息 现在咱们在对应的商家行中添加一个行,命名为满减,并且对应的更改高度为包裹: 随后更改其背景色.字 ...
- 《iVX 高仿美团APP制作移动端完整项目》09 订单页制作
订单页制作比较简单,界面如下: 一.标题 首先创建一个页面,命名为订单页,并且给予背景色为黄色: 随后创建一个行,命名为主要并给予对应的基础属性: 接着给予这个主要行对应的上下内边距使其给顶部具有与元 ...
- 《iVX 高仿美团APP制作移动端完整项目》08 会员页 标题、会员卡 制作
一.分类制作 我们接着往下制作该页的下半部分内容: 由于对应最下部分的商家推荐重复,直接复制即可,在此不做过多的讲解: 接下来我们创建一行命名为内容,用以作为下半部分的容器: 接着我们制作第一个种类, ...
- 《iVX 高仿美团APP制作移动端完整项目》06 美食页商家推荐内容、分类、推荐商家制作
接下来开始制作超市便利页面: 一.标题 首先,我们创建一个页面,该页面设置背景颜色为黄色: 随后欧创建一个行,命名为主要,之后将会在这个主要行之中添加对应的模块内容: 该主要行,属性需要设置背景色为透 ...
- 基于Vue全家桶制作的的高仿美团APP
美团外卖APP ? 项目演示地址:http://39.108.232.27:9000 ? GitHub:github.com/bxm0927/vue- 基于 Vue 全家桶 (2.x) 制作的美团外卖 ...
- 高仿微信APP实战（一）-Actionbar的制作与应用
高仿微信APP实战(一)-Actionbar的制作与应用 本文是仿微信app实战系列的第一部分,先从简单的做起,边做边学习.从顶部actionbar开始,先看一下效果图: 一.定义主题样式 <r ...
最新文章
- 比特币：区块链的最基础实现
- Android控件系列之RadioButtonRadioGroup
- JavaScript函数节流和函数防抖
- .NET Core 中如何在运行中加载 Controller ？
- spring jms 事务_Spring JMS：处理事务中的消息
- hibernate 继承映射(二)
- Interactive cloth
- [HDU3683 Gomoku]
- MySQL中serial关键字的作用
- pathy和c语言表达式,python学习(2)–变量与表达式
- BoF and Bos
- 激活win10专业版最简单的方法
- 未能找到主机服务器怎么回事,未能找到主机名的服务器怎么解决
- Mac怎么切换主显示器 Mac设置主显示器
- Rails Controller中的concerns测试编写
- 2022-01-19：青蛙过河。 一只青蛙想要过河。 假定河流被等分为若干个单元格，并且在每一个单元格内都有可能放有一块石子（也有可能没有）。 青蛙可以跳上石子，但是不可以跳入水中。 给你石子的位置列
- PHP通过HTTP_USER_AGENT判断是否为手机移动终端的函数
- HLSL 学习笔记7 Light Mode
- Java毕设项目保险公司风险测评管理系统计算机（附源码+系统+数据库+LW）
- 复试经验贴 （计算机学院综合面试以及英语面试问题）