题外:
也许前端学习也应包括审美。微信在我学习前端路上,小程序制息页以前模仿视频内容,人信现在模仿别人成品…我曾想过作为前端是微信不是也应学习UI设计方向的美术知识,再不济也应具备页面布局的小程序制息页审美。但这个想法被一位大佬否定了,人信所以这个想法也只好放在心里成为另一种可能。微信
分享一个今天才学会的小程序制息页CSDN写文章的技巧~
正题:
先上成品图
1.架构
进行编程前,我们要架构。人信对整体项目叫架构,微信对一个页面而言不如说叫整理思路
以本图为例,小程序制息页除去底部 tabBar,人信头部 navigationStyle 是微信小程序特有配置,其他都是小程序制息页“前端三剑客”的基础内容。
于是人信可以简单的划分为两部分:
- 蓝色背景区域
- 白色主体区域
思维导图附上:
注意:开发时绝对定位尽量少用。
2.编程
前排提示:代码可以复制到 VScode 看的舒服很多
第一步:根据架构写出布局
第二步:分析盒子内具体内容
访客学院
第三步:写CSS样式,通常我会第二步第三步同时进行
CSS基础我也很菜,而且实现的方式很多,提示一下 不多赘述。
- 子绝父相
- margin - left
- 用 line - height 撑开盒子高度,而不是给盒子设置高度
- justify - content : space - betweem 了解下它的全部值