仿苹果官网案例讲义

1、号后，进入云台，如下图所示。2.2 制作小程序、APP2.2.1 创建点击云台左侧菜单树上的“小程序/APP/”菜单，页面右侧显示“创建小程序”图片和已创建小程序图片，如下图所示。l点击“创建小程序”图片创建一个新的小程序。l点击已创建小程序图片，进入云制作台制作已有小程序。2.2.2 预览制作的页面可以通过预览看到更接近真实的运行效果。在预览前先保存，才能在预览中看到最新的效果。l点击“保存”按钮保存页面的编辑l点击“预览”按钮，打开预览页面预览页面如下图所示l中间是页面运行效果，l左侧是页面列表，点击某个页面直接运行这个页面l右侧是两个都可安装，下面的用于apploader 到上，苹果和安

2、卓按钮“扫，可以在安装 apploader 后，运行 apploader，点击上面的大描实现跳转”，出现扫描界面，扫描预览页面中右侧第一个上看到应用的运行效果预览页面是自动刷新的，不用关闭这个预览页面，再点预览按钮。主要预览页面开着， 在制作区保存后，预览页面会自动刷新。如果遇到不刷新的情况，也可以按浏览器的刷新按钮手动刷新。2.2.3 发布点击云制作台右上角的发布按钮进入发布页面，根据页面提示可发布为 APP，可下载小程序版本，在开发者工具中导入项目，即可在中看到小程序的运行效果。2.3 制作 PC 网页点击云台左侧菜单树上的“网页”菜单，页面右侧显示“创建网页”图片和已创建网页图片，如下图

3、所示。制作和预览网页的方法同制作小程序。2.4 页面制作区简介页面制作区如下图所示，分为 5 个部分。l顶部的导航栏，可以切换到数据制作区，可以保存、预览和发布l左上角的页面栏，可以切换正在编辑的页面l左下角的组件栏，选择合适的组件放入到正在编辑的页面中l中间的设计区，编辑当前页面，可以放入组件，拖拽组件，设置组件的属性l右侧的属性栏，在设计设置组件的属性选中某个组件，属性栏中显示该组件的属性，用于在设计放入组件有两种方法，一种是先选中父组件，然后双击要添加的组件，另一种是先单击组件，再在父组件中单击。在设计拽。可以直接拖拽组件，不过为了拖拽到正确的位置，建议在“页面结构”中拖3 项目制作3.

4、1 创建项目进入制作，点击“制作”-“网页”-“创建网页”，如下图所示。根据项目的需求选择不同的模板，本项目选择“流式布局空白模板”，如下图所示。模板确定之后，创建网页，根据提示输入项目相关信息，如下图所示。创建后就可以点击“立即打开”进入制作界面进行项目开发，如下图所示。进入制作界面，如下图。3.2 制作主页新创建的项目有一个空白的页面主页，就是项目运行的首页。3.2.1 制作页头第一步 制作固定区域在页面中放入“区块”组件，设置“方式”为“固定”，“距离顶部”为 0px，“距离左边”为 0px，“距离右边”为 0px，“优先级”为 100，如下图所示。第二步 制作中灰色背景在第一步放入的区

5、块中，再放入一个“区块”组件，设置“高度”属性为 40px，“行高”为 40px，“背景颜色”为#444，“字体大小”为 12px，“字体颜色”为#999999，如下图所示。第三步 制作内容区在第二步放入的区块中，再放入一个“区块”组件，设置“宽度”为 980px，“对式”为，“文字样式”为右对齐，如下图所示。第四步 显示文字在第三步放入的区块中，放入“文本”组件，设置“文本”为，如下图所示。第五步 制作深灰色背景在第一步放入的区块中，再放入一个“区块”组件，设置“背景颜色”为#2d2d2d，“字体颜色”为#ffffff。第六步 制作内容区在第五步放入的区块中，再放入一个“区块”组件，设置“宽

6、度”为 980px，“高度”属性为 44px，“行高”为 44px，“对式”为。第七步 制作导航按钮在第六步放入的区块中，放入 3 个“按钮”组件，如下图所示。选中第一个按钮，单击“图标”中的按钮，选择 icon 分组中的 icon-social-apple 图标，如下图所示。设置“预定义”属性为 link，“按钮展示形式”为“只显示图标”，“”为“大按钮”，“宽度”为 90px，“文字颜色”为#ffffff，“左内边距”为 0px，如下图所示。设置第二个按钮的设置“文本”为 Mac，“预定义”为 link，“宽度”为 110px，“文字颜色”为#ffffff。设置第三个按钮的设置“文本”为

