tag Css

標籤
貢獻785
965
06:37 AM · Oct 27 ,2025
vitaly-friedman 頭像 u_15469972 頭像 nanchengfe 頭像 louis-lazaris 頭像 temani-afif 頭像 u_16164933 頭像 u_17534189 頭像 u_17569005 頭像 adrian-bece 頭像 andy-clarke 頭像 u_13934709 頭像 brecht-de-ruyte 頭像

@Css / 博客 RSS 訂閱

qifengliao_5e7f5b20ee3bd 頭像

起風了 - 如何快速查看頁面的佈局結構？

在前端頁面 UI 開發時，如何能快速查看頁面的結構佈局？ html * { outline: 1px solid red !important; } outline 屬性不會增加元素的尺寸，比 border 要好。

佈局 , css3 , Css , 前端 , ui

收藏 評論

yinzhixiaxue 頭像

銀之夏雪 - CSS 真的會阻塞文檔解析嗎？從瀏覽器渲染原理深入探究一下

在網頁開發領域，一個常見的疑問是 CSS 是否會阻塞文檔解析。理解這一問題對於優化網頁性能、提升用户體驗至關重要。要深入解答這個問題，需要從瀏覽器渲染網頁的原理説起。 瀏覽器渲染網頁的基本流程 瀏覽器在接收到 HTML 文檔後，會依次進行以下幾個主要步驟： 解析 HTML：瀏覽器從網絡或本地獲取 HTML 文件，然後開始解析，將 HTML 代碼轉換為 DOM（Document Object M

瀏覽器 , 瀏覽器原理 , Css , 前端 , Javascript

收藏 評論

fenanjiu 頭像

南玖 - 瀏覽器如何確定最終的CSS屬性值？解析計算優先級與規則

前言 上篇文章中有提到CSS值的處理過程，但如果想要確定一個元素的最終樣式值可以不需要這麼多步。實際上我們寫的任何一個標籤元素無論寫沒寫樣式，它都會有一套完整的樣式。理解這一點非常重要‼️ 比如：一個簡單的p標籤 打開瀏覽器控制枱，選中元素，切換到computed選項，勾選show all，這裏就能夠看到元素的所有CSS樣式，儘管你什麼樣式也沒寫，它們也是有默認值的。任何標籤都是這樣，只不過默認

瀏覽器 , Css , 前端

收藏 評論

benfangdechaofen 頭像

奔放的炒粉 - 後續跟進：讓客户看到成效

即便成功説服客户適度調整目標，也要防止後續執行中“反彈”或“再次激進”。通過持續跟進和階段成果展示，穩固已經達成的共識，並讓客户一步步感受到合理目標所帶來的實際成效。 （一）階段彙報與Demo 定期評審：如每兩週或每月召開項目進度會，向客户演示當前完成的功能、展示測試結果或用户反饋。 展示階段成就：着重強調因為採用了更務實的目標，團隊成功在某個關鍵里程碑按時高質量完成，這能強化客户的認同感。 （二

astro , vue.js , angular , Css

收藏 評論

benfangdechaofen 頭像

奔放的炒粉 - CSS值的處理過程

CSS值的定義到最終渲染實際上會經過一系列的步驟，這一過程在W3C Recommendation中有介紹，整個過程一共分為6步： 聲明值：應用於元素的每個屬性都會為它提供一個聲明值，當然也可能存在多個，比如在多個樣式表中重複聲明 級聯值：這一步其實就是在計算樣式屬性的權重，從而得到一個權重最高的值 指定值：它一般等於級聯值或者默認值，繼承屬性用的繼承值 inherit，非繼承屬性將用初

vue.js , bootstrap , Css

收藏 評論

sy_records 頭像

沈唁 - 初夏上新！Docsify 迎來 v5.0.0-rc.1 重磅發佈

在中國傳統曆法中，五月初一象徵着初夏的啓程，也寓意着新的成長與蜕變。今天，我們很高興地宣佈 —— Docsify v5.0.0-rc.1 版本發佈！ 在延續零構建、即寫即部署理念的同時，Docsify 迎來了全新的樣式設計、更友好的可訪問性以及更穩健的插件機制。 可以通過訪問 http://preview.docsifyjs.org/ 進行體驗。 那麼，這個版本有哪些值得關注的亮點？我們為你準備了

docsify , Css , 文檔 , Javascript , Markdown

收藏 評論

codepencil 頭像

CodePencil - CSS專題之層疊上下文

