-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathtcb02.html
661 lines (631 loc) · 109 KB
/
tcb02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/style.css" type="text/css" media="all">
<link rel="icon" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/icon.jpg">
<script>
window.location.href="https://cloudbase.net/community/guides/handbook/index.html"
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script src="https://hm.baidu.com/hm.js?c74df1b3bfef646324c832a4c59aa5df"></script><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c74df1b3bfef646324c832a4c59aa5df";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//s.w.org">
<link href="https://fonts.gstatic.com" crossorigin="" rel="preconnect">
<link rel="alternate" type="application/rss+xml" title="云开发技术训练营 » Feed" href="https://cloudbasegroup.org/feed">
<link rel="alternate" type="application/rss+xml" title="云开发技术训练营 » 评论Feed" href="https://cloudbasegroup.org/comments/feed">
<link rel="alternate" type="application/rss+xml" title="云开发技术训练营 » WXML与WXSS评论Feed" href="https://cloudbasegroup.org/handbook/weapp/13/feed">
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/cloudbasegroup.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.2.2"}};
!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
</script><script src="https://cloudbasegroup.org/wp-includes/js/wp-emoji-release.min.js?ver=5.2.2" type="text/javascript" defer=""></script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel="stylesheet" id="crayon-theme-monokai-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/plugins/crayon-syntax-highlighter/themes/monokai/monokai.css?ver=_2.7.2_beta" type="text/css" media="all">
<link rel="stylesheet" id="crayon-font-monaco-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/plugins/crayon-syntax-highlighter/fonts/monaco.css?ver=_2.7.2_beta" type="text/css" media="all">
<link rel="stylesheet" id="wp-block-library-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/css/dist/block-library/style.min.css?ver=5.2.2" type="text/css" media="all">
<link rel="stylesheet" id="dashicons-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/css/dashicons.min.css?ver=5.2.2" type="text/css" media="all">
<link rel="stylesheet" id="post-views-counter-frontend-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/plugins/post-views-counter/css/frontend.css?ver=1.3.1" type="text/css" media="all">
<link rel="stylesheet" id="twentyfourteen-lato-css" href="https://fonts.googleapis.com/css?family=Lato%3A300%2C400%2C700%2C900%2C300italic%2C400italic%2C700italic&subset=latin%2Clatin-ext" type="text/css" media="all">
<link rel="stylesheet" id="genericons-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/themes/twentyfourteen/genericons/genericons.css?ver=3.0.3" type="text/css" media="all">
<link rel="stylesheet" id="twentyfourteen-style-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/themes/twentyfourteen/style.css?ver=5.2.2" type="text/css" media="all">
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyfourteen-ie-css' href='https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/themes/twentyfourteen/css/ie.css?ver=20131205' type='text/css' media='all' />
<![endif]-->
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp"></script>
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>
<link rel="https://api.w.org/" href="https://cloudbasegroup.org/wp-json/">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://cloudbasegroup.org/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/wlwmanifest.xml">
<link rel="prev" title="链接与图片" href="https://cloudbasegroup.org/handbook/weapp/15">
<link rel="next" title="小程序开发入门" href="https://cloudbasegroup.org/handbook/weapp/10">
<meta name="generator" content="WordPress 5.2.2">
<link rel="canonical" href="https://cloudbasegroup.org/handbook/weapp/13">
<link rel="shortlink" href="https://cloudbasegroup.org/?p=13">
<link rel="alternate" type="application/json+oembed" href="https://cloudbasegroup.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcloudbasegroup.org%2Fhandbook%2Fweapp%2F13">
<link rel="alternate" type="text/xml+oembed" href="https://cloudbasegroup.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcloudbasegroup.org%2Fhandbook%2Fweapp%2F13&format=xml">
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<script src="chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/prompt.js"></script></head>
<body class="post-template-default single single-post postid-13 single-format-standard logged-in masthead-fixed full-width singular">
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<nav id="header-db" class="row navbar navbar-default">
<div class="navbar-header">
<div class="logotop fleft">
<a style="margin-top: 15px;" href="https://tencentcloudbase.github.io/handbook/tcb01.html" target="_blank"><img
src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/icon.svg"></a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="flex nav-items">
<h1 class="flex-item navbar-link">
云开发技术训练营</h1>
<div class="tcb-header__col tcb-header__col-right">
<ul class="tcb-header-nav">
<li class="tcb-header-nav__item ">
<a target="_blank" href="https://cloudbase.net/tools.html">工具</a></li>
<li class="tcb-header-nav__item "><a target="_blank"
href="https://cloudbase.net/sdk.html">SDK</a></li>
<li class="tcb-header-nav__item "><a href="https://docs.cloudbase.net" target="_blank">文档</a></li>
<li class="tcb-header-nav__item "><a target="_blank"
href="https://cloudbase.net/community.html">社区</a></li>
<li class="tcb-header-nav__item "><a target="_blank"
href="https://console.cloud.tencent.com/tcb?from=12341">去控制台</a></li>
</ul>
</div>
</div>
</div>
<div class="collapse navbar-collapse sop-sider" id="bs-example-navbar-collapse-1">
<div class="sop-menu">
<ul>
<li class="page_item no_current_page_item"><a href="./index.html">云开发训练营说明</a></li>
<li class="page_item no_current_page_item"><a><strong>小程序技术训练营</strong></a></li>
<li class="page_item no_current_page_item"><a href="./tcb01.html">小程序开发入门</a></li>
<li class="page_item current_page_item"><a href="./tcb02.html">WXML与WXSS</a></li>
<li class="page_item no_current_page_item"><a href="./tcb03.html">链接与图片</a></li>
<li class="page_item no_current_page_item"><a href="./tcb04.html">WeUI框架</a></li>
<li class="page_item no_current_page_item"><a href="./tcb05.html">渐变与动画</a></li>
<li class="page_item no_current_page_item"><a href="./tcb06.html">数据绑定</a></li>
<li class="page_item no_current_page_item"><a href="./tcb07.html">列表渲染与条件渲染</a></li>
<li class="page_item no_current_page_item"><a href="./tcb08.html">小程序组件</a></li>
<li class="page_item no_current_page_item"><a href="./tcb09.html">优化与部署上线</a></li>
<li class="page_item no_current_page_item"><a><strong>小程序与JavaScript</strong></a></li>
<li class="page_item no_current_page_item"><a href="./tcb11.html">JavaScript入门</a></li>
<li class="page_item no_current_page_item"><a href="./tcb12.html">点击事件</a></li>
<li class="page_item no_current_page_item"><a href="./tcb13.html">页面渲染</a></li>
<li class="page_item no_current_page_item"><a href="./tcb14.html">生命周期</a></li>
<li class="page_item no_current_page_item"><a href="./tcb15.html">数据表单</a></li>
<li class="page_item no_current_page_item"><a href="./tcb16.html">图片、缓存与文件</a></li>
<li class="page_item no_current_page_item"><a href="./tcb17.html">网络API</a></li>
<li class="page_item no_current_page_item"><a><strong>云开发技术训练营</strong></a></li>
<li class="page_item no_current_page_item"><a href="./tcb21.html">云开发快速入门</a></li>
<li class="page_item no_current_page_item"><a href="./tcb22.html">云开发能力</a></li>
<li class="page_item no_current_page_item"><a href="./tcb23.html">云数据库入门</a></li>
<li class="page_item no_current_page_item"><a href="./tcb24.html">存储、数组、对象</a></li>
<li class="page_item no_current_page_item"><a href="./tcb25.html">云开发与Nodejs</a></li>
</ul>
</div>
</div>
</nav>
<div class="sop-content">
<header class="entry-header">
<h1 class="entry-title">WXML与WXSS</h1>
</header><!-- .entry-header -->
<div class="entry-content">
<p>相信通过前面的学习，大家对一个完整的小程序的文件结构有了一个大致的了解，对小程序的开发者工具也有了一定的认识，那这节我们来开始动手写一下小程序的代码。</p>
<h4><strong>编辑WXML文件</strong></h4>
<p>我们在开发者工具里打开之前修改的模板小程序home文件夹下的home.wxml，里面有如下代码</p>
<div id="crayon-5d830a9c7fd41486743924" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;"><!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text></textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd41486743924-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd41486743924-2" style="height: 20px;">2</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd41486743924-1"><span class="crayon-c"><!--pages/home/home.wxml--></span></div><div class="crayon-line" id="crayon-5d830a9c7fd41486743924-2"><span class="crayon-r "><text></span><span class="crayon-i ">pages/home/home.wxml</span><span class="crayon-r "></text></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>这个第1行，是一句注释，也就是一句说明，不会显示在小程序的前端，第2行就是一个<strong><text>组件</strong>。</p>
<p>接下来我们会广泛使用到小程序的<view>组件。比如我们在上面的代码下面加一下下面的代码，大家再来看效果：</p>
<div id="crayon-5d830a9c7fd47691662907" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;"><view>
<view>
<view>WXML 模板</view>
<view>从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。</view>
</view>
</view></textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd47691662907-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd47691662907-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd47691662907-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d830a9c7fd47691662907-4" style="height: 40px;">4</div><div class="crayon-num" data-line="crayon-5d830a9c7fd47691662907-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d830a9c7fd47691662907-6" style="height: 20px;">6</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd47691662907-1"><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd47691662907-2"><span class="crayon-i "> </span><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd47691662907-3"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">WXML 模板</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd47691662907-4"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd47691662907-5"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd47691662907-6"><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>大家可以结合上面的代码，来了解一下组件的基本写法</p>
<ul>
<li><view>组件和<text>组件类似，他们都是成对出现的，比如<text></text>，<view></view>，两个要一起写，有前面的开始标签，后面就要有一个闭合标签，闭合标签前面有一个“/”</li>
<li>view组件是可以嵌套写的，</li>
<li>为了让视觉上更好看，写代码的时候要有缩进（虽然不缩进也不会有影响）</li>
</ul>
<p>我们可以把这个页面写的更加复杂一点。</p>
<div id="crayon-5d830a9c7fd4a524212563" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;"><view>
<view>
<view>
<view>技术学习说明</view>
<view>技术和我们以往所接触的一些知识有很大的不同，比如英文非常强调词汇量，需要你多说多背；数学需要你记住公式，反复练习；在教学的方式上也有很大的不同，以前都是有专门的老师手把手教你，而且还有同学交流。那要学好技术，应该依循什么样的学习方法和教学方法呢？
</view>
</view>
<view>
<view>
<view>自学而非手把手</view>
<view>技术的方向众多，而且知识点也是非常庞杂，需要你具备一定的自学能力，所谓自学能力就是要求你遇到问题能够勤于思考，擅于搜索，能够不断实践探索。在实际工作中，也要求你能根据技术文档可以迅速掌握前沿的技术，而同事不会有时间教你，如果没有自学能力，是很难胜任很多工作的。
</view>
</view>
<view>
<view>查阅文档而非死记知识点</view>
<view>在高中一学期一门课只有很薄的一本书，老师会反复讲解知识点，强化你的记忆，考试也是闭卷；而技术一个很小的分支，内容就有几千页甚至更多，强记知识点显然不合适。学习技术要像查词典一样来查阅技术文档，你只需要掌握基本的语法和用法，在编程的时候随时查阅，就像你不需要背诵上万的单词也能知道它的意思用法一样，所以技术文档是学习技术最为重要的参考资料。
</view>
</view>
<view>
<view>实战而非不动手的看书</view>
<view>技术是最强调结果的技能，你看了再多书，如果不知道技术成品是怎么写出来的，都是枉然。很多朋友有收集癖，下载了很多电子资源，收藏了很多高赞的技术文章，但是却没有动手去消化去理解，把时间和精力都浪费了。不动手在开发者工具里去写代码，不动手配置开发环境，缺乏实战的经验，都是阻碍你学好技术的坏习惯。
</view>
</view>
<view>
<view>搜索而非做伸手党</view>
<view>在以前，我们遇到技术问题，我们可以问老师问同学，于是很多人把这种不良的习惯也带到了技术的学习当中，遇到问题也总喜欢求助于别人。技术的方向众多，环境复杂，问题也是很多，如果你总是依赖别人的解答，是很难学好技术的。一定要学会在网上通过搜索遇到的问题来找答案。
</view>
</view>
<view>
<view>团队协作，而非单打独斗</view>
<view>一个产品涉及的技术非常多，需要很多人来一起配合才能开发好，所以学习技术的时候我们需要了解一些代码规范、工作的流程、项目管理等，在技术方面也会有API接口，接口文档这些，还要懂得如何和同职业的同事以及不同角色的人如设计师等一起配合，而不是自己一个人单打独斗。
</view>
</view>
<view>
<view>系统的指导而非茫然无序</view>
<view>学好技术最依赖你自学，但是如果没有人指导你，你可能会像苍蝇一样陷入众多资料中茫然无序，抓不住一个技术的重点，也不清楚哪些技术才值得你深入学习，最好是有经验的人可以指点你应该看什么，学什么，什么才是重点，当然不是手把手教你。
</view>
</view>
</view>
</view>
</view></textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -28px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-5" style="height: 40px;">5</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-11" style="height: 40px;">11</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-14" style="height: 20px;">14</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-15" style="height: 20px;">15</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-16" style="height: 60px;">16</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-17" style="height: 20px;">17</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-18" style="height: 20px;">18</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-19" style="height: 20px;">19</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-20" style="height: 20px;">20</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-21" style="height: 60px;">21</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-22" style="height: 20px;">22</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-23" style="height: 20px;">23</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-24" style="height: 20px;">24</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-25" style="height: 20px;">25</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-26" style="height: 40px;">26</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-27" style="height: 20px;">27</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-28" style="height: 20px;">28</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-29" style="height: 20px;">29</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-30" style="height: 20px;">30</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-31" style="height: 40px;">31</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-32" style="height: 20px;">32</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-33" style="height: 20px;">33</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-34" style="height: 20px;">34</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-35" style="height: 20px;">35</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-36" style="height: 40px;">36</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-37" style="height: 20px;">37</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-38" style="height: 20px;">38</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-39" style="height: 20px;">39</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-40" style="height: 20px;">40</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4a524212563-41" style="height: 20px;">41</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-1"><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-2"><span class="crayon-i "> </span><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-3"><span class="crayon-i "> </span><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-4"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">技术学习说明</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-5"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">技术和我们以往所接触的一些知识有很大的不同，比如英文非常强调词汇量，需要你多说多背；数学需要你记住公式，反复练习；在教学的方式上也有很大的不同，以前都是有专门的老师手把手教你，而且还有同学交流。那要学好技术，应该依循什么样的学习方法和教学方法呢？</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-6"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-7"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-8"><span class="crayon-i "> </span><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-9"><span class="crayon-i "> </span><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-10"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">自学而非手把手</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-11"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">技术的方向众多，而且知识点也是非常庞杂，需要你具备一定的自学能力，所谓自学能力就是要求你遇到问题能够勤于思考，擅于搜索，能够不断实践探索。在实际工作中，也要求你能根据技术文档可以迅速掌握前沿的技术，而同事不会有时间教你，如果没有自学能力，是很难胜任很多工作的。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-12"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-13"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-14"><span class="crayon-i "> </span><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-15"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">查阅文档而非死记知识点</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-16"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">在高中一学期一门课只有很薄的一本书，老师会反复讲解知识点，强化你的记忆，考试也是闭卷；而技术一个很小的分支，内容就有几千页甚至更多，强记知识点显然不合适。学习技术要像查词典一样来查阅技术文档，你只需要掌握基本的语法和用法，在编程的时候随时查阅，就像你不需要背诵上万的单词也能知道它的意思用法一样，所以技术文档是学习技术最为重要的参考资料。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-17"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-18"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-19"><span class="crayon-i "> </span><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-20"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">实战而非不动手的看书</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-21"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">技术是最强调结果的技能，你看了再多书，如果不知道技术成品是怎么写出来的，都是枉然。很多朋友有收集癖，下载了很多电子资源，收藏了很多高赞的技术文章，但是却没有动手去消化去理解，把时间和精力都浪费了。不动手在开发者工具里去写代码，不动手配置开发环境，缺乏实战的经验，都是阻碍你学好技术的坏习惯。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-22"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-23"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-24"><span class="crayon-i "> </span><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-25"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">搜索而非做伸手党</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-26"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">在以前，我们遇到技术问题，我们可以问老师问同学，于是很多人把这种不良的习惯也带到了技术的学习当中，遇到问题也总喜欢求助于别人。技术的方向众多，环境复杂，问题也是很多，如果你总是依赖别人的解答，是很难学好技术的。一定要学会在网上通过搜索遇到的问题来找答案。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-27"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-28"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-29"><span class="crayon-i "> </span><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-30"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">团队协作，而非单打独斗</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-31"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">一个产品涉及的技术非常多，需要很多人来一起配合才能开发好，所以学习技术的时候我们需要了解一些代码规范、工作的流程、项目管理等，在技术方面也会有API接口，接口文档这些，还要懂得如何和同职业的同事以及不同角色的人如设计师等一起配合，而不是自己一个人单打独斗。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-32"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-33"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-34"><span class="crayon-i "> </span><span class="crayon-r "><view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-35"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">系统的指导而非茫然无序</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-36"><span class="crayon-i "> </span><span class="crayon-r "><view></span><span class="crayon-i ">学好技术最依赖你自学，但是如果没有人指导你，你可能会像苍蝇一样陷入众多资料中茫然无序，抓不住一个技术的重点，也不清楚哪些技术才值得你深入学习，最好是有经验的人可以指点你应该看什么，学什么，什么才是重点，当然不是手把手教你。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-37"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-38"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-39"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-40"><span class="crayon-i "> </span><span class="crayon-r "></view></span><span class="crayon-i "> </span></div><div class="crayon-line" id="crayon-5d830a9c7fd4a524212563-41"><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<h4>WXSS选择器</h4>
<p>大家是不是已经发现我们写的小程序页面有点丑？那我们需要对这个小程序页面进行美化。但是我们的代码里面<view>组件这么多，要是不对每个组件进行区分，就很难对每个组件进行美化了。</p>
<p><strong>id与class选择器</strong></p>
<p>这个时候我们就要先了解一下选择器的概念。选择器是用来干什么的呢？从名字里我们就可以看出来，就是为了选择。比如学校有1000个人，我们要选择出其中一个人，那我们可以给所有人一个学号，这个学号是唯一的，我们可以称这个学号为<strong>id</strong>，用于精准的选择；还有的时候我们需要对一群人进行分类选择，比如整个班级或者所有男生，这个班级、性别，我们可以称为<strong>class</strong>，用于分类选择。</p>
<p>在wxss技术文档这里有关于选择器的描述。</p>
<p><strong>技术文档</strong>：<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html" target="_blank" rel="noopener noreferrer">WXSS技术文档</a></p>
<p><strong>给组件增加属性</strong></p>
<p>比如上面的view组件实在太多了，为了区分它们，我们给他们加一些属性，这样我们就可以用选择器选择它们了。</p>
<div id="crayon-5d830a9c7fd4c349015614" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;"><view id="wxmlinfo">
<view class="content">
<view class="title">WXML 模板</view>
<view class="desc">从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
</view>
</view>
</view></textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd4c349015614-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4c349015614-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4c349015614-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4c349015614-4" style="height: 40px;">4</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4c349015614-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4c349015614-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4c349015614-7" style="height: 20px;">7</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd4c349015614-1"><span class="crayon-r "><view </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"wxmlinfo"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4c349015614-2"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"content"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4c349015614-3"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"title"</span><span class="crayon-r ">></span><span class="crayon-i ">WXML 模板</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4c349015614-4"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"desc"</span><span class="crayon-r ">></span><span class="crayon-i ">从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4c349015614-5"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4c349015614-6"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4c349015614-7"><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>以及比较复杂的那一段代码的view组件也加上属性。给组件添加属性在外观上并不会有什么效果哦~</p>
<div id="crayon-5d830a9c7fd4f608201921" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;"><view id="studyweapp">
<view class="content">
<view class="header">
<view class="title">技术学习说明</view>
<view class="desc">技术和我们以往所接触的一些知识有很大的不同，比如英文非常强调词汇量，需要你多说多背；数学需要你记住公式，反复练习；在教学的方式上也有很大的不同，以前都是有专门的老师手把手教你，而且还有同学交流。
那要学好技术，应该依循什么样的学习方法和教学方法呢？
</view>
</view>
<view class="lists">
<view class="item">
<view class="item-title">自学而非手把手</view>
<view class="item-desc">技术的方向众多，而且知识点也是非常庞杂，需要你具备一定的自学能力，所谓自学能力就是要求你遇到问题能够勤于思考，擅于搜索，能够不断实践探索。在实际工作中，也要求你能根据技术文档可以迅速掌握前沿的技术，而同事不会有时间教你，如果没有自学能力，是很难胜任很多工作的。
</view>
</view>
<view class="item">
<view class="item-title">查阅文档而非死记知识点</view>
<view class="item-desc">在高中一学期一门课只有很薄的一本书，老师会反复讲解知识点，强化你的记忆，考试也是闭卷；而技术一个很小的分支，内容就有几千页甚至更多，强记知识点显然不合适。学习技术要像查词典一样来查阅技术文档，你只需要掌握基本的语法和用法，在编程的时候随时查阅，就像你不需要背诵上万的单词也能知道它的意思用法一样，所以技术文档是学习技术最为重要的参考资料。
</view>
</view>
<view class="item">
<view class="item-title">实战而非不动手的看书</view>
<view class="item-desc">技术是最强调结果的技能，你看了再多书，如果不知道技术成品是怎么写出来的，都是枉然。很多朋友有收集癖，下载了很多电子资源，收藏了很多高赞的技术文章，但是却没有动手去消化去理解，把时间和精力都浪费了。不动手在开发者工具里去写代码，不动手配置开发环境，缺乏实战的经验，都是阻碍你学好技术的坏习惯。
</view>
</view>
<view class="item">
<view class="item-title">搜索而非做伸手党</view>
<view class="item-desc">在以前，我们遇到技术问题，我们可以问老师问同学，于是很多人把这种不良的习惯也带到了技术的学习当中，遇到问题也总喜欢求助于别人。技术的方向众多，环境复杂，问题也是很多，如果你总是依赖别人的解答，是很难学好技术的。一定要学会在网上通过搜索遇到的问题来找答案。
</view>
</view>
<view class="item">
<view class="item-title">团队协作，而非单打独斗</view>
<view class="item-desc">一个产品涉及的技术非常多，需要很多人来一起配合才能开发好，所以学习技术的时候我们需要了解一些代码规范、工作的流程、项目管理等，在技术方面也会有API接口，接口文档这些，还要懂得如何和同职业的同事以及不同角色的人如设计师等一起配合，而不是自己一个人单打独斗。</view>
</view>
<view class="item">
<view class="item-title">系统的指导而非茫然无序</view>
<view class="item-desc">学好技术最依赖你自学，但是如果没有人指导你，你可能会像苍蝇一样陷入众多资料中茫然无序，抓不住一个技术的重点，也不清楚哪些技术才值得你深入学习，最好是有经验的人可以指点你应该看什么，学什么，什么才是重点，当然不是手把手教你。
</view>
</view>
</view>
</view>
</view></textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -28px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-5" style="height: 40px;">5</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-12" style="height: 60px;">12</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-14" style="height: 20px;">14</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-15" style="height: 20px;">15</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-16" style="height: 20px;">16</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-17" style="height: 60px;">17</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-18" style="height: 20px;">18</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-19" style="height: 20px;">19</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-20" style="height: 20px;">20</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-21" style="height: 20px;">21</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-22" style="height: 60px;">22</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-23" style="height: 20px;">23</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-24" style="height: 20px;">24</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-25" style="height: 20px;">25</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-26" style="height: 20px;">26</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-27" style="height: 60px;">27</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-28" style="height: 20px;">28</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-29" style="height: 20px;">29</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-30" style="height: 20px;">30</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-31" style="height: 20px;">31</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-32" style="height: 60px;">32</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-33" style="height: 20px;">33</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-34" style="height: 20px;">34</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-35" style="height: 20px;">35</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-36" style="height: 40px;">36</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-37" style="height: 20px;">37</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-38" style="height: 20px;">38</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-39" style="height: 20px;">39</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-40" style="height: 20px;">40</div><div class="crayon-num" data-line="crayon-5d830a9c7fd4f608201921-41" style="height: 20px;">41</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-1"><span class="crayon-r "><view </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"studyweapp"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-2"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"content"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-3"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"header"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-4"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"title"</span><span class="crayon-r ">></span><span class="crayon-i ">技术学习说明</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-5"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"desc"</span><span class="crayon-r ">></span><span class="crayon-i ">技术和我们以往所接触的一些知识有很大的不同，比如英文非常强调词汇量，需要你多说多背；数学需要你记住公式，反复练习；在教学的方式上也有很大的不同，以前都是有专门的老师手把手教你，而且还有同学交流。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-6"><span class="crayon-i "> 那要学好技术，应该依循什么样的学习方法和教学方法呢？</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-7"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-8"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-9"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"lists"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-10"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-11"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-title"</span><span class="crayon-r ">></span><span class="crayon-i ">自学而非手把手</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-12"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-desc"</span><span class="crayon-r ">></span><span class="crayon-i ">技术的方向众多，而且知识点也是非常庞杂，需要你具备一定的自学能力，所谓自学能力就是要求你遇到问题能够勤于思考，擅于搜索，能够不断实践探索。在实际工作中，也要求你能根据技术文档可以迅速掌握前沿的技术，而同事不会有时间教你，如果没有自学能力，是很难胜任很多工作的。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-13"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-14"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-15"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-16"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-title"</span><span class="crayon-r ">></span><span class="crayon-i ">查阅文档而非死记知识点</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-17"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-desc"</span><span class="crayon-r ">></span><span class="crayon-i ">在高中一学期一门课只有很薄的一本书，老师会反复讲解知识点，强化你的记忆，考试也是闭卷；而技术一个很小的分支，内容就有几千页甚至更多，强记知识点显然不合适。学习技术要像查词典一样来查阅技术文档，你只需要掌握基本的语法和用法，在编程的时候随时查阅，就像你不需要背诵上万的单词也能知道它的意思用法一样，所以技术文档是学习技术最为重要的参考资料。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-18"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-19"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-20"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-21"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-title"</span><span class="crayon-r ">></span><span class="crayon-i ">实战而非不动手的看书</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-22"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-desc"</span><span class="crayon-r ">></span><span class="crayon-i ">技术是最强调结果的技能，你看了再多书，如果不知道技术成品是怎么写出来的，都是枉然。很多朋友有收集癖，下载了很多电子资源，收藏了很多高赞的技术文章，但是却没有动手去消化去理解，把时间和精力都浪费了。不动手在开发者工具里去写代码，不动手配置开发环境，缺乏实战的经验，都是阻碍你学好技术的坏习惯。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-23"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-24"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-25"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-26"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-title"</span><span class="crayon-r ">></span><span class="crayon-i ">搜索而非做伸手党</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-27"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-desc"</span><span class="crayon-r ">></span><span class="crayon-i ">在以前，我们遇到技术问题，我们可以问老师问同学，于是很多人把这种不良的习惯也带到了技术的学习当中，遇到问题也总喜欢求助于别人。技术的方向众多，环境复杂，问题也是很多，如果你总是依赖别人的解答，是很难学好技术的。一定要学会在网上通过搜索遇到的问题来找答案。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-28"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-29"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-30"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-31"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-title"</span><span class="crayon-r ">></span><span class="crayon-i ">团队协作，而非单打独斗</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-32"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-desc"</span><span class="crayon-r ">></span><span class="crayon-i ">一个产品涉及的技术非常多，需要很多人来一起配合才能开发好，所以学习技术的时候我们需要了解一些代码规范、工作的流程、项目管理等，在技术方面也会有API接口，接口文档这些，还要懂得如何和同职业的同事以及不同角色的人如设计师等一起配合，而不是自己一个人单打独斗。</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-33"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-34"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-35"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-title"</span><span class="crayon-r ">></span><span class="crayon-i ">系统的指导而非茫然无序</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-36"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"item-desc"</span><span class="crayon-r ">></span><span class="crayon-i ">学好技术最依赖你自学，但是如果没有人指导你，你可能会像苍蝇一样陷入众多资料中茫然无序，抓不住一个技术的重点，也不清楚哪些技术才值得你深入学习，最好是有经验的人可以指点你应该看什么，学什么，什么才是重点，当然不是手把手教你。</span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-37"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-38"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-39"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-40"><span class="crayon-i "> </span><span class="crayon-r "></view></span><span class="crayon-i "> </span></div><div class="crayon-line" id="crayon-5d830a9c7fd4f608201921-41"><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<blockquote class="danger"><p>大家在学习的过程中，要随时在开发者工具的模拟器上查看效果，也要经常用微信扫码<strong>预览</strong>所生成的二维码来查看效果，千万不要只看教程怎么说，而是自己要动手去实战。</p></blockquote>
<h4>CSS参考手册</h4>
<p>给wxml文件的组件加了选择器之后，我们就可以在wxss文件里给指定的某个<view>组件以及某类<view>组件添加一些美化了，这里我们需要编辑home.wxss文件。wxss美化的知识和css是一样的，所以小程序的技术文档里面没有，大家可以看一下w3shool的CSS参考手册。CSS文件的作用就是来美化组件的。</p>
<p>技术文档：<a href="http://www.w3school.com.cn/cssref/index.asp" target="_blank" rel="noopener noreferrer">CSS参考手册</a></p>
<p>这里大家只需要了解CSS的<strong>字体属性</strong>、<strong>文本属性</strong>、<strong>背景属性</strong>、<strong>边框属性</strong>、<strong>盒模型</strong></p>
<blockquote class="danger"><p>CSS涉及的知识点非常多，现在大家也只需要知道有这些概念即可，学技术千万不要在<strong>没有看到实际效果的情况下</strong>来死记概念。概念没有记住一点关系都没有，因为大家可以随时来查文档。接下来我们也会有实际的例子让大家看到效果，大家想深入学习的时候可以回头再看这些文档。</p></blockquote>
<h4>字体属性与文本属性</h4>
<blockquote><p>下面这些关于CSS的基础知识点，大家可以结合我们是如何调整Word、PPT的样式的来理解，比如我们是怎么调整文本的大小、颜色、粗细等等的，添加样式的时候要注意随手实战了解了效果再说。</p></blockquote>
<p>比如class为title的<view>组件里面的文字是标题，我们需要对标题的字体进行加大、加粗以及居中处理，这时候我们就可以在home.wxss文件里加入以下代码，然后大家看看有什么效果。</p>
<div id="crayon-5d830a9c7fd51378832408" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">.title{
font-size: 20px;
font-weight: 600;
text-align: center;
}</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd51378832408-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd51378832408-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd51378832408-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d830a9c7fd51378832408-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d830a9c7fd51378832408-5" style="height: 20px;">5</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd51378832408-1"><span class="crayon-k ">.title</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d830a9c7fd51378832408-2"><span class="crayon-h"> </span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5d830a9c7fd51378832408-3"><span class="crayon-h"> </span><span class="crayon-e ">font-weight</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">600</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd51378832408-4"><span class="crayon-h"> </span><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">center</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd51378832408-5"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>通过
<span id="crayon-5d830a9c7fd53310355615" class="crayon-syntax crayon-syntax-inline crayon-theme-monokai crayon-theme-monokai-inline crayon-font-monaco" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important;"><span class="crayon-pre crayon-code" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><span class="crayon-sy">.</span><span class="crayon-v">title</span></span></span>这个选择器，我们就选择到了类class为
<span id="crayon-5d830a9c7fd55209233858" class="crayon-syntax crayon-syntax-inline crayon-theme-monokai crayon-theme-monokai-inline crayon-font-monaco" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important;"><span class="crayon-pre crayon-code" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><span class="crayon-v">title</span></span></span>的<view>组件，然后就可以精准地对它进行美化，对它的美化代码不会用在其他组件上了。</p>
<blockquote><p>大家也要留意css的写法，这里font-size，font-weight，text-align外面称之为属性，冒号:后面的我们称之为值，属性:值这一整个我们叫做声明，每个声明我们用分号;隔开。大家不要记这些概念，知道是个什么东西就行了。</p></blockquote>
<p>class为item-title的<view>组件里面的文字是一个列表的标题，我们希望它和其他文字的样式有所不同，不过这个标题要比title的字体小一些；比其他文字更粗，但是比title更细；颜色我们可以添加一个彩色字体，</p>
<div id="crayon-5d830a9c7fd56686015973" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">.item-title{
font-size:18px;
font-weight:500;
color: #c60;
}</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd56686015973-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd56686015973-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd56686015973-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d830a9c7fd56686015973-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d830a9c7fd56686015973-5" style="height: 20px;">5</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd56686015973-1"><span class="crayon-k ">.item-title</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d830a9c7fd56686015973-2"><span class="crayon-h"> </span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-i ">18px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd56686015973-3"><span class="crayon-h"> </span><span class="crayon-e ">font-weight</span><span class="crayon-sy">:</span><span class="crayon-i ">500</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd56686015973-4"><span class="crayon-h"> </span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#c60</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd56686015973-5"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>我们希望描述类的文字颜色浅一点，不要那么黑，我们可以换一个浅一点的颜色，我们在home.wxss下面继续加代码。</p>
<div id="crayon-5d830a9c7fd58726139158" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">.desc,.item-desc{
color: #333;
}</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd58726139158-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd58726139158-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd58726139158-3" style="height: 20px;">3</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd58726139158-1"><span class="crayon-k ">.desc,.item-desc</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d830a9c7fd58726139158-2"><span class="crayon-h"> </span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#333</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd58726139158-3"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<blockquote><p>大家注意，我们这里有两个选择器，一个是desc，一个是item-desc，当我们希望两个不同的选择器有相同的css代码时，可以简化一起写，然后用逗号,隔开。</p></blockquote>
<p>除了标题（class为title和item-title的<view>组件）我们都给他们加了字体大小，我们希望所有的文字大小、行间距有一个统一的设定。</p>
<div id="crayon-5d830a9c7fd5a549226325" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">#wxmlinfo,#studyweapp{
font-size:16px;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
line-height: 1.6;
}</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd5a549226325-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd5a549226325-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd5a549226325-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d830a9c7fd5a549226325-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d830a9c7fd5a549226325-5" style="height: 20px;">5</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd5a549226325-1"><span class="crayon-k ">#wxmlinfo,#studyweapp</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d830a9c7fd5a549226325-2"><span class="crayon-h"> </span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-i ">16px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd5a549226325-3"><span class="crayon-h"> </span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-apple-system-font,Helvetica</span><span class="crayon-h"> </span><span class="crayon-i ">Neue,Helvetica,sans-serif</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd5a549226325-4"><span class="crayon-h"> </span><span class="crayon-e ">line-height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">1.6</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd5a549226325-5"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>为了大家方便查阅技术文档，我们把这些常用的css技术文档整理到以下表格，方便大家更深入的去学习。</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th colspan="2">字体属性</th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_font_font-family.asp" target="_blank" rel="noopener noreferrer">font-family</a></th>
<td>规定文本的字体系列。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_font_font-size.asp" target="_blank" rel="noopener noreferrer">font-size</a></th>
<td>规定文本的字体尺寸。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_font_weight.asp" target="_blank" rel="noopener noreferrer">font-weight</a></th>
<td>规定字体的粗细。</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="2">文本属性</th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_text_color.asp" target="_blank" rel="noopener noreferrer">color</a></th>
<td>设置文本的颜色。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_dim_line-height.asp" target="_blank" rel="noopener noreferrer">line-height</a></th>
<td>设置行高。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_text_text-align.asp" target="_blank" rel="noopener noreferrer">text-align</a></th>
<td>规定文本的水平对齐方式。</td>
</tr>
</tbody>
</table>
<h4>盒模型</h4>
<p>大家有没有发现段落之间的距离、文字之间的距离，以及与边框之间的距离都比较拥挤？这个时候就需要用到盒子模型啦。盒子模型就像一个长方形的盒子，它有长度、高度、也有边框，以及内边距与外边距。我们通过实战来了解一下。</p>
<blockquote><p>长度、高度、边框我们比较好理解，那这个内边距和外边距是什么意思呢？</p>
<p>内边距就是这个长方形的边框与长方形里面的内容之间的距离，有上边距，右边距、下边距、左边距这个四个内边距，分别为padding-top，padding-right，padding-bottom，padding-left。注意是上、右、下、左，这样一个顺时针。</p>
<p>那外边距就是这个长方形的边框与长方形外面的内容之间的距离，同样也有上边距margin-top，右边距margin-right，下边距margin-bottom，左边距margin-left这个四个边距。同样也是上、右、下、左这个顺时针。</p></blockquote>
<p>比如我们给id为wxmlinfo和studyweapp的<view>组件加一个内部距，让文字</p>
<div id="crayon-5d830a9c7fd5c191713662" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">#wxmlinfo,#studyweapp{
padding-top:20px;
padding-right:15px;
padding-bottom:20px;
padding-left:15px;
}</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd5c191713662-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd5c191713662-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd5c191713662-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d830a9c7fd5c191713662-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d830a9c7fd5c191713662-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d830a9c7fd5c191713662-6" style="height: 20px;">6</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd5c191713662-1"><span class="crayon-k ">#wxmlinfo,#studyweapp</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d830a9c7fd5c191713662-2"><span class="crayon-h"> </span><span class="crayon-e ">padding-top</span><span class="crayon-sy">:</span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd5c191713662-3"><span class="crayon-h"> </span><span class="crayon-e ">padding-right</span><span class="crayon-sy">:</span><span class="crayon-i ">15px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd5c191713662-4"><span class="crayon-h"> </span><span class="crayon-e ">padding-bottom</span><span class="crayon-sy">:</span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd5c191713662-5"><span class="crayon-h"> </span><span class="crayon-e ">padding-left</span><span class="crayon-sy">:</span><span class="crayon-i ">15px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd5c191713662-6"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<blockquote><p><b>padding的简写 </b>上面这四个padding是可以做一定的简写的，关于padding的简写，大家可以去阅读以下技术文档，多用就会了，<a href="http://www.w3school.com.cn/cssref/pr_padding.asp" target="_blank" rel="noopener noreferrer">CSS padding属性 </a>，在这里有四个padding简写的案例，比如上面的这四条声明可以简写成padding:20px 15px。大家可以业余深入了解一下。</p></blockquote>
<p>class为title的view组件是标题，我们希望它和下面的文字距离大一点，我们可以添加以下样式:</p>
<div id="crayon-5d830a9c7fd6b743567384" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">.title,.item-title{
margin-bottom:0.9em;
}</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd6b743567384-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd6b743567384-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd6b743567384-3" style="height: 20px;">3</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd6b743567384-1"><span class="crayon-k ">.title,.item-title</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d830a9c7fd6b743567384-2"><span class="crayon-h"> </span><span class="crayon-e ">margin-bottom</span><span class="crayon-sy">:</span><span class="crayon-i ">0.9em</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd6b743567384-3"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>这里咋又冒出了一个em的单位，em是相对于当前字体尺寸而言的单位，如果当前你的字体大小为16px，那1em为16px；如果当前你的字体大小为18px，那1em为18px。</p>
<p>为了让class为item-title的<view>组件，也就是列表的标题更加突出，我们可以给它左边加一个边框，</p>
<div id="crayon-5d830a9c7fd6c051238703" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">.item-title{
border-left: 3px solid #c60;
padding-left: 15px;
}</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d830a9c7fd6c051238703-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d830a9c7fd6c051238703-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d830a9c7fd6c051238703-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d830a9c7fd6c051238703-4" style="height: 20px;">4</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d830a9c7fd6c051238703-1"><span class="crayon-k ">.item-title</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d830a9c7fd6c051238703-2"><span class="crayon-h"> </span><span class="crayon-e ">border-left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">3px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#c60</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd6c051238703-3"><span class="crayon-h"> </span><span class="crayon-e ">padding-left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">15px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d830a9c7fd6c051238703-4"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>这样，小程序的一篇文章的样式看起来就算马马虎虎可以接受啦~为了便于大家查阅，我们也把盒子模型的三类属性整合在了一起</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th colspan="2">内边距属性</th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_font_font-family.asp" target="_blank" rel="noopener noreferrer">padding</a></th>
<td>在一个声明中设置所有内边距属性。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_font_font-size.asp" target="_blank" rel="noopener noreferrer">padding-top</a></th>
<td>设置元素的上内边距。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_font_weight.asp" target="_blank" rel="noopener noreferrer">padding-right</a></th>
<td>设置元素的右内边距。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_font_weight.asp" target="_blank" rel="noopener noreferrer">padding-bottom</a></th>
<td>设置元素的下内边距。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_font_weight.asp" target="_blank" rel="noopener noreferrer">padding-left</a></th>
<td>设置元素的左内边距。</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="2">外边距属性</th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_margin.asp" target="_blank" rel="noopener noreferrer">margin</a></th>
<td>在一个声明中设置所有外边距属性。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_margin-top.asp" target="_blank" rel="noopener noreferrer">margin-top</a></th>
<td>设置元素的上外边距。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_margin-right.asp" target="_blank" rel="noopener noreferrer">margin-right</a></th>
<td>设置元素的右外边距</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_margin-bottom.asp" target="_blank" rel="noopener noreferrer">margin-bottom</a></th>
<td>设置元素的下外边距。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_margin-left.asp" target="_blank" rel="noopener noreferrer">margin-left</a></th>
<td>设置元素的左外边距。</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="2">边框属性</th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_border.asp" target="_blank" rel="noopener noreferrer">border</a></th>
<td>在一个声明中设置所有的边框属性。比如border:1px solid #ccc;</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_border-top.asp" target="_blank" rel="noopener noreferrer">border-top</a></th>
<td>在一个声明中设置所有的上边框属性。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_border-right.asp" target="_blank" rel="noopener noreferrer">border-right</a></th>
<td>在一个声明中设置所有的右边框属性。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_border-bottom.asp" target="_blank" rel="noopener noreferrer">border-bottom</a></th>
<td>在一个声明中设置所有的下边框属性。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_border-left.asp" target="_blank" rel="noopener noreferrer">border-left</a></th>
<td>在一个声明中设置所有的左边框属性。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_border-width.asp" target="_blank" rel="noopener noreferrer">border-width</a></th>
<td>设置四条边框的宽度。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_border-style.asp" target="_blank" rel="noopener noreferrer">border-style</a></th>
<td>设置四条边框的样式。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_border-color.asp" target="_blank" rel="noopener noreferrer">border-color</a></th>
<td>设置四条边框的颜色。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_border-radius.asp" target="_blank" rel="noopener noreferrer">border-radius</a></th>
<td>简写属性，设置所有四个 border-*-radius 属性。</td>
</tr>
<tr>
<th><a href="http://www.w3school.com.cn/cssref/pr_box-shadow.asp" target="_blank" rel="noopener noreferrer">box-shadow</a></th>
<td>向方框添加一个或多个阴影。</td>
</tr>
</tbody>
</table>
<p>更多的设计样式，大家可以根据上面的技术文档，在开发者工具里像做实验一样的来测试学习。</p>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<!-- <div class="sop-bottom">
<span class="sop-bottom-tip">想要更系统的指导和一起学习的伙伴，欢迎加入：</span>
<a target="_blank" class="sop-more" href="https://h5.youzan.com/v2/goods/361m5sscp7awc">线上学习社区</a>
<span class="sop-bottom-tip">进群加微信：jishuzu360</span>
</div> -->
</div><!-- #content -->
</div><!-- #primary -->
<link rel="stylesheet" id="crayon-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=_2.7.2_beta" type="text/css" media="all">
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/js/comment-reply.min.js?ver=5.2.2"></script>
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/themes/twentyfourteen/js/functions.js?ver=20150315"></script>
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/js/wp-embed.min.js?ver=5.2.2"></script>
<script type="text/javascript">
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"https:\/\/cloudbasegroup.org\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"};
/* ]]> */
</script>
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=_2.7.2_beta"></script>
<script src="https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/component/jquery.min.js"></script>
<script src="https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/component/bootstrap.min.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?8efc2c9aaaffb2f7a4cf6a7ff9c65cbb";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<style>.tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}.ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}</style></body></html>