104學習精靈

CSS

CSS
關注
邀請朋友
邀請朋友

Line

Facebook

複製連結

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

CSS 學習推薦

全部
影片
文章

不知如何開始嗎? 先進行技能挑戰吧~

技能挑戰:初級
目前等級:未達初級
1677 人已通過「初級」測驗,通過率89%,和學習精靈一起探索知識、增強能力!
我要挑戰
104學習精靈

產品

12小時前

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

熱門精選

104學習精靈

產品

04/25 15:52

【限量:免費報名】利用AI自動化行銷|直播講座
講座詳細資訊
時間:04/30(二) 20:00 - 21:00
講者:圭話行銷創辦人 何佳勳 / 業界資深的數位廣告行銷專家
主題:行銷新篇章:AI如何革新檔期活動策略
在這個數位化的時代,AI技術正以驚人的速度改變著我們的行銷方式。檔期促銷活動面對的受眾眾多,難以精準定位目標受眾,進而影響活動效果、每次規劃檔期活動都需要創造吸引人的內容和促銷方式,但長期以來,創意卻逐漸耗盡、想要掌握AI如何革新檔期活動策略的最新動向嗎?
你也在苦思如何創造不同以往、有別競品的檔期活動嗎?104學習精靈與緯育TibaMe,攜手邀請到數位廣告界專家 圭話行銷創辦人何佳勳老師。學員們都稱呼他為小圭老師,不僅熱愛與學員社群互動、對學員有問必答,更善於為客戶的製造許多驚喜及營收,一起期待老師分享如何透過 AI 工具提升30%的檔期活動成效吧~
1 0 1578 0
104學習精靈精選課程
看更多課程
想提升職場競爭力?專業技能課程看起來👇
Web全端程式設計
Desktop Application及Install Wizard 將漸漸消失!Web APP程式開發將成為應用程式開發主流,未來任何東西都會在網路上,而未來所有的軟體程式都將用瀏覽器來執行 瀏覽器的能力將會愈來愈強,別停留在Web不就是個人網頁而已,...No! 那是20年以前的狀況。未來Web APP程式開發將成為應用程式開發主流,未來任何東西都會在網路上,應用程式也幾乎依賴瀏覽器來執行!換言之,瀏覽器就可以跑任何應用程式,開發者不須再各別為Windows、Linux、MacOS、 Android APP、iPhone等平台寫程式了。真的寫不完,不要說寫連維護都很難,因為沒有這麼多資源,可以養這麼多人去維護這麼多平台的程式碼。當然,可以找一個可以精通兩個平台以上的工程師,但實在太少了。瀏覽器的功能會逐漸增強,用AJAX, WebSocket(一種TCP Socket) 就能用瀏覽器進行雙向多工通訊,透過Canvas就可以在瀏覽器進行2D/3D繪圖,這些都是瀏覽器功能不斷演進才有的面貌。 [100%實作導向] 在每一個技術除了給你最清楚的觀念外,都有講師設計好準備讓你融會貫通的範例程式,讓你快速進行演練。課程不囉嗦! 強調動手實戰。 [名師醍醐灌頂] 對於初學者一開始想要進入Web APP開發領域,通常會發現,這個領域技術推進的步調很快且技術間盤根錯節! 艾鍗師資最厲害的地方就是,很複雜的東西可以講得很簡單,一針見血把技術精髓道盡! 要快速掌握Web程式精髓,唯有觀念清楚,才能快速開發,不得其要領,將曠日費時。 學習目標 1. 清楚了解Web前後端架構與DOM架構。 2. 精通JavaScript 程式語言與除錯方法。 3. 學會用JQuery操作HTML、CSS及FORM表單處理。 4. 掌握Node.js 處理異步、單執行緒與非阻塞I/O等關鍵技術。 5. 學會AJAX 及Webscoket的Web通訊方法。 6. 會用Express為Web和移動應用程序提供強大功能。 7. 會使用HTML模板引擎讓開發事半功倍。 8. 學會使用MongoDB資料庫進行資料的新增、更新、刪除、查詢動作。 章節架構 第一階段:Web 前端程式設計-JavaScript & JQuery ★ Web基礎概念 1. Web 技術前端技術架構與DOM架構簡介 2. HTML 簡介與Tag 概念 3. CSS 簡介與Style 屬性 ★ JavaScript 程式語言 1. 關於JavaScript 2. 開發方式與除錯方法 3. JavaScript 操作HTML DOM & Browser Object Model 4. JavaScript 變數 & 基本資料型態 5. JavaScript運算式與運算子 6. JavaScript物件 型態 7. JavaScript陣列 型態 8. JavaScript函式 1) call by value & call by reference式 2) Self-Invoking Functions 3) Nested Function 4) Function Closures 1. JavaScript 數值處理與型別轉換 2. JavaScript Array Methods 1) push , pop, split, map 1. JavaScript Timing Events 2. JavaScript類別定義 (Object with property and method) 3. JSON資料格式與處理 4. Image Map ★ 使用JQuery 1. JQuery簡介 2. JavaScript vs JQuery 3. JQuery selectors 4. JQuery操作HTML DOM 5. JQuery操作CSS 6. JQuery Form表單處理 7. HTTP GET vs HTTP POST 8. JQuery AJAX 第二階段:Web 後端程式開發-Node.js ★ 關於Node.js 1. 非同步式 I/O 與事件式程式設計 2. 安裝Node.js 3. Node Package Manage: 使用npm 4. 製作package.json 5. 我的第一個node.js "Hello world" ★ Node.js HTTP 請求與回應 1. Node.js 處理HTTP Get & Post 2. Express HTTP Server提供靜態檔案 3. 用Express處理HTTP Get & Post ★ Node.js 其他模組 1. Child Process Module 2. File System Module 3. Net Module-Socket 網路通訊 ★ HTML Template Engine 1. Why use Template Engine ? 2. Handlebars.js Template Engine 3. Handlebars.js 的運作流程說明 4. Client Side HTML範本引擎 (Template Engine) 5. 實驗 Handlebars.js ★ The WebSocket Protocol 1. 各種Web 通訊方法 2. Long Polling技術 3. Lab:實驗: Websocket 前後端通訊 4. Lab:實驗: 建立多人聊天室 ★ MongoDB 1. MongoDB 簡介與使用 2. Node.js 操作MongoDB 3. Lab實驗: 使用Node.js 進行新增/查詢/更新/刪除 MongoDB ★ Node.js Serial 序列資料讀取 1. Node.js 讀取micro:bit 資料使用序列界面 2. Canvas.js 動態折線圖結 3. Lab實驗: 使用瀏覽器顯示Micro:bit狀態(A,B按鍵與加速度計值)
艾鍗學院
學習精靈

