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

接下来开始制作超市便利页面:
在这里插入图片描述

一、标题

首先,我们创建一个页面,该页面设置背景颜色为黄色:
在这里插入图片描述
随后欧创建一个行,命名为主要,之后将会在这个主要行之中添加对应的模块内容:
在这里插入图片描述
该主要行,属性需要设置背景色为透明,并且高度为包裹,不能覆盖对应的背景颜色:
在这里插入图片描述
我们在主要行中添加一个行命名为标题,并且设置背景色为透明,高度为 40px:
在这里插入图片描述
随后添加一个文本以及一个图标:
在这里插入图片描述
此时我们发现文本和图片垂直方向不一致,直接设置标题这个行的垂直对齐属性为居中即可:
在这里插入图片描述

二、 内容行制作

接着我们查看内容部分的搜索框在一个白色背景并且圆角包裹的容器之中:

在这里插入图片描述
此时我们应该先创建一个行,命名为内容并且给予背景色为白色:
在这里插入图片描述
接着找到对应的圆角区域给予圆角为 30px,并且取消底部两个圆角应用:
在这里插入图片描述
此时页面如下:
在这里插入图片描述

三、 搜索框制作

接着咱们往这个行中添加一个行,命名为搜索框:
在这里插入图片描述
再往这个搜索框中添加一个按钮和一个输入框:
在这里插入图片描述
接着给予这个搜索框的背景色为透明,并且使搜索框的内容水平居中对齐,高度为包裹:
在这里插入图片描述
此时我们发现当前搜索框距离顶部太近,给予一个搜索框行的伤内边距即可:
在这里插入图片描述
在这一步最后,我们还需要把内容块的高度更改为包裹,使其可以跟随内部元素的高度增加而增加:
在这里插入图片描述

四、 轮播图制作

接着咱们开始制作轮播图:
在这里插入图片描述
轮播图制作较为简单,我们先创建一个行,命名为轮播图,并且设置其背景色和高度包裹:
在这里插入图片描述
接着我们找到扩展组件的轮播页容器,并且使其添加到该行之中:
在这里插入图片描述
此时发现轮播页高度太大:
在这里插入图片描述
更改其对应的高度即可,在这里更改高度为 100px:

在这里插入图片描述
随后我们点击轮播页上传对应的图片:
在这里插入图片描述
两张图片上传完毕后如图所示为结果,并且可以点击对应的按钮对图片进行查看:
在这里插入图片描述
在此我们发现,轮播页距离顶部搜索框太过贴近,并且左右边缘太过挨近,咱们更改轮播图行对应的上下左右外边距即可:
在这里插入图片描述

五、 种类信息制作

接下来咱们制作种类信息,在这里只需要对应的上一节章节的种类复制两行过来即可:
在这里插入图片描述
复制完毕如下:
在这里插入图片描述

六、 广告制作

在这里插入图片描述
这一部分直接使用一个行,设置其背景色即可,不再过多赘述:
在这里插入图片描述

七、 店家制作

点击与上一节店家制作方法一致,直接复制删除对应的头部绝对定位图片即可:
在这里插入图片描述
复制删除完毕如下:
在这里插入图片描述

八、 推荐店家

剩下的内容也基本上与上一节类似,在此直接复制:
在这里插入图片描述

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

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

相关文章

统计百度网盘文件个数 V3

