ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【微信小程序】制作个人信息页面 [打印本页]

---

作者: 九天猎人    时间: 2022-6-23 18:50
标题: 【微信小程序】制作个人信息页面
题外：
也许前端学习也应包括审美。在我学习前端路上，以前模仿视频内容，现在模仿别人成品…我曾想过作为前端是不是也应学习UI设计方向的美术知识，再不济也应具备页面布局的审美。但这个想法被一位大佬否定了，所以这个想法也只好放在心里成为另一种可能。
分享一个今天才学会的CSDN写文章的技巧~
正题：
先上成品图
   1.架构

进行编程前，我们要架构。对整体项目叫架构，对一个页面而言不如说叫整理思路
以本图为例，除去底部 tabBar，头部 navigationStyle 是小程序特有配置，其他都是“前端三剑客”的基础内容。
于是可以简单的划分为两部分：

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

思维导图附上：
     注意：开发时绝对定位尽量少用。
  2.编程

前排提示：代码可以复制到 VScode 看的舒服很多
第一步：根据架构写出布局

1. <view class="partOne">
2.   <view class="userInfo"></view>
3.   <view class="positiveAbsolute"></view>
4. </view>
7. <view class="partTwo">
9. </view>

复制代码

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

1. <view class="partOne">
2.   <view class="userInfo"></view>
3.   <view class="positiveAbsolute"></view>
4. </view>
7. <view class="partTwo">
9. </view><view class="partOne">
10.   <view class="userInfo"></view>
11.   <view class="positiveAbsolute"></view>
12. </view>
15. <view class="partTwo">
17. </view><view class="partOne">
18.   <view class="userInfo"></view>
19.   <view class="positiveAbsolute"></view>
20. </view>
23. <view class="partTwo">
25. </view><view class="partOne">
26.   <view class="userInfo"></view>
27.   <view class="positiveAbsolute"></view>
28. </view>
31. <view class="partTwo">
33. </view><view class="partOne">
34.   <view class="userInfo"></view>
35.   <view class="positiveAbsolute"></view>
36. </view>
39. <view class="partTwo">
41. </view><view class="partOne">
42.   <view class="userInfo"></view>
43.   <view class="positiveAbsolute"></view>
44. </view>
47. <view class="partTwo">
49. </view><view class="partOne">
50.   <view class="userInfo"></view>
51.   <view class="positiveAbsolute"></view>
52. </view>
55. <view class="partTwo">
57. </view><view class="partOne">
58.   <view class="userInfo"></view>
59.   <view class="positiveAbsolute"></view>
60. </view>
63. <view class="partTwo">
65. </view><view class="partOne">
66.   <view class="userInfo"></view>
67.   <view class="positiveAbsolute"></view>
68. </view>
71. <view class="partTwo">
73. </view><view class="partOne">
74.   <view class="userInfo"></view>
75.   <view class="positiveAbsolute"></view>
76. </view>
79. <view class="partTwo">
81. </view><view class="partOne">
82.   <view class="userInfo"></view>
83.   <view class="positiveAbsolute"></view>
84. </view>
87. <view class="partTwo">
89. </view><view class="partOne">
90.   <view class="userInfo"></view>
91.   <view class="positiveAbsolute"></view>
92. </view>
95. <view class="partTwo">
97. </view><view class="partOne">
98.   <view class="userInfo"></view>
99.   <view class="positiveAbsolute"></view>
100. </view>
103. <view class="partTwo">
105. </view><view class="partOne">
106.   <view class="userInfo"></view>
107.   <view class="positiveAbsolute"></view>
108. </view>
111. <view class="partTwo">
113. </view><view class="partOne">
114.   <view class="userInfo"></view>
115.   <view class="positiveAbsolute"></view>
116. </view>
119. <view class="partTwo">
121. </view><view class="partOne">
122.   <view class="userInfo"></view>
123.   <view class="positiveAbsolute"></view>
124. </view>
127. <view class="partTwo">
129. </view><view class="partOne">
130.   <view class="userInfo"></view>
131.   <view class="positiveAbsolute"></view>
132. </view>
135. <view class="partTwo">
137. </view><view class="partOne">
138.   <view class="userInfo"></view>
139.   <view class="positiveAbsolute"></view>
140. </view>
143. <view class="partTwo">
145. </view><view class="partOne">
146.   <view class="userInfo"></view>
147.   <view class="positiveAbsolute"></view>
148. </view>
151. <view class="partTwo">
153. </view><view class="partOne">
154.   <view class="userInfo"></view>
155.   <view class="positiveAbsolute"></view>
156. </view>
159. <view class="partTwo">
161. </view>访客学院<view class="partOne">
162.   <view class="userInfo"></view>
163.   <view class="positiveAbsolute"></view>
164. </view>
167. <view class="partTwo">
169. </view><view class="partOne">
170.   <view class="userInfo"></view>
171.   <view class="positiveAbsolute"></view>
172. </view>
175. <view class="partTwo">
177. </view><view class="partOne">
178.   <view class="userInfo"></view>
179.   <view class="positiveAbsolute"></view>
180. </view>
183. <view class="partTwo">
185. </view>

复制代码

第三步：写CSS样式，通常我会第二步第三步同时进行
   CSS基础我也很菜，而且实现的方式很多，提示一下 不多赘述。
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4