【慕課筆記】用技術打造小程序簡歷_3設計簡歷封面

上一篇:【慕課筆記】用技術打造小程序簡歷_2初始化小程序代碼和FLEX佈局
下一篇:【慕課筆記】用技術打造小程序簡歷_4xxxxxx


簡歷封面設計

(1)簡歷封面demo,分析各個元素
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
(2)增加圖片到view層,但是圖片顯示的尺寸是有問題的,如何解決呢?加mode=“widthFix”即可保持圖片原有屬性了。
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
(3)封面文字的部分
view層編寫代碼
在這裏插入圖片描述
模型層賦值變量
在這裏插入圖片描述
樣式層編寫樣式
在這裏插入圖片描述
(4)封面氣泡元素的編碼(涉及3個氣泡)
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
(5)腰封的文字部分
在這裏插入圖片描述
在這裏插入圖片描述
增加樣式
在這裏插入圖片描述
padding內填充,display:block模型,可以讓文字獨佔一行,即換行實現。

(6)向右滑動的箭頭部分
在這裏插入圖片描述
在這裏插入圖片描述
文字和箭頭水平方向沒有對齊,可以加vertical-align來進行調整。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章