7、iPad，“预定义”为 link，“宽度”为 110px，“文字颜色”为#ffffff。右击 Mac 按钮，弹出快捷菜单，选择“”菜单命令，如下图所示。右击第六步放入的区块，弹出快捷菜单，选择”粘贴“菜单命令，如下图所示，后的效果如下图所示。修改“文本”为，作为第四个按钮。再按钮，修改“文本”为 Watch，作为第五个按钮，再按钮，修改“文本”为 Music，作为第六个按钮，再按钮，修改“文本”为“技术支持”，“文字大小”为 12px，作为第七个按钮。第一个按钮（苹果图标按钮），修改“图标”为 icon-ios7-search-strong，如下图所示。“宽度”为 100px，清空“左内边距”

8、，作为第八个按钮，再第一个按钮，修改“图标”为 icon-bag，如下图所示。“文字样式”为“右对齐”，清空“左内边距”，设置“右内边距”为 0px，作为第九个按钮。第八步 预览运行效果点击屏幕右上角的“保存”按钮，保存后点击“预览”按钮，查看运行效果。如下图所示。预览后在浏览器中会显示新的页，在页面中显示出运行效果，如下图所示。左侧显示项目中的页面，可以点击“项目目录”右边的按钮，隐藏左侧区域。3.2.2 制作限时第一步 制作黑色背景在页面中放入“区块”组件，设置“背景颜色”属性为#000000，“下边框”为实线 12px，颜色#222，“上外边距”为 84px，“上下内边距”为 51px，

9、如下图所示。第二步 制作内容区在第一步放入的区块中，再放入一个“区块”组件，设置“宽度”为980px，“对式”为，“文字样式”为“对齐”，“文字颜色”为#ffffff。第三步 显示内容在第二步放入的区块中，放入“文本”组件。设置“文本”为“限时”，“是否可见”为 inline-block，“文字颜色”为#bbb，“边框”为 1px #bbb 实线，“圆角角度”为 5px，“上下内边距”为 4px，“左右内边距”为 15px。在第二步放入的区块中，再放入“区块”组件。设置“文字样式”为“内边距”为 15px，“下内边距”为 10px。对齐”，“上在刚放入的区块中，再放入 3 个文本组件，设置第一

10、个文本组件的“文本”为“折抵换购，X”，“文字大小”为 30px ，在“文字样式”中选择 B。设置第二个文本组件的“文本”为“R”，“文字大小”为 24px“文本”为“仅 RMB 4399 起，在“文字样式”中选择 B。设置第三个文本组件的Xs 仅 RMB 6599 起*。”，“文字大小”为 30px ，在“文字样式”中选择 B，“左外边距”为 2px。在第二步放入的区块中，再放入“文本”组件。设置“文本”为“前往附近的 Apple Store零售店，手上的升级换购成一个新的，时机正好。”，“是否可见”为 block，“文字大小”为 20px，“下内边距”为 10px。在第二步放入的区块中，放

11、入“按钮”组件，设置“文本”为“查找零售店”，“预定义”为 link，图标选择 linear 分组下的 linear-chevronright，设置“图标位置”为“大小”为 18px，“文字颜色”为#66bbff。”，“文字第四步 预览运行效果保存后预览，运行效果如下图所示。3.2.3 制作XR第一步 制作黑色背景在页面中放入“区块”组件，设置“背景颜色”属性为#000000，“下边框”为实线 12px，颜色#222，“上内边距”为 51px。第二步 制作内容区在第一步放入的区块中，再放入一个“区块”组件，设置“宽度”为980px，“对式”为，“文字样式”为“对齐”，“文字颜色”为#fffff

12、f。第三步 显示内容在第二步放入的区块中，放入“图片”组件，如下图所示。单击“图像 URL”右侧的按钮，打开属性编辑器，单击“上传至当前目录”按钮，如下图所示。选择“仿苹果官网素材官网_xr_logo.png”图片，图片上传至云服务器，并显示在界面中，单击图片，图片左上角出现绿色对勾，表示图片被选中，单击确定按钮，如下图所示。选择的图片在设计器中了，如下图所示。在第二步放入的区块中，再放入“文本”组件。设置“文本”为“全面屏设计，上最强的电池续航，出类拔萃的性能，”，“是否可见”为 block，“文字大小”为 22px，“上内边距”为 15px。在第二步放入的区块中，再放入“文本”组件，设置“

