104學習精靈

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

Line

Facebook

複製連結

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

    CSS 學習推薦

    全部
    影片
    文章

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

    技能挑戰：初級
    目前等級：未達初級
    1684 人已通過「初級」測驗，通過率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 996 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
    【市價破萬】架設網站超值包!課程附贈一年主機空間 & WordPress外掛
    半價就能學到2門課：麻瓜絕對能上手的電商網站+形象網站架設。建置＋美化+SEO一次搞定！省下百萬架站費～付費購課贈送市價破萬的超大主機空間一年＋WP外掛授權哦！
    緯育TibaMe
    ASP.NET MVC 無痛快速上手
    本課程由淺入深，以豐富的實際案例帶領還未接觸過微軟的ASP.NET MVC初學者，在短時間內無痛上手ASP.NET MVC，快速掌握學習重點，並開發出實務案例的動態網站。
    緯育TibaMe
    成為前端工程師｜透過 HTML 與 CSS 認識網頁設計，從 0 到 1 打造實用介面 (下集)
    面對已經設計出來卻覺得還缺少東西的網站頁面，你還在持續苦惱中，且不知道該怎麼辦嗎？快來看看這門 HTML & CSS 下集課程。 此門課程將從上集的 HTML & CSS 基本概念繼續向外延伸，帶你掌握更多進階的網頁設計排版技術、動畫效果，去打造更有互動感的介面！
    緯育TibaMe
    學習精靈

    youtube.com
    CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線
    1113 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 1120 0
    學習精靈

    03/19 00:00

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

    推薦給你

    超級辦公室達人
    關注
    104學習精靈

    產品

    7小時前

    win10怎麼切全形？怎麼分辨全形半形，一次告訴你
    1. 什麼是全形和半形字符？
    全形字符是指佔據一個全角位置的字符，通常用於中文、日文等語言中。半形字符是指佔據一個半角位置的字符，通常用於英文、數字等語言中。
    2. 全形和半形字符有什麼區別？
    全形字符的寬度是半形字符的兩倍，因此在排版和顯示上會佔用更多的空間。這在文字對齊和佈局中可能會產生差異。
    3. 如何在電腦上切換全形和半形模式？
    在大多數應用程式中，可以使用 Shift 鍵加上 Space 鍵來切換全形和半形模式。
    4. 為什麼在文書處理軟體中，中文字符會自動轉換為全形？
    在中文輸入法中，為了與英文半形字符區分開來，中文字符通常會自動轉換為全形字符，這樣更符合中文排版的需求。
    5. 全形和半形字符的使用有什麼注意事項？
    在進行排版和設計時，需要考慮全形和半形字符的寬度差異，以確保文字對齊和版面設計的一致性。
    6. 全形和半形字符在標點符號上有什麼差異？
    在標點符號上，全形字符通常比半形字符更大、更寬，這在排版和版面設計中需要注意。
    7. 全形和半形字符的用途有哪些？
    全形字符通常用於中文、日文等語言的文字排版，而半形字符則通常用於英文、數字等語言的文字排版。
    8. 如何在Windows 10中切換全形和半形模式？
    在Windows 10中，可以使用 Shift 鍵加上 Space 鍵來切換全形和半形模式。
    9. 全形和半形字符在資料庫存儲中的處理有什麼需要注意的地方？
    在資料庫存儲中，需要確保對於全形和半形字符的處理能夠保持一致性，以避免數據錯誤或顯示問題。
    10. 全形和半形字符的使用與國際化設計有何關係？
    在進行國際化設計時，需要考慮到不同語言使用的字符寬度差異，以確保文字可以正確顯示和排版。
    關注我們~知道更多辦公室小知識！
    1 0 391 0
    你可能感興趣的教室