製作網頁時,某些時候會希望大螢幕(電腦)及小螢幕(手機、平板)的內容樣式可以不同,今天就要來教大家如何不用製作兩個網頁就能達到大小螢幕內容不同的效果囉!
我們先開啟一個 經典型區塊鏈(自由配) ,並在此區塊鏈新增您的內容,這裡我們就先使用開啟 BUDA_W100 製作大小螢幕需要的內容作示範。
背景顏色的語法如下(網路上有許多背景顏色參考網站,請於搜尋引擎尋找 顏色色碼 ):
background-color: #(顏色色碼);
因大小螢幕希望不同顯示內容,所以我們第二步驟先來隱藏小螢幕的內容,只先顯示大螢幕,那要怎麼隱藏呢?
首先我們在小螢幕(黃區塊)按右鍵,選擇 編輯DIV ,並在 一般 > 樣式表類別 內輸入 hidden-lg hidden-md
hidden-lg 及 hidden-md就是可以讓大螢幕的解析度中隱藏掉此框唷!
按下確認後,你會發現小螢幕的黃區塊不見了,這樣就代表你的動作正確唷!
接下來我們如法炮製,在大螢幕(綠區塊)按右鍵,選擇 編輯DIV ,但這次輸入的比較不一樣囉!
請在 一般 > 樣式表類別 內輸入 hidden-sm hidden-xs 並按下確定
顧名思義hidden-sm 及 hidden-xs就是讓小螢幕的解析度中隱藏掉我們的綠區塊!
上述步驟都完成後,您可以按下旁邊的進行預覽,您就可以發現電腦版大螢幕不會出現小螢幕的內容
手機、平板小螢幕也就不會出現大螢幕的內容囉!
恭喜你完成網頁區塊鏈同一頁製作不同內容的操作囉!
#網頁區塊鏈 #區塊鏈 #同一頁 #網頁區塊 #網頁修改 #查修網頁 #文字 #背景 #顏色 #css #製作不同內容 #製作 #修改 #大螢幕 #小螢幕 #手機 #平板 #電腦 #css #語法
規格詳情歡迎觀看光速人軟體規格表