這段影片將展示如何製作 響應式 網頁設計，在桌機與手機版網頁中顯示不同的圖片。

透過操作示範，您將學會如何使用 響應式 網頁設計 ，在不同裝置上自動隱藏或顯示特定圖片，

並根據裝置大小調整圖片的尺寸設定，達到最佳視覺效果。

一. 網站banner的漸層效果

為您說明如何去除旁邊的 banner 漸層效果。

這個漸層效果其實是寫在 CSS 裡面的。

您可以按照以下步驟操作：

1. 先點選頁面的 "前端編輯" 模式。
2. 進入編輯後，選取您想修改的 slider。
3. 拉到下方找到相關的 CSS，將控制漸層效果的程式碼刪除。
4. 按下儲存，這樣黑色漸層效果就會消失了。

二. 響應式網頁設計：如何在桌機與手機顯示不同圖片

如何在桌機版和手機版顯示不同的圖片，我們可以這樣處理：

1. 桌機和手機版的圖片高度都是設定為 350px。
2. 複製現有的圖片區塊，這樣就會有兩個相同的圖片區塊。
3. 將原本的圖片設定為 只在桌機上顯示，操作步驟如下：
   • 點選區塊的設定按鈕（通常是三個點）。
   • 選擇 "響應式" 選項。
   • 設定該區塊 在手機上隱藏，這樣手機版就不會顯示這張圖片。
4. 然後，針對第二張圖片，設定為 只在手機上顯示：
   • 同樣點選該區塊的設定按鈕。
   • 進入 "響應式" 設定，這次將圖片在平板與桌機上隱藏。
   • 這樣這張圖片只會在手機版上顯示。

當這個步驟完成後，您可以直接在手機版上修改圖片。

通常手機版的圖片寬度約為 430px，高度是 350px。

相關文章

網頁設計 網站教學：怎麼做 響應式網頁？

https://des13.com/youtube/1586-youtube4.html

網站教學：無須程式碼，輕鬆做網頁

https://des13.com/youtube/1585-youtube3.html

網站後台系統：全功能、簡單易用的理想選擇

https://des13.com/faq/cms/joomla/1566-backend.html

網頁設計 頁面編輯器 Page Builder ：無需寫程式碼：輕鬆上手教學

https://des13.com/news/1563-page-builder.html

網頁設計　問與答：