Contributes66
Followers0
Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 本 CSS 系列文章： 主推學以致用。結合面試題和工作實例，讓小夥伴們深入體驗 61 個工作常見的 CSS 屬性和各種 CSS 知識。 主推純 CSS。儘可能使用 HTML + CSS 完成學習目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知識，適合新人學習 + 大佬複習。 如果文章在一些細節
Nickname jsliang
Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 今兒要實現的是：Dropdown 下拉麪板 本期將和小夥伴們探討： √ 通過精簡結構，講解 HTML 和 CSS 搭配如何實現 Dropdown 下拉麪板 本實例的代碼地址： Github - all for one 碼上掘金 - 04 - Dropdown 下拉麪板 視頻講解 一 前言 本 CSS 系
Nickname jsliang
效果圖預覽： 完整代碼如下： !DOCTYPE html html head title純css編寫開關按鈕點擊切換/title style type="text/css" #toggle-button{ display: none; } .button-label{ position: relative; displa
Nickname Winn
CSS 的發展速度比以往任何時候都要快。在 Flexbox 和 Grid 之後，CSS 的發展似乎經歷了一段漫長的停滯期，但在近幾年，CSS 已經新增了許多新功能可用，而且還會有更多新功能即將推出。這個發展速度是令人興奮的，同時也有些壓倒性。 雖然 CSS 新增了很多新功能，但很多 Web 開發者都認為這些花裏胡哨的東西並沒有給自己帶來實質上的變化。換句話説，所有這些花裏胡哨的東西（CSS 新特
Nickname 大漠
CSS值的定義到最終渲染實際上會經過一系列的步驟，這一過程在W3C Recommendation中有介紹，整個過程一共分為6步： 聲明值：應用於元素的每個屬性都會為它提供一個聲明值，當然也可能存在多個，比如在多個樣式表中重複聲明 級聯值：這一步其實就是在計算樣式屬性的權重，從而得到一個權重最高的值 指定值：它一般等於級聯值或者默認值，繼承屬性用的繼承值 inherit，非繼承屬性將用初
Nickname 奔放的炒粉
源代碼下載： learnangular-cn.html AngularJS 教程 AngularJS 1.0 版在 2012 年發佈。 Miško Hevery, 一位 Google 員工， 從 2009 年開始開發 AngularJS。 結果發現這個想法很好，從而該項目現在也被 Google 官方所支持了。 AngularJS 是一個 JavaScript 框架。它可以通過一個 "s
Nickname 小X學技術
在 Web 開發中，佈局一直是 CSS 的一個重要主題，而水平和垂直居中往往是佈局中最常見、最基礎的需求。傳統的居中方法通常需要使用多層嵌套、position、margin 等屬性來實現，代碼繁瑣且不夠靈活。而隨着 CSS 彈性佈局（Flexbox）的引入，水平和垂直居中變得非常簡單、直觀，幾乎可以適應所有的佈局場景。 本文將專注於如何使用 CSS Flexbox 來實現內容的自適應居中，包括水平
Nickname 用户bPdeG32
前言 石匠敲擊石頭的第 15 次 在平常開發的時候，有時候會遇到使用 z-index 調整元素層級沒有效果的情況，究其原因還是因為對層疊上下文不太瞭解，看了網上很多前輩的文章，決定打算寫一篇文章來梳理一下，如果哪裏寫的有問題歡迎指出，不勝感激。 什麼是層疊上下文 層疊上下文（Stacking Context）是 HTML 中的三維概念，它決定了元素在 Z 軸（垂直於電腦屏幕的方向） 上的顯示順序。
Nickname CodePencil
前言 石匠敲擊石頭的第 16 次 在日常開發中，經常會遇到水平垂直居中的佈局，雖然現在基本上都用 Flex 可以輕鬆實現，但是在某些無法使用 Flex 的情況下，又應該如何讓元素水平垂直居中呢？這也是一道面試的必考題，所以打算寫一篇文章來好好梳理一下，如果哪裏寫的有問題歡迎指出，不勝感激。 分類 實現元素水平垂直居中的方法有很多，大致可以分為以下兩類： 固定寬高元素適用的方法 不固定寬高元素
Nickname CodePencil
div class=box1/div .box1{ width:100px; height:100px; margin:auto; animation:myMove .5s infinite alternate linear; -moz-animation:myMove .5s infinite alternate linear; -webkit
Nickname 蒳某泥
前言 最近在抖音上刷到這種文字表白特效，覺得挺有意思的，就想着自己也能用代碼實現一個,雖然實現得比較基礎，但效果還挺像那麼回事！分享出來給大家參考，也期待大佬們給出更好的實現方案～ 實現效果: 在屏幕內隨機出現div盒子,位置隨機,內容隨機選,要求動態的一個個淺出 css部分 div { width: 200px; height: 100px; text-align: c
Nickname 臨在
在前端頁面 UI 開發時，如何能快速查看頁面的結構佈局？ html * { outline: 1px solid red !important; } outline 屬性不會增加元素的尺寸，比 border 要好。
Nickname 起風了
歡迎關注我的公眾號：前端偵探 再次介紹一些你可能沒用過的SVG小技巧。 有時候會遇到一些完全相同的圖形，如果能用上 CSS背景平鋪，那就再合適不過了。舉個例子，有這樣一個按鈕 相比普通的按鈕，多個左右兩個小裝飾，如果是你，會怎樣實現呢？ 假設這個小圖標是a.svg，想了一下，應該有以下幾種方式 1.偽元素 剛好用上::before和::after，設置相同的背景就行了，示意如下 butto
Nickname XboxYan
近日，備受矚目的第二屆中國 SVG 開發者大會在上海市由 E2.COOL 黑科技 SVG 編輯器主持承辦並正式開幕。本次大會吸引了來自全國各地的 SVG 技術精英和頂尖團隊，共同探討融媒體交互技術的創新應用、版權保護與發展前景。大會期間，學術議程 SVG 創新生態與知識產權保護研討會於復旦大學成功舉行。 本次活動以主旨演講與圓桌論壇的形式，圍繞“SVG 創新生態與知識產權保護”主題進行了深入分析與
Nickname 計育韜
調度性的定義：當我們執行trigger動作觸發副作用函數重新執行時，有能力決定副作用函數的時機、次數以及方式 控制執行時機 先來看看如何決定副作用函數的執行方式 const data = { foo: 1 } const obj = new Proxy(data, {}); // 為了演示，省略代理配置 effect(() = { console.log(obj.foo); }) obj.
Nickname 兔子先森
在深入瞭解計算屬性之前，我們需要先知道懶執行的effect，也就是lazy的effect 我們現在實現的effect函數會立即執行傳遞給它的副作用函數，例如： effect( // 這個函數會立即執行 () = { console.log('執行了'); } ) 但有的時候我們不需要他立即執行，而是在需要的時候才執行，這個特性就跟計算屬性很像 我們可以在option
Nickname 兔子先森
簡易watch監聽 watch其實就是監聽給定的響應式數據變化，當數據變化時執行的回調函數 watch(obj, () = { console.log("數據變化了"); }) // 修改obj數據，watch自動觸發 obj.foo++ 實際上，watch就是利用了effect以及options.scheduler選項 effect( () = { console
Nickname 兔子先森
watch的本質其實是對effect的二次封裝 watch的兩個特性： 1、立即執行的回調函數 2、回調函數的執行時機 立即執行的回調函數 在vue.js中，watch通過immediate屬性來實現立即執行，如下 watch(obj, () = { console.log('變化'); }, { immediate: true }) 當immediate存在並且為tr
Nickname 兔子先森
我們平時可能不太關注"競態"的問題，但是你在日常的工作中可能或多少遇到過"競態" let finalData; watch(obj, async () = { // 發送一個請求 let res = await fetch('/api/request'); // 將數據保存到finalData finalData = res; }) 這段代碼看起來沒問題，實際上會發
Nickname 兔子先森
本文通過一個具體的動畫需求，來講解一下js中animationend事件使用 在線演示效果一：https://ashuai.site/reactExamples/animationEvent 在線演示效果二：https://ashuai.work:8890/27 前言 平常，我們代碼中，會做一些事件的監聽 比如點擊事件、右鍵事件、滾動事件等 實際上，js中還提供了動畫事件的相關ap
Nickname 水冗水孚
摘要 隨着網頁設計越來越複雜，尤其是圖片牆、商品展示、內容卡片這類頁面，瀑布流佈局（也叫 Masonry 佈局）成了非常受歡迎的設計方案。傳統實現往往依賴大量 JavaScript 或第三方庫，但其實利用 CSS Grid 加上少量 JS，就能實現既響應式又性能優越的瀑布流佈局。 本文將深入拆解這種方法的原理，帶你一步步理解關鍵代碼的作用，配合可運行的示例，讓你能輕鬆上手並靈活應用到實際項目中。
Nickname 前端視界
Python telnetlib 詳解（含 3.13 之後的替代方案） 適用讀者：需要在受控內網/實驗環境使用 Telnet 的同學。生產環境強烈建議優先 SSH（如 Paramiko/Netmiko）。 版本事實：telnetlib 在 span style="color:red"Python 3.11 標記棄用/span，並已在 span style="color:red"Pytho
Nickname 藍易雲
免費的CRM軟件哪個好用？免費CRM軟件是中小企業和初創公司提升銷售效率、優化客户管理的理想選擇。在眾多免費的CRM軟件中，Zoho CRM憑藉其全面的功能、易用性和高性價比，成為最值得推薦的選擇。 一、什麼是CRM軟件？ CRM軟件是一種幫助企業管理銷售流程、客户關係和銷售團隊的工具。它可以幫助銷售人員更高效地跟蹤銷售線索、管理客户信息、制定銷售計劃，並通過數據分析優化銷售策略。 CRM軟件的核
Nickname 下一個絕世
如何將 Tailwind CSS 添加到靜態站點？ 初始化 Tailwind 首先，需要一個最新版本的 Node。使用 $ node -v 全局安裝npx有助於遵循官方説明。這是一個運行 Node 包可執行文件的工具，如果文件缺失，它會獲取它們。獲取方法如下： $ npm install -g npx 以下是 Tailwind CLI 的命令： npm install -D tailwindcss
Nickname 逆風微笑的代碼狗