前言 石匠敲擊石頭的第 15 次 在平常開發的時候，有時候會遇到使用 z-index 調整元素層級沒有效果的情況，究其原因還是因為對層疊上下文不太瞭解，看了網上很多前輩的文章，決定打算寫一篇文章來梳理一下，如果哪裏寫的有問題歡迎指出，不勝感激。 什麼是層疊上下文 層疊上下文（Stacking Context）是 HTML 中的三維概念，它決定了元素在 Z 軸（垂直於電腦屏幕的方向） 上的顯示順序。

css3 , Css , HTML , 前端 , html5

收藏 評論

codepencil 頭像

CodePencil - CSS專題之水平垂直居中

前言 石匠敲擊石頭的第 16 次 在日常開發中，經常會遇到水平垂直居中的佈局，雖然現在基本上都用 Flex 可以輕鬆實現，但是在某些無法使用 Flex 的情況下，又應該如何讓元素水平垂直居中呢？這也是一道面試的必考題，所以打算寫一篇文章來好好梳理一下，如果哪裏寫的有問題歡迎指出，不勝感激。 分類 實現元素水平垂直居中的方法有很多，大致可以分為以下兩類： 固定寬高元素適用的方法 不固定寬高元素

css3 , Css , HTML , 前端 , html5

收藏 評論

gushiio 頭像

鼓獅知識庫 - 0編程基礎，用AI開發“多功能單頁網站”實戰教程

上一篇文章講了如何用AI開發簡單的單頁網站，今天開始講講如何開發複雜的單頁網站。本期視頻主要是教你如何準確描述界面佈局和內容，讓AI開發出你需要的界面樣式，還有網頁裏如果有多個功能點該如何讓AI處理問題等等。當你學會之後，你想用AI開發個人網站或企業網站都會得心應手。 首先講一下簡單的單頁網站和複雜的單頁網站有哪些區別，簡單的單頁網站，功能都比較單一，邏輯也比較簡單。複雜的單頁網站，邏輯會較多，

教程 , chatgpt , Css , php7 , html5

收藏 評論

paul-scanlon 頭像

Paul Scanlon - How To Create Dynamic Donut Charts With TailwindCSS And React

CSS is amazing — I’m regularly surprised at how far it has come in the years I’ve been using it (~2005 – present). One such surprise came when I noticed this tweet by Shruti Balasa which demonstrate

react , Techniques , Css , svg

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 《vue.js設計與實現》——調度執行

調度性的定義：當我們執行trigger動作觸發副作用函數重新執行時，有能力決定副作用函數的時機、次數以及方式 控制執行時機 先來看看如何決定副作用函數的執行方式 const data = { foo: 1 } const obj = new Proxy(data, {}); // 為了演示，省略代理配置 effect(() = { console.log(obj.foo); }) obj.

vue.js , Css , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 《vue.js設計與實現》——計算屬性computed與lazy

