《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作

点击整个专栏查看其它系列文章 (系列文章更新中…):《iVX 高仿美团APP制作移动端完整项目》

项目界面预览:
在这里插入图片描述

一、推荐信息制作

推荐信息与之前的标题下推荐信息制作类似:
在这里插入图片描述
此时依旧创建一个行,设置其上下左右内边距:
在这里插入图片描述
接着往行内创建一个文本,设置其字号,背景颜色:
在这里插入图片描述
其中关键的设置是设置其对应的内边距,这样才会使其有一定的宽度,还需设置对应的圆角值:
在这里插入图片描述
最后赋值多个内容即可(还需要注意行要关闭自动换行):
在这里插入图片描述

二、制作推荐商家内容

接着我们查看推荐商家的内容。我们可以发现,在此处有一个大块包裹商家的内容:

在这里插入图片描述

在此我们创建一个行命名为推荐商家:
在这里插入图片描述
接着为这个行设置高度为包裹、背景色透明以及上下左右内边距:
在这里插入图片描述
接着我们查看其内容内部,可以发现其是一个块中包裹了两个小块,这两个小块一个是左另一个是右:
在这里插入图片描述
在此我们创建一个主要包裹的行,叫做商家,内部创建两个行,一个是左侧方面另一个是右侧信息,在此设置左侧宽度为 70%,右侧为 30%,依旧设置对应的背景色等属性(不再赘述):
在这里插入图片描述
此时我们给商家这个行这是其上下左右内边距、以及上外边距,使其内部与内容有一定距离将会更加美观:
在这里插入图片描述
此时我们发现信息部分距离顶部还是有一定距离的:
在这里插入图片描述

设置信息行的上下左右内边距:
在这里插入图片描述
接着上传一张图片,该图片在上传时将会按照原比例进行显示,在此时只需要设置对应的宽高为 100% 占据整个父容器即可:
在这里插入图片描述
此时我们再查看信息部分,可以发现其右侧可以拆分为左右3个部分,分别是顶部一个部分分为左右两个小部分,下部一个部分占满整个内部行宽度:
在这里插入图片描述

那么在右侧的信息行中,创建1个顶部行,并且在这个顶部行中创建两个行,一个命名为左侧一个命名为右侧,左侧占据 70% 宽度,右侧占据 30% 宽度:
在这里插入图片描述
接着我们在到左侧内容中创建3个行,分别是 标题、分数、配送 以显示对应的内容:
在这里插入图片描述
随后添加标题文本:
在这里插入图片描述
添加分数文本,并且给予对应的颜色:
在这里插入图片描述

接着继续添加对应的文本并且给予对应的值:
在这里插入图片描述
其中一个特殊的文本我们可以给予对应的背景色、边框线、文字颜色进行设置:
在这里插入图片描述
最后我们添加敌营的优惠信息行,在其中添加对应的文本设置样式即可:
在这里插入图片描述
最后我们赋值其对应的商家,然后设置好上外边距即可:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286365.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用百度云盘API上传文件至百度云盘

一、获取Access Token示例 1. 请您将以下HTTP请求直接粘贴到浏览器地址栏内,并按下回车键。 https://openapi.baidu.com/oauth/2.0/authorize?response_typetoken&client_idL6g70tBRRIXLsY0Z3HwKqlRE&redirect_urioob&scopenetdisk 2、执行后&#x…

Docker 容器抓包

背景介绍程序在运行期间出现问题时,通常会通过抓包的方式来分析、定位问题。非容器应用一般可以通过 fiddler、wireshark 等工具进行抓包,那么,运行在容器的应用一般通过什么方式进行抓包呢?容器应用一般可以通过 tcpdump、ngrep …

服务发现与健康监测框架Consul-DNS转发的应用

关于Consul Consul是一个提供服务注册与发现,健康监测,Key/Value存储以及多数据中心存储的分布式框架。官网地址是https://www.consul.io/,公司初步应用后我们老大觉得这东西有点意思,随即有了翻译文档的想法,由于精力…

【ArcGIS风暴】ArcGIS10.6图斑椭球面积计算原理与方法

文章目录 1. 椭球面积计算原理2. ArcGIS计算图斑椭球面积3. ArcGIS计算图斑投影平面面积1. 椭球面积计算原理 <

实践 Neutron 前的两个准备工作 - 每天5分钟玩转 OpenStack(78)

上一节配置了 linux-bridge mechanism driver&#xff0c;本节再做两个准备工作&#xff1a; 1. 检视初始的网络状态。2. 了解 linux bridge 环境中的各种网络设备。 初始网络状态 我们首先考察实验环境最初始的网络状态。随着学习的深入&#xff0c;我们会对网络不断进行新的配…

《iVX 高仿美团APP制作移动端完整项目》04 美食页 标题、搜索、商家标题制作

点击整个专栏查看其它系列文章 &#xff08;系列文章更新中…&#xff09;&#xff1a;《iVX 高仿美团APP制作移动端完整项目》 项目界面预览&#xff1a; 一、美食页顶部商家页制作 1.1 页面主格调确认 该美食页为首页中美食按钮点击后进入的页面。该页面分为顶部的标题、搜…

利用浏览器调试功能 计算 百度网盘 文件数量

“百度网盘”程序做的比较烂&#xff0c;以百度的技术实力按说不应该如此。真正试了就知道真的不怎么样。为了统计百度网盘的文件写了以下脚本&#xff0c;仅供参考&#xff1a; var root "";//指定目录&#xff0c;空取当前目录 var totalCount 0; var startTime …