13、文本”为“以及影棚质感的效果。”，“是否可见”为 block，“文字大小”为 22px，“上内边距”为 5px，“下内边距”为10px。添加的按钮组件（查找零售店），在第二步放入的区块中粘贴 2 次，修改“文本”为“进一步了解”和“”第四步 显示图片在第一步放入的区块中，放入“图片”组件，图片来源为“仿苹果官网素材官网_xr_large.jpg”，“对式”为“”，“上外边距”为 20px。第五步 预览运行效果保存后预览，运行效果如下图所示。3.2.4 制作XS第一步并修改第一添加的区块，在页面中粘贴。第一个图片的图片来源为“仿苹果官网素材官网_xs_logo.png”；第二个图片的图片来源为“

14、仿苹果官网素材官网_xs_large.jpg”；删除一个文本组件，将剩余的那个文本组件的“文本”改为“上最大的超视网膜显示屏，性能出类拔萃的 A12 仿生，安全性更进一步的面容 ID，以及支持景深的突破性双镜头系统。”，设置“宽度”为 620px，“对内边距”为 10px。式”为，“上内边距”为 15px，“下第二步 预览运行效果保存后预览，运行效果如下图所示。3.2.5 制作商品列表第一步 制作白色背景在页面中放入“区块”组件，设置“文字颜色”为#111。第二步 制作第一行在第一步放入的区块中，添加“行列”组件，如下图所示。设置“背景颜色”为#fafafa，“上外边距”为 6px，删除一列，

15、保留两列，如下图所示，设置每列的列宽样式为“非常小 6/12”，如下图所示。设置第一列的“文字样式”为“对齐”。在行列组件的第一列中，添加 1 个“图片”组件，1 个“文本组件和 2 个”按钮“组件。设置图片组件的图片来源为“仿苹果官网素材官网apple_watch_logo.jpg”，“对式”为“”，“上外边距”为 250px。设置文本组件的“文本”为“焕然一新，唤醒更好的你”，“是否可见”为 block，“文字大小”为 22px。“文字样式”为“对齐”，“上内边距”为 15px，“下内边距”为 8px。中放入的两个按钮“进一步了解”和“”，“文字颜色”改为#0070c9。在行列组件的第二列

16、中，放入“图片”组件。图片来源为“仿苹果官网素材官网apple_watch_large.jpg”。第三步 制作第二行在第二放入的行列组件，粘贴到在第一步放入的区块中。设置“左上右外边距”为 12px，设置第一列的“上内边距”为 50px，在第一列中添加文本组件，调整组件的顺序。设置第一个文本组件的“文本”为 iPad Pro，“文字大小”为 34px，“文字样式”为加粗。设置第二个文本组件的“文本”为“全新，全面屏，全方位强大”，“是否可见”为 block，“文字大小”为 17px，“文字样式”为“对齐”清空 2 个按钮组件的“文字大小”属性。图片组件的图片来源改为“仿苹果官网素材官网ipad

17、_pro_large.jpg”，设置“对式”为，“上外边距”为 50px。删除第二列，第一列为新的第二列。设置“左边框”为 12px 白色实线，修改其中的文本和图片。文本改为 MacBook Air 和“轻轻地，再次倾心”。图片来源改为“仿苹果官网素材官网macbook_air_large.jpg”，图片的“上外边距”改为 100px。第四步 制作第三行在第三放入的行列组件，粘贴到在第一步放入的区块中。第一列中的组件设置如下：设置第一个文本组件的“文本”为 AirPods。设置第二个文本组件的“文本”为“无线，无繁琐，只有妙不可言”。图片组件的图片来源改为“仿苹果官网素材官网airpods_l

18、arge.jpg”。第二列中的组件设置如下：设置第一个文本组件的“文本”为“2018 年度精选”。设置第二个文本组件的“文本”年度的 app 和佳作，等你来体验”。删除 1 个按钮组件，修改剩余的按钮组件的“文本”为“到 App Store 里看看”。图片组件的图片来源改为“仿苹果官网素材官网best_of_large.jpg”。第五步 制作第四行在第三放入的行列组件，粘贴到在第一步放入的区块中。设置行列组件的“下外边距”为 12px，设置列的“高度”为 580px，第一列的“方式”为“相对”。为两列分别增加背景图片，通过自定义样式实现。选中第一列，单击“自定义样式”右侧的按钮，打开自定义样式