在深入瞭解計算屬性之前，我們需要先知道懶執行的effect，也就是lazy的effect 我們現在實現的effect函數會立即執行傳遞給它的副作用函數，例如： effect( // 這個函數會立即執行 () = { console.log('執行了'); } ) 但有的時候我們不需要他立即執行，而是在需要的時候才執行，這個特性就跟計算屬性很像 我們可以在option

vue.js , Css , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 《vue.js設計與實現》——watch的實現原理

簡易watch監聽 watch其實就是監聽給定的響應式數據變化，當數據變化時執行的回調函數 watch(obj, () = { console.log("數據變化了"); }) // 修改obj數據，watch自動觸發 obj.foo++ 實際上，watch就是利用了effect以及options.scheduler選項 effect( () = { console

vue.js , Css , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 《vue.js設計與實現》——立即執行的 watch 與回調執行時機

watch的本質其實是對effect的二次封裝 watch的兩個特性： 1、立即執行的回調函數 2、回調函數的執行時機 立即執行的回調函數 在vue.js中，watch通過immediate屬性來實現立即執行，如下 watch(obj, () = { console.log('變化'); }, { immediate: true }) 當immediate存在並且為tr

vue.js , Css , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 《vue.js設計與實現》——過期的副作用

我們平時可能不太關注"競態"的問題，但是你在日常的工作中可能或多少遇到過"競態" let finalData; watch(obj, async () = { // 發送一個請求 let res = await fetch('/api/request'); // 將數據保存到finalData finalData = res; }) 這段代碼看起來沒問題，實際上會發

vue.js , Css , HTML , 前端 , Javascript

收藏 評論

shuirongshui 頭像

水冗水孚 - 從一個動畫需求，來學習js中animation動畫事件的具體應用

本文通過一個具體的動畫需求，來講解一下js中animationend事件使用 在線演示效果一：https://ashuai.site/reactExamples/animationEvent 在線演示效果二：https://ashuai.work:8890/27 前言 平常，我們代碼中，會做一些事件的監聽 比如點擊事件、右鍵事件、滾動事件等 實際上，js中還提供了動畫事件的相關ap

animation , dom , Css , Javascript

收藏 評論

webshijie 頭像

前端視界 - 一步步教你用 CSS Grid 實現靈活又高效的瀑布流佈局，適配所有屏幕！

摘要 隨着網頁設計越來越複雜，尤其是圖片牆、商品展示、內容卡片這類頁面，瀑布流佈局（也叫 Masonry 佈局）成了非常受歡迎的設計方案。傳統實現往往依賴大量 JavaScript 或第三方庫，但其實利用 CSS Grid 加上少量 JS，就能實現既響應式又性能優越的瀑布流佈局。 本文將深入拆解這種方法的原理，帶你一步步理解關鍵代碼的作用，配合可運行的示例，讓你能輕鬆上手並靈活應用到實際項目中。

Css , HTML

收藏 評論

lanyiyun666 頭像

藍易雲 - python telnetlib詳解

Python telnetlib 詳解（含 3.13 之後的替代方案） 適用讀者：需要在受控內網/實驗環境使用 Telnet 的同學。生產環境強烈建議優先 SSH（如 Paramiko/Netmiko）。 版本事實：telnetlib 在 span style="color:red"Python 3.11 標記棄用/span，並已在 span style="color:red"Pytho

css3 , Css , HTML , html5 , Javascript

收藏 評論

weidelanqiu 頭像

下一個絕世 - 免費的 CRM 軟件哪個好用

免費的CRM軟件哪個好用？免費CRM軟件是中小企業和初創公司提升銷售效率、優化客户管理的理想選擇。在眾多免費的CRM軟件中，Zoho CRM憑藉其全面的功能、易用性和高性價比，成為最值得推薦的選擇。 一、什麼是CRM軟件？ CRM軟件是一種幫助企業管理銷售流程、客户關係和銷售團隊的工具。它可以幫助銷售人員更高效地跟蹤銷售線索、管理客户信息、制定銷售計劃，並通過數據分析優化銷售策略。 CRM軟件的核

Css , chrome-devtools

收藏 評論

user_nypdl4ki 頭像

逆風微笑的代碼狗 - 將 Tailwind CSS 添加到靜態站點

如何將 Tailwind CSS 添加到靜態站點？ 初始化 Tailwind 首先，需要一個最新版本的 Node。使用 $ node -v 全局安裝npx有助於遵循官方説明。這是一個運行 Node 包可執行文件的工具，如果文件缺失，它會獲取它們。獲取方法如下： $ npm install -g npx 以下是 Tailwind CLI 的命令： npm install -D tailwindcss

tailwind-css , Css

收藏 評論

nihaoanihao 頭像

你好啊你好 - 摩天輪（vue）

效果圖 使用示例 script lang="ts" setup import FerrisWheel from "**/FerrisWheel.vue"; import { ref } from "vue"; const defaultUrls = [ "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.

vue.js , Css , HTML , 前端 , Javascript

收藏 評論

ysxq 頭像

衍生星球 - JSP 程序設計之 Web 技術基礎

在 Java Web 開發的世界裏，JSP（Java Server Pages）是一門舉足輕重的動態網頁開發技術。要學好 JSP，首先得紮實掌握 Web 技術基礎，下面就帶大家深入瞭解相關知識。 Web 的起源與發展 Web，本意是蜘蛛網和網，在網頁設計中特指網頁。它誕生於 1989 年 3 月，由歐洲粒子物理研究所的科學家蒂姆・伯納斯・李發明。1990 年 11 月，第一個 Web 服務器正式運

jsp , Css , HTML , Javascript , Web

收藏 評論

bukenengdeshi 頭像

不可能的是 - 深度解析：Sass-loader Legacy API 警告的前世今生與完美解決方案

📖 文章概述 當你在前端項目中看到 Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0 這個警告時，是否感到困惑？本文將帶你深入探索這個警告背後的技術原理，從源碼層面分析調用鏈路，對比不同版本的功能差異，並提供多種實用的解決方案。 你

css3 , Css , typescript , 前端 , Javascript

收藏 評論

nihaoanihao 頭像

你好啊你好 - div + transform 實現旋轉圖片並得到期望的佔位盒子

效果圖 使用示例 script setup lang="ts" import RotatedImage from "**/RotatedImage.vue"; import { ref } from "vue"; const value = ref(50); const clockwise = ref(true); const src = ref( "https://naive-ui.os

vue.js , Css , HTML , 前端 , Javascript

收藏 評論