影片教學

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

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

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

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

一. 網站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


網頁設計 問與答:

SEO 及 廣告投放 問與答 https://des13.com/faq/seo.html

網站建置 報價相關  https://des13.com/faq/quote.html

網站建置 技術相關  https://des13.com/faq/webtech.html

購物網站 網路開店    https://des13.com/faq/e-commerce.html

B2B形象官網建置   https://des13.com/faq/b2b.html

網站升級維護  https://des13.com/faq/upgrade.html


推薦閱讀:omo跨境品牌電子商務購物網站 全後台模組化形象官網

簡易電子書下載:一頁式網頁設計電子書

如果您喜歡我們的文章,歡迎分享!也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡

全後台模組化形象官網,符合各式商業模式與需求,請參考:https://des13.com/service/rwd.html

Written by Ring
作者:益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。 
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗

最新文章

原創、翻譯及轉貼的資訊都在這裡。

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
益盛科技

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

 

聯絡資訊

ring@des13.com

點此加我們LINE  @igodos 加line好友

406台中市北屯區文心路四段955號11樓之2(需預約諮詢)

04-37072202 /  0919-413187 

thedes13 

 
OMO電商 社群整合,輕鬆提升5倍轉換率,追蹤客戶行為,自動化行銷!想了解,快與我們聯絡! ×
點此加我們LINE 連結line帳號
DMC Firewall is a Joomla Security extension!