1105 46
知識貓星球

喵星人

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 1098 0
學習精靈

03/19 00:00

4251 250

推薦給你

知識貓星球

喵星人

6小時前

地震不再是不可預測的天災?AI 預測準確率達70%
最近,美國德州大學奧斯汀分校的研究人員開發了一種新的 AI 地震預測技術,成功預測了一週內將會發生的地震,預測準確率達到 70%!
在中國的實驗中,這個AI成功預測了320公里範圍內的14次地震,並且準確預測了地震的位置和強度。
雖然這個AI技術還是有錯過以及誤報的失誤,但70%已經是一個巨大的成果,可以有效幫助減少經濟損失和人員傷亡。
▶ Al地震預測技術如何運作?◀
● Al地震預測技術主要通過以下三個步驟來實現:
1. 數據收集:首先,需要收集大量的地震數據,包括地震波數據、地質數據、氣象數據等。
2. 數據分析:然後,利用AI技術對這些數據進行分析,找出地震發生前的規律和特徵。
3. 預測地震:最後,根據這些規律和特徵,預測未來可能發生的地震。
● Al地震預測技術具有以下優勢:
❶ 準確率高:AI技術可以從大量數據中找出傳統方法難以發現的規律和特徵,從而提高地震預測的準確率。
❷ 速度快:AI技術可以快速分析大量數據,從而縮短地震預測的時間。
❸ 範圍廣:AI技術可以對廣泛的地區進行地震預測,不受傳統地震儀的限制。
▶ Al地震預測技術的未來展望 ◀
AI地震預測技術的發展還處於起步階段,但其潛力巨大。隨著AI技術的進一步發展,地震預測的準確率和範圍將會進一步提高,為人們的生命和財產安全提供更加有效的保障。
● 以下是一些AI地震預測技術未來發展的可能方向:
❶ 開發更準確的AI模型:通過不斷研究和完善AI模型,提高地震預測的準確率。
❷ 融合多種數據源:將地震波數據、地質數據、氣象數據等多種數據源融合在一起,進行分析,提高地震預測的準確率和範圍。
❸ 開發實時地震預警系統:開發實時地震預警系統,為人們提供更及時有效的預警信息。
Al地震預測技術的發展,為地震預測和防災減災工作帶來了新的希望。相信在不久的將來,地震將不再是不可預測的天災,人們將能夠更加有效地應對地震災害,減少地震造成的損失!
➤ 立即關注【AI趨勢報-科技愛好者的產地】獲得更多科技新知!
0 0 121 0
你可能感興趣的教室