104學習精靈

CSS
CSS
關注
邀請朋友
邀請朋友

Line

Facebook

複製連結

取消
關於教室
關注人數 262 人
104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
學習主持人
持續分享知識，
有機會成為官方教室主持人
教室標籤
  • CSS
    • 關於教室
    關注人數 262 人
    104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
    學習主持人
    持續分享知識，
    有機會成為官方教室主持人
    教室標籤
  • CSS
    • Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！
    我要分享
    我要提問

    CSS 學習推薦

    全部
    影片
    文章

    不知如何開始嗎？ 先進行技能挑戰吧～

    技能挑戰：初級
    目前等級：未達初級
    1683 人已通過「初級」測驗，通過率89%，和學習精靈一起探索知識、增強能力！
    我要挑戰
    PM雜學相談室－新手轉職PM交流區🙌
    關注
    104學習精靈

    產品

    04/26 16:22

    要如何判斷使用者的裝置？手機、PC、平板判別法
    在網頁開發中，了解使用者設備類型至關重要。透過User-Agent、CSS、JavaScript等方法，工程師可以根據不同設備提供最佳化的網頁體驗。以下為詳細說明：
    1. User-Agent 字串： 瀏覽器會傳一串資訊給網站，其中就包含了使用者的設備資訊，像是操作系統和設備類型。工程師可以查看這串資訊，從中判斷使用者是用手機、電腦還是平板。
    2. CSS 查詢： 工程師可以設計不同的網頁樣式，根據使用者的螢幕大小。比如，手機和平板可能會有不同的版面設計，而電腦則又不同。
    3. JavaScript 檢測： 工程師可以用 JavaScript 檢查使用者的螢幕大小，以及其他設備資訊。這樣就能大概知道使用者用的是什麼設備。
    4. 第三方庫或服務： 有一些工具可以幫助工程師判斷使用者的設備類型，不過這需要用到外部的程式庫或是服務。
    5. 瀏覽器特性： 一些瀏覽器本身就有辦法讓工程師取得設備資訊，不過這個方法限制比較多，並不是所有瀏覽器都支援。
    簡單來說，工程師可以透過這些方法來判斷使用者是用手機、電腦還是平板，進而調整網站的呈現方式，讓使用者有更好的使用體驗。
    0 0 814 0

    熱門精選

    104學習精靈 | 熱門文章推薦
    關注
    104學習精靈

    產品

    04/25 15:52

    【限量:免費報名】利用AI自動化行銷｜直播講座
    講座詳細資訊
    時間：04/30（二） 20:00 - 21:00
    講者：圭話行銷創辦人 何佳勳 / 業界資深的數位廣告行銷專家
    主題：行銷新篇章：AI如何革新檔期活動策略
    在這個數位化的時代，AI技術正以驚人的速度改變著我們的行銷方式。檔期促銷活動面對的受眾眾多，難以精準定位目標受眾，進而影響活動效果、每次規劃檔期活動都需要創造吸引人的內容和促銷方式，但長期以來，創意卻逐漸耗盡、想要掌握AI如何革新檔期活動策略的最新動向嗎？
    你也在苦思如何創造不同以往、有別競品的檔期活動嗎？104學習精靈與緯育TibaMe，攜手邀請到數位廣告界專家 圭話行銷創辦人何佳勳老師。學員們都稱呼他為小圭老師，不僅熱愛與學員社群互動、對學員有問必答，更善於為客戶的製造許多驚喜及營收，一起期待老師分享如何透過 AI 工具提升30%的檔期活動成效吧~
    【限量:免費報名】利用AI自動化行銷｜直播講座
    meet.104.com.tw
    【免費報名】行銷新篇章：如何使用AI規劃行銷活動｜直播講座｜104活動吧
    1 0 7066 0
    104學習精靈精選課程
    看更多課程
    想提升職場競爭力？專業技能課程看起來👇
    M365 Copilot 微軟AI高效工作流｜重塑AI工作新型態 效率提升50%UP
    如何運用M365 Copilot來提高生產力？微軟MVP王仲麒老師將引導你進入GenAI生產力世界，逐步探索M365 Copilot實務落地技巧，讓M365 Copilot成為你最佳AI副駕駛，你將學到M365 Copilot實用技巧，還能將GenAI技能直接用於你的工作，大大提升工作效率及品質！
    緯育TibaMe
    成為前端工程師｜透過 HTML 與 CSS 認識網頁設計，從 0 到 1 打造實用介面 (上集)
    還在為網頁該如何設計煩惱嗎？在這門 HTML & CSS 課程中，將從 HTML 基本架構寫法開始，到 CSS 樣式撰寫，帶你完整認識並掌握各類語法，並透過實作練習，讓你學習如何完美操控 HTML & CSS，輕鬆打造網頁無負擔！
    緯育TibaMe
    WordPress視覺排版設計超入門：CSS與HTML
    WordPress的網站外觀樣式是透過安裝主題來決定的，但因為這些主題並不是量身定做的，所有難免會有些地方不符合需求，比方說：中文字型、字體大小、字體顏色或是側邊欄寬度…等等之類的需求。這門課就是教你如何使用CSS完成屬於自己的網頁設計，讓你不需要工程師也能自己修改！
    緯育TibaMe
    成為前端工程師｜透過 HTML 與 CSS 認識網頁設計，從 0 到 1 打造實用介面 (下集)
    面對已經設計出來卻覺得還缺少東西的網站頁面，你還在持續苦惱中，且不知道該怎麼辦嗎？快來看看這門 HTML & CSS 下集課程。 此門課程將從上集的 HTML & CSS 基本概念繼續向外延伸，帶你掌握更多進階的網頁設計排版技術、動畫效果，去打造更有互動感的介面！
    緯育TibaMe
    【市價破萬】架設網站超值包!課程附贈一年主機空間 & WordPress外掛
    半價就能學到2門課：麻瓜絕對能上手的電商網站+形象網站架設。建置＋美化+SEO一次搞定！省下百萬架站費～付費購課贈送市價破萬的超大主機空間一年＋WP外掛授權哦！
    緯育TibaMe
    ASP.NET MVC 無痛快速上手
    本課程由淺入深，以豐富的實際案例帶領還未接觸過微軟的ASP.NET MVC初學者，在短時間內無痛上手ASP.NET MVC，快速掌握學習重點，並開發出實務案例的動態網站。
    緯育TibaMe
    學習精靈

    youtube.com
    CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線
    1112 46
    PM雜學相談室－新手轉職PM交流區🙌
    關注
    知識貓星球

    喵星人

    04/14 10:59

    Lighthouse - 優化效能指標的7大方法
    在 Lighthouse 中，效能（Performance）是指對網站或網頁應用程式的性能進行評估和測量。Lighthouse 的效能指標通常包括了以下幾個方面：
    1. 加載性能：衡量網站或應用程式加載速度的指標，如首次內容渲染時間（First Contentful Paint）和加載完成時間。
    2. 互動性：衡量用戶與網站或應用程式之間的互動性，如首次可交互時間（First Interactive）和動畫流暢度。
    3. 資源使用情況：衡量網站或應用程式所使用的資源，如 JavaScript 和 CSS 文件的大小、圖像壓縮情況等。
    4. 緩存策略：評估網站或應用程式是否正確使用瀏覽器緩存機制來提高加載速度和效能。
    5. 異步載入：評估是否使用了異步載入技術來減少阻塞渲染的時間，提高網站的響應性。
    要優化網站的性能，可以採取以下一些措施：
    1. 優化圖像和多媒體內容：
    ►使用適當的圖像格式（如 WebP）和壓縮工具來減小圖像大小。
    ►使用 Lazy Loading 技術僅在用戶滾動到它們時才加載圖像。
    ►壓縮和最小化多媒體文件（如視頻和音頻），以減少頁面加載時間。
    2. 減少 HTTP 請求：
    ►合併和壓縮 CSS 和 JavaScript 文件。
    ►使用 CSS Sprites 將多個圖像合併為一個圖像，減少 HTTP 請求次數。
    ►減少不必要的外部請求，例如移除不必要的第三方庫或插件。
    3. 瀏覽器緩存：
    ►正確配置 HTTP 緩存標頭，以使網頁資源可以在瀏覽器中進行緩存。
    ►使用 Service Workers 緩存資源，以便離線訪問時加速頁面加載。
    4. 優化代碼：
    ►優化 JavaScript 代碼，避免使用過多的迴圈和複雜的操作。
    ►移除不必要的重複代碼和功能，並避免不必要的重新渲染。
    5. 縮短首次渲染時間：
    ►最小化 HTML、CSS 和 JavaScript 文件的大小。
    ►將 JavaScript 放置在頁面底部，或使用異步載入以減少阻塞渲染的時間。
    ►使用 CDN（內容傳遞網絡）來加速資源載入時間。
    6. 優化移動設備體驗：
    ►使用 CSS Media Queries 和 Responsive Design 來確保網站在各種設備上呈現良好。
    ►減少不必要的動畫和特效，以提高移動設備上的性能。
    7. 定期監控和優化：
    ►使用工具（如 Lighthouse、Google PageSpeed Insights）定期測試和監控網站性能，並根據結果進行優化。
    ►分析用戶行為和網站性能指標，並持續改進和優化網站以提供最佳用戶體驗。
    這些是優化網站性能的一些常見方法，根據實際情況，你可以選擇適合你的網站的策略來改善性能~
    想知道更多PM知識，點擊共學，一起學習成長~
    0 0 1112 0
    學習精靈

    03/19 00:00

    youtube.com
    [HTML][中文][初學] 01. HTML / CSS / JavaScript 網頁開發基本介紹 (線上課程教學)
    4268 250

    推薦給你

    AI 趨勢報－科技愛好者的產地🤖
    關注
    104學習精靈

    產品

    1小時前

    AI 製圖會受著作權保護嗎？原來這個關鍵是判斷重點
    在台灣，AI生成的圖片是否具有著作權是一個複雜的問題，主要取決於人類與AI在創作過程中的參與程度。根據台灣的法律，著作權保護的對象限於人類的作品。
    如果AI被視為輔助創作工具，並且人類對作品有足夠的創意貢獻，那麼這樣的作品可能會受到著作權保護。然而，如果AI獨立創作，而人類的參與程度很低，則這樣的作品可能不會受到著作權法的保護。
    此外，使用AI生成的圖片可能會涉及侵權問題，因為AI工具在訓練過程中可能使用了未經授權的數據集。如果AI生成的圖片與受著作權保護的作品相似，可能會引起侵權爭議。
    因此，在商業用途中使用AI生成的圖片時，建議您仔細閱讀並遵守相關AI工具的使用條款，並考慮可能的法律風險。如果您有進一步的法律疑問，建議諮詢專業的法律顧問。
    0 0 26 0
    你可能感興趣的教室