捕鱼游戏哪个好玩捕鱼游戏大全

任務(wù)2 設(shè)置頭像的樣式

任務(wù)描述

設(shè)置頭像的樣式。

1）導(dǎo)入項目：任務(wù)2 Hello World（可參考任務(wù)1的方法創(chuàng)建該任務(wù)）。

2）修改頭像樣式，去除圓角。

3）修改頭像樣式，修改高度和寬度。

操作步驟

1 啟動微信開發(fā)者工具，執(zhí)行“項目/查看所有項目”命令，如圖1-8所示。

圖1-8 執(zhí)行“項目/查看所有項目”命令

2 選擇“小程序”，單擊“+”，如圖1-9所示。

3 單擊“導(dǎo)入項目”按鈕，目錄選擇“任務(wù)2 Hello World”，如圖1-10所示。

4 成功導(dǎo)入項目后的界面如圖1-11所示。

5 打開index.wxml，查看用于頭像的image組件，image組件可以實現(xiàn)顯示圖像，還沒設(shè)置樣式，如class="userinfo-avatar"，如圖1-12所示。

圖1-9 單擊“+”

圖1-10 單擊“導(dǎo)入項目”按鈕

圖1-11 成功導(dǎo)入項目后的界面

圖1-12 class="userinfo-avatar"

6 打開index.wxss，查看.userinfo-avatar樣式代碼。

經(jīng)驗分享

●wxml。

在小程序中，wxml相當(dāng)于網(wǎng)頁設(shè)計的HTML的角色。標(biāo)簽名字與HTML有一些不同，小程序wxml用的標(biāo)簽是view、button、text等，還提供了地圖、視頻、音頻等組件。

●wxss。

wxss是一套樣式語言，用來決定WXML的組件應(yīng)該怎么顯示。

wxss具有CSS的大部分特性。

wxss對CSS進(jìn)行了擴(kuò)充以及修改，以適應(yīng)微信小程序的開發(fā)。

7 刪除.userinfo-avatar樣式代碼中的“border-radius:50%;”，會發(fā)現(xiàn)頭像圖片變成了方角，如圖1-13所示。

8 在.userinfo-avatar樣式代碼中，把“width:128rpx;”“height:128rpx;”更改為“width:228rpx;”“height:228rpx;”，會發(fā)現(xiàn)頭像圖片變大了，如圖1-14所示。

圖1-13 頭像圖片變成了方角

圖1-14 頭像圖片變大了