19、编辑器。单击“通用样式”右侧的“添加”按钮，输入样式“名称”，如下图所示。在“背景图片”中选择已上传的“仿苹果官网素材官网apple_music_large.jpg”图片，在“是否重复”中选择 no-repeat，在“背景位置”中选择 center center。选中样式列表中选择复选框，单击确定按钮添加自定义样式，如下图所示。样式的 CSS 代码如下：background-image:url(./images/apple_music_large.jpg);background-repeat:no-repeat;background-position:center center;选中第二列，设

20、置“自定义样式”，如下图所示。样式的 CSS 代码如下：background-image:url(./images/mac_mini_large.jpg);background-repeat:no-repeat;background-position:center center;调整每列中的文本和图片组件。第一列中的组件设置如下：设置文本组件的“文本”为“海量歌曲，敬请沉醉”，“文字颜色”为#ffffff，“上内边距”为 10px。设置 2 个按钮的“文字颜色”为#ffffff，设置其中一个按钮组件的“文本”为“用*”。试设置第一个图片组件的图片来源为“仿苹果官网素材官网 music_logo

21、.png”。设置第二个图片组件的图片来源为“仿苹果官网素材官网 icon_apple_music.png”，“定位方式”为“绝对”，“距离下边”为 8%，“距离左边”为 47%。第二列中的组件设置如下：设置第一个文本组件的“文本”为“Mac Mini”，“文字颜色”为#ffffff。设置第二个文本组件的“文本”为“全身大改造。”，“文字颜色”为#ffffff。设置 2 个按钮的“文字颜色”为#66bbff。第六步 预览运行效果保存后预览，运行效果如下图所示。3.2.6 制作页脚第一步 制作浅灰色背景在页面中放入“区块”组件，设置“背景颜色”为#f2f2f2。第二步 制作内容区在第一步放入的区块

22、中，再放入一个“区块”组件，设置“宽度”为式”为。980px，“对第三步 显示两行文本在第二步放入的区块中，再放入一个“区块”组件，设置“文字大小”为 10px，“文字颜色”为#888，“下边框”为 1px #d6d6d6 实线，“上内边距”为 15px，“下内边距”为 20px。再刚放入的区块中放入 2 个“文本”组件，设置第一个文本组件的“文本”为“* 所示的XR 64GB 机型和XS 64GB 机型价格是使用活动截止日期为 2019 年 1 月7 Plus 32GB 机型进行31 日。折抵金额仅可在限定折抵换购的价格。本限时 时间内使用，并且要求用于状况、配置及制造年份。此新，以限制条款

23、为准。实际折抵金额取决于设备的仅适用于在Apple Store 零售店内进行折抵换购，并不适用于 Apple商店。Apple Store 零售店和 Apple商店的折抵价值可能有所不同。年满18 周岁及以上者才能享受此项折抵换购服务。店内折抵换购需出示颁发并附有的有效件 (当地法律可能会要求该信息)。可能需要遵守 Apple 或 Apple 折抵服务合作伙伴的其他条款。”，“是否可见”为 block，“下内边距”为 10px。设置第二个文本组件的“文本”为“* 仅限新订阅用户。当试用期结束后，会员方案将按月自动续订。”第四步 制五列在第二步放入的区块中，再放入一个“区块”组件，设置“文字大小”

24、为 11px，“上内边距”为 20px。再刚放入的区块中放入“行列”组件，删除 2 列，保留 1 列，设置列的列宽为“非常小2/12”.在列中添加 1 个文本和 1 个按钮。设置文本组件的“文本”为“选购及了解”，“是否可见”为 block，“文字样式”为加粗，“下内边距”为 10px。设置按钮组件的“文本”为 Mac，“预定义”为 link，“是否可见”为 block，“文字大小”为 12px，“文字样式”为左对齐，“文字颜色”为#888，“左内边距”为 0px。这个 Mac 按钮，在第一列中粘贴 11 次，依次修改按钮的文本为“iPad”“Watch”“Music”“iTunes”“Hom

