如何用(yòng)好容器組件

容器是個(gè)很方便的(de)組件，靈活用(yòng)好容器，可(kě)以提高(gāo)你的(de)頁面設計效率，那麽下(xià)面我們用(yòng)示例來(lái)看下(xià)如何操作。

一、容器内的(de)組件可(kě)以随容器一起被複制。比如：容器内有文字、圖片等組件，複制容器時(shí)，文字和(hé)圖片組件也(yě)會同時(shí)被複制。那麽我們可(kě)以利用(yòng)這(zhè)個(gè)特性做(zuò)很多(duō)事情。

比如頁面上有很多(duō)類似的(de)标題

那麽 我們可(kě)以先在容器内做(zuò)一個(gè)出來(lái)

然後複制，容器内的(de)文字都會随著(zhe)容器被一起複制過來(lái)，那麽剩下(xià)的(de)隻需要修改裏面的(de)文字就可(kě)以很快(kuài)速的(de)做(zuò)出多(duō)個(gè)标題來(lái)。

同理(lǐ)，在内頁上我們會有很多(duō)類似的(de)二級欄目和(hé)導航标題以及其他(tā)一些相同的(de)内容，也(yě)可(kě)以放在容器中，通(tōng)過複制，修改相關内容達到快(kuài)速實現效果的(de)目的(de)。

隻需在容器内做(zuò)一個(gè)列表出來(lái)，剩下(xià)兩個(gè)複制粘貼，修改圖片和(hé)列表的(de)來(lái)源就可(kě)以得(de)到相同的(de)設計效果了(le)。

這(zhè)裏在告訴大(dà)家一個(gè)小竅門，當複制出三個(gè)列表容器以後，将最邊上的(de)兩個(gè)貼到系統輔助線的(de)邊上。

然後，在沒有選中任何組件的(de)情況下(xià)，按住Ctrl鍵，逐一選中三個(gè)列表容器，然後點擊上面工具欄的(de)上對(duì)齊

然後點擊橫向等間距對(duì)齊

那麽三個(gè)列表項就很輕松的(de)對(duì)齊了(le)

二、用(yòng)容器組合多(duō)個(gè)組件。下(xià)面的(de)圖上就是利用(yòng)容器做(zuò)的(de)色塊，透明(míng)的(de)背景都是用(yòng)一個(gè)很小的(de)透明(míng)背景png圖片來(lái)做(zuò)的(de)，裏面的(de)人(rén)物(wù)和(hé)文字按照(zhào)需要放入到容器内，拖動容器，就可(kě)以很輕松的(de)将裏面的(de)内容一齊拖到想要的(de)地方。輕松的(de)移動也(yě)會大(dà)大(dà)提高(gāo)你的(de)設計效率。