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

这一节我们将讲解美食页下半部分内容制作:
在这里插入图片描述

一、完善店铺推荐

接下来继续制作以下内容:
在这里插入图片描述

1.1 满减信息

现在咱们在对应的商家行中添加一个行,命名为满减,并且对应的更改高度为包裹:
在这里插入图片描述
随后更改其背景色、字体颜色使其具有对应的样式属性:
在这里插入图片描述
可能你更改完后会发现该文本紧贴文字框的边缘:

在这里插入图片描述

那么此时就应该对应的修改其内边距,内边距也是属于对应的文本组件内容,那么其背景色也会被作用,如果是外边距则是表示对某个方向的距离,编写对应的距离并不会增加其这个元素的厚度,在此需要更高内边距:

在这里插入图片描述
接着我们复制多几个文本:

在这里插入图片描述
此时发现紧贴左侧,那么只需要设置对应的左外边距即可:
在这里插入图片描述
最后更改文本内容即可完成满减信息页:
在这里插入图片描述

1.2 商家推荐内容制作

接着制作商家推荐内容:
在这里插入图片描述
我们接着在商家行之下创建一个行,命名为商品,并且设置其背景色和高度属性:
在这里插入图片描述
接着其内部的每个信息都是一块内容,并且是列存在的形式::
在这里插入图片描述
我们在此创建一个列,命名为信息:
在这里插入图片描述
商家推荐内容分为3个,并且较为平均的占据了宽度,我们设置这个列的宽度为 33% 则可以刚好较为平均的占据整个行,并且设置背景色为透明:
在这里插入图片描述
接下来在信息列中添加一个图片:
在这里插入图片描述
我们发现该图片的过大,这是因为该图片按照了原本的比例进行了显示,这一点我们可以通过对应的图片属性值可以看出:
在这里插入图片描述
此时只需要设置图片的宽度为 100%,那么就会占据整个图片所在容器的最大宽度:
在这里插入图片描述
再接着往下添加一个文本:
在这里插入图片描述
随后往下看,此时下一个显示内容为一个原价和一个折扣价,这两部分在同一行显示,那么此时我们可以在这个列中再添加一个行容器,行列容器之间是可以相互进行包裹的,并且不要忘记设置对应的高度以及背景色:
在这里插入图片描述
最后咱们再这个行中添加两个文本即可:
在这里插入图片描述
此时由于当前商品信息紧贴顶部并不美观,我们直接设置商品行的上外(內)边距即可:
在这里插入图片描述
接着复制三个信息列:
在这里插入图片描述
若觉得横排显示并不不等间距,直接设置商品行的水平距离为等间距即可:
在这里插入图片描述
此时列水平之间将会存在一定间隙。

二、分类块、标签、推荐商家制作

接下来开始分类块和标签的制作:
在这里插入图片描述

2.1 分类

首先在内容页下创建一个行,命名为种类,并且设置其对应的背景色、高度内容:
在这里插入图片描述
接着在种类下创建第一个分类,我们可以看到,这个分类是列的形式存在:
在这里插入图片描述
我们创建一个列,若这个列需要在一行中要显示5个,那么每个列的宽度需要设置为 20%:
在这里插入图片描述

随后添加对应的图片和文本:
在这里插入图片描述
在此需要注意,图片宽度需要设置为 100%,占据整个容器宽。

此时我们可以看到,当前的元素并不居中对齐,咱们只需要设置其父容器类型的垂直、水平对齐为居中即可:

在这里插入图片描述
若想使其有一定的边缘厚度,设置其内边距即可:
在这里插入图片描述
接着复制多个类型列:
在这里插入图片描述
但在这里咱们多余的分类不会进行换行显示,所以需要设置父容器的自动换行取消:
在这里插入图片描述
并且若想使其可滑动,那么则需要设置其裁剪属性,横轴 x 竖轴则是 y:
在这里插入图片描述
此时该区域将会出现一个滚动条:
在这里插入图片描述
并不美观,只需要隐藏滚动条即可,在属性中设置隐藏滚动条开启:
在这里插入图片描述

2.2 标签

其标签内容制作也非常简单:
在这里插入图片描述
添加一个行命名为推荐内容,然后在其中添加对应的文本即可,文本设置对应的内边距即可解决:
在这里插入图片描述

2.3 推荐商家

最后的推荐商家跟其他页面的类似,在此只需要直接赋值过来即可;
在这里插入图片描述

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

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

相关文章

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

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

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出现的次数,然后模3 , 题目上的3 * n 1给…

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

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

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

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

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

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

《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 会员页 标题、会员卡 制作

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

微软AI插件Github Copilot初体验

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

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

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

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

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

AutoDesk CAD 2014安装VBA Enabler图文教程(附AutoCAD_2014_VBA_Win_64bit下载)

在利用CASS将dwg地形图转为ArcGIS支持的Shapefile格式数据时,为了提高转换效率,通常我们会写一些VBA代码来实现,但是VBA不提供与AutoCAD OEM 安装介质,需要单独下载VBA环境。 Visual Basic for Applications (VBA) 引擎不再提供与 AutoCAD OEM 安装介质。 请联系您的 Auto…

开源项目 英雄联盟 之WPF

WPF 英雄联盟作者:Devncore 组织 来自 韩国,首尔原文链接:https://github.com/devncore/leagueoflegends感谢分享者晨晞gg[1];框架使用.NET6;C# 10.0;Visual Studio 2022;您可以了解如何正确实施 WPF 项目。描述了如何…

java中try 与catch的使用

(2011-10-08 17:08:43) 转载▼标签: 杂谈 分类: Javatry{//代码区}catch(Exception e){//异常处理}代码区如果有错误,就会返回所写异常的处理。 首先要清楚,如果没有try的话,出现异常会导致程序崩溃。而try则可以保证…

iVX 倒计时制作

需求:点击开始计时计时,并且开始计时按钮文本编程停止计时文本,点击记录事件可以记录当前时间并显示到下面的记录时间列中。 一、页面制作 首先创建一个相对应用项目,命名为计时器: 接着创建一个页面,设…

打造自己的装机U盘(二)

打造自己的装机U盘(二)二、 在PE U盘加入系统安装的GHOST镜像文件现在我们在上篇的PE U盘加入系统安装的GHOST镜像文件。这一步其实最简单,说白了就是搞一个GHOST文件复制、粘贴到u盘。系统安装的GHOST镜像文件从何而来?百度、谷歌输入“GHOS…

到底什么是国土空间规划?

文章目录 一、什么是国土空间规划?二、为什么要建立国土空间规划体系?三、国土空间规划的主要目标是什么?四、国土空间规划的编制要求是什么?五、国土空间规划体系由哪几部分组成?六、国土空间规划分哪几个层级?七、国土空间规划分哪几个类型?八、国土空间总体规划、详细…

Bootstrap入门(八)组件2:下拉菜单

Bootstrap入门&#xff08;八&#xff09;组件2&#xff1a;下拉菜单先引入本地的CSS文件和JS文件&#xff08;注&#xff1a;1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加&#xff09;<link href"css/bootstrap.min.css" rel"stylesheet&q…

MAUI 迁移指南

前言为了能够让大家更好的理解全新的MAUI框架, 那么本次迁移指南主要给大家讲解从Xamarin.Forms升级到MAUI带来了哪些全新的变化, 下面将围绕以下几点给大家重点介绍。单个代码库演变启动配置演变统一资源管理依赖注入隐式using 指令Essentials合并全新命名空间您仅需要具备Xam…