企业站界面-首页-最新产品（1行2列流式布局）

黄菊华老师

博客专家认证

2023-01-13 00:23:04

课时名称	课时知识点
企业站界面-首页-最新产品（1行2列流式布局）	企业站界面-首页-最新产品（1行2列流式布局）

...全文

35 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

讲解微信小程序商城界面设计所需的基础知识，实战商城界面所要做的多个栏目：首页、产品列表、产品详细页面、购物车、用户中心等几十个页面的布局设计！任务作业：1.制作一个空白的小程序框架2.制作一个1行2列的产品列表3.制作一个产品介绍的底部菜单：首页，收藏，购物车，加入购物车，立即购买（注意：作业需写在CSDN博客中，请把作业链接贴在评论区，老师会定期逐个批改~~）

9.1.3 最新产品最新产品区块效果如图9-4。布局分析：最新产品区块的标题我们使用公司简介的代码，区块标题的样式是公用的；产品显示区块，我们这里做一个1行2列的流式布局，也就是我们每个产品的内容占据整个手机宽度的50%，那么1行就可以放2个产品了。注意：我们每个产品的图片image中添加属性 mode=‘widthFix’ ，表示图片高度自动随图片高度自适应按比例变化。布局代码如下：  <view class='cp_zuixi

9.2.3 右侧产品我们本小节来填充（虚线框起来部分）右侧产品列表，如图9-10。布局分析：1列2列的流式布局。布局代码如下：  <view class='cp_zuixin'> <navigator url='' class='cp-xiangmu'> <image src='/static/tupian/cp01.jpg' class='cp_tupian' mode='widthFix'

9.1.4 最新案例最新产品区块效果如图9-5。布局分析：每个产品分1行2列，左侧1列放产品图片，右侧一列放产品是文字信息；右侧的一列然后分3行放不同的产品文字信息。注意：我们每个产品的图片image中添加属性 mode=‘widthFix’ ，表示图片高度自动随图片高度自适应按比例变化。布局代码如下  <view class='qukuai'> <view class='qukuai-shuxian'></view&

本章节主要讲解企业站项目界面的制作，主要包括以下页面：首页、产品列表和产品详情、案例列表和案例详情、资讯列表和咨询详情、关于我们、留言反馈页面。 9.1 企业站首页企业站项目首页主要包括下面几个模块：广告图、公司简介、最新产品、最新案例、最新资讯。首页效果如图9-1。 9.1.1 广告图首页广告图的最终效果如图9-2. 布局代码如下：  <view class='ad01'> <image src='/static/tupian/01

黄菊华的课程社区_NO_4

1

社区成员

414

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章