题外： 也许前端学习也应包括审美。在我学习前端路上，以前模仿视频内容，现在模仿别人成品…我曾想过作为前端是不是也应学习UI设计方向的美术知识，再不济也应具备页面布局的审美。但这个想法被一位大佬否定了，所以这个想法也只好放在心里成为另一种可能。

分享一个今天才学会的CSDN写文章的技巧~

正题：

先上成品图

1.架构

进行编程前，我们要架构。对整体项目叫架构，对一个页面而言不如说叫整理思路

以本图为例，除去底部 tabBar，头部 navigationStyle 是小程序特有配置，其他都是“前端三剑客”的基础内容。

于是可以简单的划分为两部分：

蓝色背景区域白色主体区域

思维导图附上：

注意：开发时绝对定位尽量少用。

2.编程

前排提示：代码可以复制到 VScode 看的舒服很多

第一步：根据架构写出布局

<view class="partOne"> <view class="userInfo"></view> <view class="positiveAbsolute"></view> </view> <view class="partTwo"> </view>

第二步：分析盒子内具体内容

<view class="partOne"> <view class="userInfo"> <!-- 头像区域 --> <view class="avatar"> <!-- open-data 翻文档 --> <open-data type="userAvatarUrl"></open-data> </view> <!-- 文本区域 --> <view class="info"> <!-- 用户名 --> <text class="name"> <open-data type="userNickName"></open-data> </text> <!-- 学院 --> <text class="academy"> 访客学院 </text> </view> </view>

第三步：写CSS样式，通常我会第二步第三步同时进行

CSS基础我也很菜，而且实现的方式很多，提示一下 不多赘述。

子绝父相margin - left用 line - height 撑开盒子高度，而不是给盒子设置高度justify - content : space - betweem 了解下它的全部值

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。