25、ePod”“iPod touch”“配件”“App Store 充值卡”。”将做好的第一列，本和按钮。为行列组件的第二列、第三列、第四列和第五列。修改其中的文第五步 显示三行文本在第二步放入的区块中，再放入一个“区块”组件，设置“文字大小”为 10px，“文字颜色”为#888，“上内边距”为 35px，“下内边距”为 20px。再刚放入的区块中放入 2 个“区块”组件和 1 个“文本”组件。设置文本组件的“文本”为“京网安备 11010502008968 京 ICP 备 10214630 营业执照”，“是否可见”为 block，“文字颜色”为#666，“上内边距”为 10px。设置第一个区块组

26、件的“下边框”为 1px #d6d6d6 实线，“下外边距”为 7px，“下内边距”为 8px。在这个区块中放入 2 个文本组件和 2 个按钮组件，设置文本组件的“文本”分别为“更多选购方式：前往”和“，致电设置按钮组件的“文本”分别为“Apple或查找在你附近的”，“下内边距”均为 8px。Store 零售店”和“经销商”，“预定义”均为link，“文字大小”均为 10px，“文字颜色”均为#0070c9，“左右内边距”均为 0px。在第二个区块中添加 6 个文本组件，设置文本组件的“文本”分别为“Copyright 2019Apple Inc. 保留所利。”“隐私政策”“使用条款”“销售政

27、策”“法律信息”“地图”，其中第一个文本组件的“右外边距”为 30px，其余 5 个文本的“文字颜色”均为#555，中间 4 个文本的“右边框”均为 1px #d6d6d6 实线，“右外边距”均为 7px，“右内边距”均为 10px。第六步 预览运行效果保存后预览，运行效果如下图所示。3.3 制作排行榜页排行榜页是从主页打开的页面。因此需要新建一个页面。3.3.1 新增页面点击在默认分组右边的+按钮，弹出“添加页面”框。在“添加页面”框的“页面名称”输入框中输入“App 排行榜”，如下图所示，点击确定按钮，创建排行榜页面。3.3.2 制作页头第一步页头将“3.2.1 制作页头”一节中制作的内容

28、到排行榜页面中。第二步 添加本页页头在过来的区块中，再添加一个“区块”组件，设置“对式”为“”，“宽度”为 980px，“背景颜色”为#ffffff，“下边框”为 1px #d6d6d6 实线。在区块中添加“行列”组件，设置“高度”为 52px，“行高”为 52px，删除 1 列，保留2 列，设置每列的列宽为 6/12，设置第二列的“文字样式”为“右对齐”。在第一列中放入“文本”组件，设置“文本”为“iTunes”，“文字大小”为 26px，“文字颜色”为#333。在第二列中放入“按钮”组件，设置“文本”为“概览”，“预定义”为 link，“文字大小”为 10px，“文字颜色”为#333。这个

29、按钮，并将“文本”改为“音乐”。在第二列中再放入“文本”组件，设置“文本”为“App Store 排行榜”，“文字大小”为 10px，“文字颜色”为#cccccc，“右外边距”为 10px。在第二列中再放入“按钮”组件，设置“文本”为“文字大小”为 10px，“文字颜色”为#ffffff，“边框”为 1px 10px，“上下内边距”为 2px。”，“背景颜色”为#2189db，#07c 实线，“左右内边距”为第三步 预览运行效果保存后预览，运行效果如下图所示。3.3.3 制作 App 排行榜第一步 制作内容区在页面中放入一个“区块”组件，设置“宽度”为 980px，“对式”为，“文字样式”为“

30、对齐”，“上外边距”为 136px，“上内边距”为 50px。第二步 显示 3 行文字在第一步放入的区块中，放入“文本”组件，设置“文本”为“App Store 排行榜”，“是否可见”为 block。“文字大小”为 44px，“文字间距”为 2px，“下外边距”为 10px。再放入“文本”组件，设置“文本”为“App Store 总有源源不断的涌现。在这内容。”，“是否可里，你可以了解本周的全，并浏览排行榜前 100 位的 app 及见”为 block。“文字大小”为 16px，“文字颜色”为#404040，“下外边距”为 10px，“左右内边距”为 150px。再放入“按钮”组件，设置“文本

