企业站界面-首页-区块标题

黄菊华老师

博客专家认证

2023-01-13 00:23:04

课时名称	课时知识点
企业站界面-首页-区块标题	企业站界面-首页-区块标题

...全文

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

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

9.4 资讯列表本小节主要讲解资讯列表页面的制作，效果如图9-12。布局分析：我们在“企业站首页-最新资讯”这里分析过类似的布局，我们可以沿用前面的布局和样式；唯一需要变动的是讲区块标题右侧的内容删除。布局代码如下： <template> <view>  <view class='qukuai'> <view class='qukuai-shuxian'></view><

9.1.2 公司简介公司简介区块最终效果如图9-3，公司简介由区块标题和区块内容组成。布局分析：公司简介、最新产品、最新案例、最新资讯都会用到“区块标题”，只是每个区块不同，然后标题文字不同，所以我们要单独为该区块写独立的代码和样式，以便于我们公用样式。布局代码如下：  <view class='qukuai'> <view class='qukuai-shuxian'></view><!--区块标题-左侧竖线

9.1.5 最新资讯最新资讯区块效果如图9-6。布局分析：每条资讯分1行2列，左侧放资讯标题，右侧放图标；左侧的资讯标题占据所有剩余空间，将右侧的图标挤压到最右侧。布局代码如下：  <view class='qukuai'> <view class='qukuai-shuxian'></view> <text class='qukuai-biaoti'>最

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

9.5.1 关于我们关于我们页面效果如图9-13。布局代码如下： <template> <view>  <view class='ad01'> <image src='/static/tupian/qyln.jpg' mode='widthFix' class='ad01-img'></image> </view> <!--关于我们-区块标题--&g

黄菊华的课程社区_NO_4

1

社区成员

414

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章