手机网站 禁止缩放,个人网站建设方案书,制作网站需要注意什么,手机网站作用这一节我们将讲解美食页下半部分内容制作#xff1a;
一、完善店铺推荐
接下来继续制作以下内容#xff1a;
1.1 满减信息
现在咱们在对应的商家行中添加一个行#xff0c;命名为满减#xff0c;并且对应的更改高度为包裹#xff1a; 随后更改其背景色、字体颜色使…这一节我们将讲解美食页下半部分内容制作
一、完善店铺推荐
接下来继续制作以下内容
1.1 满减信息
现在咱们在对应的商家行中添加一个行命名为满减并且对应的更改高度为包裹 随后更改其背景色、字体颜色使其具有对应的样式属性 可能你更改完后会发现该文本紧贴文字框的边缘 那么此时就应该对应的修改其内边距内边距也是属于对应的文本组件内容那么其背景色也会被作用如果是外边距则是表示对某个方向的距离编写对应的距离并不会增加其这个元素的厚度在此需要更高内边距 接着我们复制多几个文本 此时发现紧贴左侧那么只需要设置对应的左外边距即可 最后更改文本内容即可完成满减信息页
1.2 商家推荐内容制作
接着制作商家推荐内容 我们接着在商家行之下创建一个行命名为商品并且设置其背景色和高度属性 接着其内部的每个信息都是一块内容并且是列存在的形式 我们在此创建一个列命名为信息 商家推荐内容分为3个并且较为平均的占据了宽度我们设置这个列的宽度为 33% 则可以刚好较为平均的占据整个行并且设置背景色为透明 接下来在信息列中添加一个图片 我们发现该图片的过大这是因为该图片按照了原本的比例进行了显示这一点我们可以通过对应的图片属性值可以看出 此时只需要设置图片的宽度为 100%那么就会占据整个图片所在容器的最大宽度 再接着往下添加一个文本 随后往下看此时下一个显示内容为一个原价和一个折扣价这两部分在同一行显示那么此时我们可以在这个列中再添加一个行容器行列容器之间是可以相互进行包裹的并且不要忘记设置对应的高度以及背景色 最后咱们再这个行中添加两个文本即可 此时由于当前商品信息紧贴顶部并不美观我们直接设置商品行的上外內边距即可 接着复制三个信息列 若觉得横排显示并不不等间距直接设置商品行的水平距离为等间距即可 此时列水平之间将会存在一定间隙。
二、分类块、标签、推荐商家制作
接下来开始分类块和标签的制作
2.1 分类
首先在内容页下创建一个行命名为种类并且设置其对应的背景色、高度内容 接着在种类下创建第一个分类我们可以看到这个分类是列的形式存在 我们创建一个列若这个列需要在一行中要显示5个那么每个列的宽度需要设置为 20%
随后添加对应的图片和文本 在此需要注意图片宽度需要设置为 100%占据整个容器宽。
此时我们可以看到当前的元素并不居中对齐咱们只需要设置其父容器类型的垂直、水平对齐为居中即可 若想使其有一定的边缘厚度设置其内边距即可 接着复制多个类型列 但在这里咱们多余的分类不会进行换行显示所以需要设置父容器的自动换行取消 并且若想使其可滑动那么则需要设置其裁剪属性横轴 x 竖轴则是 y 此时该区域将会出现一个滚动条 并不美观只需要隐藏滚动条即可在属性中设置隐藏滚动条开启
2.2 标签
其标签内容制作也非常简单 添加一个行命名为推荐内容然后在其中添加对应的文本即可文本设置对应的内边距即可解决
2.3 推荐商家
最后的推荐商家跟其他页面的类似在此只需要直接赋值过来即可;
