免費參與·100+跨境活動 
免費下載·4000+跨境資料 
免費學(xué)習(xí)·2000+直播課程 
免費加入·15萬+賣家交流群 
2022-03-09 17:09
圖片來源：圖蟲創(chuàng)意
今天跟大家說說如何調(diào)整網(wǎng)頁的頁邊距，讓網(wǎng)頁的手機端自適應(yīng)。
圖片來源：WordPress截圖
Elementor編輯器
我最喜歡的使用的網(wǎng)頁編輯器Elementor，它可以幫助我們輕代碼甚至無代碼的條件下，搭建出漂亮，美觀，大氣的網(wǎng)站。
網(wǎng)頁的Margin, Padding, Border
圖片來源：WordPress截圖
Margin, Padding, Border是網(wǎng)頁前端設(shè)計里的CSS屬性，我們用了Elementor編輯器，就不用去廢寢忘食的學(xué)習(xí)CSS網(wǎng)頁前端設(shè)計，也可以很快的搭建出來漂亮外貿(mào)網(wǎng)站。
Margin: 網(wǎng)頁元素邊框以外的留的空白，上下左右都可以留白
Padding: 是網(wǎng)頁元素內(nèi)部的邊距，上下左右都可以留邊距
Border：邊框，可以設(shè)置邊框的厚度
我們可以把網(wǎng)頁的模塊想象成一個一個的盒子，盒子里面承載的是內(nèi)容content，盒子這個容器本身帶有邊框border（有一定的厚度，當(dāng)然也可以厚度為0，也就是沒有邊框）。盒子外邊的留白都叫margin，盒子內(nèi)部的間距都叫padding。
那我們知道了Margin, Padding, Border，就可以很好的去設(shè)計你的網(wǎng)頁元素了。
如何調(diào)整Margin, Padding
我們只要用了Elementor編輯器就可以很輕松的去設(shè)置調(diào)整網(wǎng)頁元素的Margin和Padding
圖片來源：WordPress截圖
在用Elementor編輯器設(shè)計網(wǎng)頁的時候，選擇你要調(diào)整的元素section，然后點擊advanced高級設(shè)置，就可以找到margin和padding設(shè)置，然后進行設(shè)置就可以了。
手機端調(diào)整
圖片來源：WordPress截圖
Elementor可以分別對電腦端web，手機端mobile 和平板tablet進行調(diào)整。
我建議手機端左右流出15~20像素的瀏覽，網(wǎng)頁效果是剛剛好的，不會太擁擠，也不會太膨脹，大家根據(jù)自己的喜好進行調(diào)整就可以啦。
建站咨詢
最后，大家有什么問題或者想說，都可以在留言區(qū)留言哦。如果大家需要建站服務(wù)，還可以隨時咨詢我哦，Peace Out~
（來源：小王子的外貿(mào)筆記）
以上內(nèi)容屬作者個人觀點，不代表雨果跨境立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。?
收錄于以下專欄