31、”为“立即前往 App Store 选购”，“预定义”为 link，“图标”选择右箭头图标，“图标位置”为“#0088cc，“下外边距”为 10px。”，“文字大小”为 16px，“文字颜色”为第三步 显示按钮等在第一步放入的区块中，放入“区块”组件，设置“背景颜色”为#e6e6e6，“文字大小”为 14px，“文字样式”为加粗，“上下外边距”为 30px，“内边距”为 13px。在区块中放入“按钮”组件，设置“文本”为“精选”，“阴影颜色”为#444444，“阴影模糊”为 2px，“圆角角度”为 12px，“背景颜色”为#989898，“文字样式”为加粗，“文字颜色”为#ffffff，“边框

32、”为 1px #4c4c4c 实线，“右外边距”为 10px，“上下内边距”为 4px，“左右内边距”为 12px。在区块中放入 2 个“文本”组件，分别设置“文本”为“右外边距”为 10px。App”和“App”，第四步 显示图片在第一步放入的区块中，放入“区块”组件，设置“方式”为“相对”。在区块中，放入“行列”组件，设置“左右内边距”为 15px。设置第一列的宽度样式为 2/12，“高度”为 478px，设置“自定义样式”属性显示背景图片，图片来源为“仿苹果官网素材App 排行榜left_scrim.png”，如下图所示。CSS 代码如下：background-image:url(./i

33、mages/left_scrim.png);background-repeat:no-repeat;background-position:top left;设置第三列的宽度样式为 2/12，“高度”为 478px，“左内边距”为 0px，设置“自定义样式”属性显示背景图片，图片来源为“仿苹果官网素材App如下图所示。排行榜right_scrim.png”，CSS 代码如下：background-image:url(./images/right_scrim.png);background-repeat:no-repeat;background-position:top right;设置第二列的

34、宽度样式为 8/12.在第二列中添加文本组件，设置“文本”为“精选“文字颜色”为#999999，“下外边距”为 8px。+ App”，“是否可见”为 block，在第二列中添加“区块”组件，设置“宽度”为 680px。在区块中添加“图片”组件，图片来源为“仿苹果官网 素材App 排行榜 art_of_conquest.jpg”，“阴影颜色”为#000000，“阴影模糊”为 5px，“下外边距”为 20px。在区块中添加“行列”组件。设置第一列和第二列的“分割线”为“在右侧”。在第一列中添加“ 图片” 组件。图片来源为“ 仿苹果官网 素材App 排行榜stormbound.jpg”，设置“阴影颜

35、色”为#000000，“阴影模糊”为 5px。图片，粘贴到第二列和第三列中，将图片替换为“仿苹果官网素材App 排行榜thimbleweedpark.jpg”和“仿苹果官网素材App 排行榜apple_store.jpg”。第五步 预览运行效果保存后预览，运行效果如下图所示。3.3.4 制作分割线在页面中放入一个“区块”组件，设置“高度”为 30px，设置“自定义样式”属性显示背景图片，图片来源为“仿苹果官网素材App 排行榜driver_up.png”，如下图所示。CSS 代码如下：background-image:url(./images/driver_up.png);background

36、-repeat:no-repeat;background-position:bottom center;3.3.5 制作热门第一步 制作内容区在页面中放入一个“区块”组件，设置“宽度”为 980px，“对内边距”为 43px，“上内边距”为 28px。式”为，“左右第二步 显示文字在第一步放入的区块中，放入“文本”组件，设置“文本”为“热门字间距”为 2px。App”，“文再放入“按钮”组件，设置“文本”为“查看所有”，“预定义”为 link，“图标”选择icon 分组中的 icon-arrow-right-b，“图标位置”为“”，“文字颜色”为#08c。第三步 显示一行五列在第一步放入的区块

37、中，放入“行列”组件（行列 A），设置“下边框”为 1px #d6d6d6实线，“上内边距”为 8px，“下内边距”为 24px。删除 2 列，保留 1 列，设置列的“宽度”为 20%。在列中再添加“行列”组件（行列 B），删除 1 列，保留 2 两列，设置第一列的列宽为1/12，第二列的列宽为 10/12.在第一列中放入“文本”组件，设置“文本”为“1.”，在第二列中放入“图片”组件，图片来源为“仿苹果官网素材App 排行榜“阴影颜色”为#000000，“阴影模糊”为 3px，“圆角角度”为 15px.jpg”，在第二列中放入“文本”组件，设置“文本”为“短- 好玩的”，“是否可见”为 block，“文字大小”为 12px，“文字样式”为加粗，“文字颜色”为#4c4c4c，“上外边距”为 10px。在第二列中再放入“