就在刚刚,HTTP/3 正式发布了!

经过了多年的努力&#xff0c;在 6 月 6 号&#xff0c;IETF &#xff08;互联网工程任务小组&#xff09; 正式发布了 HTTP/3 的 RFC&#xff0c; 这是超文本传输协议&#xff08;HTTP&#xff09;的第三个主要版本&#xff0c;完整的 RFC 超过了 20000 字&#xff0c;非常详细…

通渭县义岗川镇之行(2020年11月19日)

2020年11月18日&#xff0c;应邀前往通渭县义岗川镇老家&#xff0c;经过了3个小时的自驾车程&#xff0c;夜幕降临时刻到达了美丽的义岗川小镇。 义岗川镇&#xff0c;隶属甘肃省定西市通渭县&#xff0c;地处通渭县城最北部&#xff0c;东南与寺子川乡毗连&#xff0c;南邻北…

《iVX 高仿美团APP制作移动端完整项目》05 美食页商家推荐内容、分类、推荐商家制作

这一节我们将讲解美食页下半部分内容制作&#xff1a; 一、完善店铺推荐 接下来继续制作以下内容&#xff1a; 1.1 满减信息 现在咱们在对应的商家行中添加一个行&#xff0c;命名为满减&#xff0c;并且对应的更改高度为包裹&#xff1a; 随后更改其背景色、字体颜色使…

利用浏览器调试功能 计算 百度网盘 文件数量 V2

最近需要统计百度网盘里文件的数量&#xff0c;百度网盘又没有提供这样的功能&#xff0c;因此之前自己写了段脚本进行查验&#xff0c;见《利用浏览器调试功能 计算 百度网盘》。之后发现每个目录最多文件数只有1000&#xff0c;因此研究了哈百度的接口&#xff0c;重新对脚本…

Single Number II(LintCode)

Single Number II Given 3*n 1 numbers, every numbers occurs triple times except one, find it. Example Given [1,1,2,3,3,3,2,2,4,1] return 4 Challenge One-pass, constant extra space. 统计每一位上的1出现的次数&#xff0c;然后模3 &#xff0c; 题目上的3 * n 1给…

《iVX 高仿美团APP制作移动端完整项目》06 美食页商家推荐内容、分类、推荐商家制作

接下来开始制作超市便利页面&#xff1a; 一、标题 首先&#xff0c;我们创建一个页面&#xff0c;该页面设置背景颜色为黄色&#xff1a; 随后欧创建一个行&#xff0c;命名为主要&#xff0c;之后将会在这个主要行之中添加对应的模块内容&#xff1a; 该主要行&#xff…

C# 11 新特性:列表模式匹配

之前使用模式匹配&#xff0c;可以测试表达式结果是否等于指定的常量或者在某个范围内&#xff1a;public static string Demo(int number) {return number switch{100 > "A",>90 >"B",_ > "C"}; }上面的代码&#xff0c;执行逻辑如…

G2 2.0 更灵活、更强大、更完备的可视化引擎!

概述 G2作为一款技术产品&#xff0c;自诞生以来&#xff0c;服务于广大的Web工程师群体和一部分数据分析师。一直来&#xff0c;G2 因其易用的语法和扎实的可视化理论基础&#xff0c;广受使用者好评。G2 1.x 的可视化能力已经非常强大&#xff0c;使用者已经能够在掌握图形语…

《iVX 高仿美团APP制作移动端完整项目》07 会员页制作

会员页如下&#xff1a; 一、会员页标题制作 会员页的标题是顶部的提示字样&#xff0c;该字样咱们可以分析&#xff0c;可以使用两个文本组件&#xff0c;每个占据一行&#xff1a; 首先咱们创建一个页面命名为会员中心&#xff1a; 接着在会员中心下创建一个行&#xff…

【ArcGIS风暴】ArcGIS添加超链接的两种方法详解

文章目录 1. 在识别对话框中添加超链接2. 利用属性字段添加超链接在ArcGIS中,可以很方便的设置文档超链接和URL超链接,设置完成后,只需要点击某个图斑就可以跳到指定的地址。本文详细讲解ArcGIS中超链接的设置方法。 1. 在识别对话框中添加超链接 启动软件,加载甘肃省行政…

Android Studio目录结构分析

Android studio 目录结构1. .gradleGradle编译系统&#xff0c;版本由wrapper指定2. .ideaAndroid Studio IDE所需要的文件3. app3.1 app/buildapp模块编译输出的文件3.2 app/libs放置引用的类库文件3.3 app/src放置应用的主要文件目录3.4 app/.gitgnoregit使用的ignore文件3.5…

《iVX 高仿美团APP制作移动端完整项目》08 会员页 标题、会员卡 制作

一、分类制作 我们接着往下制作该页的下半部分内容&#xff1a; 由于对应最下部分的商家推荐重复&#xff0c;直接复制即可&#xff0c;在此不做过多的讲解&#xff1a; 接下来我们创建一行命名为内容&#xff0c;用以作为下半部分的容器&#xff1a; 接着我们制作第一个种…

微软AI插件Github Copilot初体验

前言上个月看到了一款插件 微软 GitHub AI 编程工具 Copilot于是就想尝尝鲜&#xff0c;但是GitHub Copilot是需要申请的&#xff0c;只有申请通过的才能使用这款插件。就在今天我收到审核通过的邮件。于是想看看这插件是不是像其它网友说的那样强&#xff01;使用于是打开了我…