继续优化/******************** *百度文件数量统计 V3 *2018.06.18 *Jackie ********************//************ *百度查询接口 http://pan.baidu.com/api/list? dir //查询目录 &num100000 //分页大小 最大支持99999999999999 默认1000 &page1 //页码 &…

C语言试题十五之编写函数void function(int x,int pp[],int *n),求出能整除x且不是偶数的各整数,并按从小到大的顺序放在pp所指的数组中,这些除数的个数通过形参n返回

✅作者简介:大家好我是码莎拉蒂,CSDN、华为云、阿里云、51CTO博客专家🥇🥇🥇 📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 1、 题目 请编写函数void function(int x,int pp[]…

【专升本计算机】甘肃省专升本计算机C语言经典程序案例代码合集(持续更新)

文章目录 1. 第一个C语言程序2. 打印汉字表3. 打印如下图形4. 打印九九乘法表5. 水仙花数6. 输入年份,判断是否为闰年7. 两个数交换8. 三种循环结构求1-100之和9. 一维数组初始化并全部输出10. 自定义求和函数11. 获取数据类型的大小12. 判断一个数a是否同时被3和5整除13. 求5…

Android在第三方应用程序系统应用尽早开始,杀死自己主动的第三方应用程序,以重新启动...

1.为什么第三方应用程序可能早于System的app启动? Android能够查阅了,这里就不细述了,这里不阐述ROM启动还有bootloader。软件启动的大致流程应该是 启动kernel执行servicemanager 把一些native的服务用命令启动起来(包…

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

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

装饰一个类及内部方法

通过装饰器函数修改一个类属性class MyClass:NAME My CLASS HAHAHAdef __init__(self):passprint(MyClass.__dict__[NAME])My CLASS HAHAHA等价于:def setname(name):def warpper(cls): cls.NAME namereturn clsreturn warppersetname(MY CLASS enen) #class M…

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

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

C语言试题十六之写删除字符串中指定下标的字符。其中,a指向原字符串,删除后的字符串存放在b所指的数组中,n中存放指定的下标。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

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

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

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

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

Android Studio目录结构分析

Android studio 目录结构1. .gradleGradle编译系统,版本由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 会员页 标题、会员卡 制作

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

C语言试题十七之用来求数组的最大元素在数组中的下标并存放在k所指的储存单元中

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…

微软AI插件Github Copilot初体验

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

Firefox about

在firefox的地址栏输入about:about,然后看一下各个链接.有的链接有具体的用途,有的链接疯言疯语,并无软用. about:about集中了火狐浏览器的全部用户界面,平时常见的preferences,startpage,add-ons等都可以在此处见到. about:mozilla是mozilla之书,它仿照圣经的语言风格,讲述了m…

关于互斥锁,条件变量的内核源码解析

一、解决问题和适用范围 主要是用来等待一个条件,这个条件可能需要另一个线程来满足这个条件。这个和我们平常适用的pthread_mutex_lock的最大不同在于后者保护的一般是一个代码段(也就是关键区),或者一个变量,但是由于一般来说这个变量的访问…

【CASS精品教程】CASS 9.2绘制地籍图详细实验案例教程

文章目录 4.1 绘制地籍图4.1.1 生成平面图4.1.2 生成权属信息数据文件4.1.3 绘权属地籍图4.1.4 图形编辑4.3 绘制宗地图4.3.1 单块宗地4.3.2 批量处理4.4 绘制地籍表格4.4.1 界址点成果表4.4.2 界址点坐标表4.4.3 以街坊为单位界址点坐标表4.4.4 以街道为单位宗地面积汇总表4.4…

jquery.cookie.js 使用小结

先引入jquery,再引入:jquery.cookie.js添加一个"会话cookie"$.cookie(the_cookie, the_value);这里没有指明 cookie有效时间,所创建的cookie有效期默认到用户关闭浏览器为止,所以被称为 “会话cookie(sessio…

Android开发 人民币符号(¥)显示不一致的问题

不小心踩了个坑,发现这个人民币符号在不同机器上显示不一致,有的显示一横,有的显示两横。 百度查了一下,找到好很多解决办法,改字体,用图片等等。 最后发现原来用的是全角的“¥”的原因&#xf…

《iVX 高仿美团APP制作移动端完整项目》09 订单页制作

订单页制作比较简单,界面如下: 一、标题 首先创建一个页面,命名为订单页,并且给予背景色为黄色: 随后创建一个行,命名为主要并给予对应的基础属性: 接着给予这个主要行对应的上下内边距使其…