\/* Define CSS variables (custom properties) in the :root selector *\/\n :root {\n --primary-color: #3498db; \/* Main theme color *\/\n --secondary-color: #2ecc71; \/* Accent color *\/\n --text-color: #333; \/* Default text color *\/\n --font-size: 16px; \/* Base font size *\/\n --padding: 10px; \/* Base padding *\/\n }\n\n \/* General styles using variables *\/\n body {\n font-family: Arial, sans-serif;\n font-size: var(--font-size);\n color: var(--text-color);\n margin: 0;\n padding: 0;\n background-color: #f9f9f9;\n }\n\n header {\n background-color: var(--primary-color);\n color: white;\n text-align: center;\n padding: var(--padding);\n }\n\n .card {\n background-color: white;\n border: 1px solid #ddd;\n border-radius: 5px;\n margin: 20px;\n padding: var(--padding);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .card h2 {\n color: var(--primary-color);\n }\n\n .card p {\n color: var(--text-color);\n }\n\n button {\n background-color: var(--secondary-color);\n color: white;\n border: none;\n border-radius: 5px;\n padding: calc(var(--padding) \/ 2) calc(var(--padding) * 2);\n cursor: pointer;\n font-size: var(--font-size);\n }\n\n button:hover {\n background-color: var(--primary-color);\n }\n\n \/* Dark mode example by overriding variables *\/\n body.dark-mode {\n --primary-color: #1abc9c;\n --secondary-color: #e74c3c;\n --text-color: #f9f9f9;\n background-color: #333;\n }\n<\/pre>\n\n\n\n\n \n \n 參考：\n<\/h3>\n\n\n- \nMDN Web 文檔 - 使用 CSS 自定義屬性（變量） - 全面、適合初學(xué)者的解釋，包含有關(guān)定義、使用和更新 CSS 變量的示例。<\/li>\n
- \nW3Schools - CSS 變量 - 通過(guò)實(shí)時(shí)代碼示例涵蓋 CSS 變量的基礎(chǔ)知識(shí)，以便快速練習(xí)。<\/li>\n
- \nCSS 技巧 - 自定義屬性完整指南 - 綜合指南，包含真實(shí)用例和高級(jí)變量使用技巧。<\/li>\n
- \nFreecodecamp - CSS 變量完整手冊(cè) - 探索強(qiáng)大的技術(shù)，例如級(jí)聯(lián)效果、基于媒體查詢的變量和范圍管理。<\/li>\n<\/ul>\n\n\n
\n\n\n \n \n 動(dòng)畫和過(guò)渡 \n<\/h2>\n\n
為您的網(wǎng)站添加動(dòng)感可創(chuàng)造引人入勝的用戶體驗(yàn)。 CSS 提供了兩種主要的動(dòng)畫制作方式：<\/p>\n\n
\n \n \n 過(guò)渡\n<\/h3>\n\n
非常適合簡(jiǎn)單的狀態(tài)更改：
\n<\/p>
\/* Mobile-first approach *\/\n.container {\n width: 100%;\n padding: 10px;\n}\n\n\/* Tablet and larger *\/\n@media screen and (min-width: 768px) {\n .container {\n width: 750px;\n padding: 20px;\n }\n}\n\n\/* Desktop *\/\n@media screen and (min-width: 1024px) {\n .container {\n width: 960px;\n }\n}\n<\/pre>\n\n\n\n\n \n \n 關(guān)鍵幀動(dòng)畫\n<\/h3>\n\n
對(duì)于更復(fù)雜的多步驟動(dòng)畫：
\n<\/p>\n\n
\n\n\n\nCSS:
\n<\/p>\n\n
\/* Mobile First Approach *\/\n.services {\n padding: 20px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh2 {\n text-align: center;\n color: #333;\n margin-bottom: 30px;\n}\n\n.services-container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.service-card {\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nbutton {\n width: 100%;\n padding: 10px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n\/* Tablet *\/\n@media (min-width: 768px) {\n .services-container {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n .service-card {\n flex: 0 1 calc(50% - 20px);\n }\n}\n\n\/* Desktop *\/\n@media (min-width: 1024px) {\n .service-card {\n flex: 1;\n }\n\n button {\n width: auto;\n padding: 10px 20px;\n }\n}\n<\/pre>\n\n\n\n\n \n \n 先進(jìn)的動(dòng)畫技術(shù)\n<\/h3>\n\n
動(dòng)畫中的 CSS 自定義屬性：
\n<\/p>\n\n
\/* Base styles - Mobile First (320px and up) *\/\n.services {\n padding: 15px;\n max-width: 1200px;\n margin: 0 auto;\n overflow-x: hidden; \/* Prevent horizontal scroll *\/\n}\n\nh2 {\n text-align: center;\n color: #333;\n margin-bottom: 20px;\n font-size: clamp(1.5rem, 5vw, 2.5rem); \/* Fluid typography *\/\n}\n\n.services-container {\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.service-card {\n padding: 15px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n transition: all 0.3s ease; \/* Smooth transitions for responsive changes *\/\n}\n\nbutton {\n width: 100%;\n padding: 8px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n}\n\n\/* Small phones (375px and up) *\/\n@media (min-width: 375px) {\n .services {\n padding: 20px;\n }\n\n .service-card {\n padding: 20px;\n }\n}\n\n\/* Large phones (480px and up) *\/\n@media (min-width: 480px) {\n .services-container {\n gap: 20px;\n }\n\n button {\n padding: 10px;\n font-size: 16px;\n }\n}\n\n\/* Small tablets (600px and up) *\/\n@media (min-width: 600px) {\n .services-container {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n .service-card {\n flex: 0 1 calc(50% - 10px); \/* Two cards per row with gap consideration *\/\n }\n}\n\n\/* Tablets (768px and up) *\/\n@media (min-width: 768px) {\n .services {\n padding: 30px;\n }\n\n .service-card {\n padding: 25px; \/* Improved spacing for larger screens *\/\n }\n\n button: hover {\n \/* Add hover effect for non-touch devices *\/\n background: #0056b3;\n transform: translateY(-2px);\n }\n}\n\n\/* Small laptops (1024px and up) *\/\n@media (min-width: 1024px) {\n .service-card {\n flex: 1; \/* Three cards per row *\/\n transition: transform 0.3s ease, box-shadow 0.3s ease; \/* Add subtle hover effect *\/\n }\n\n .service-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n }\n\n button {\n \/* Change to inline button *\/\n width: auto;\n padding: 10px 20px;\n }\n}\n\n\/* Desktops (1200px and up) *\/\n@media (min-width: 1200px) {\n .services {\n padding: 40px;\n }\n\n .services-container {\n gap: 30px;\n }\n\n .service-card {\n padding: 30px;\n }\n}\n\n\/* Extra large screens (1440px and up) *\/\n@media (min-width: 1440px) {\n .services {\n max-width: 1400px; \/* Max width to maintain readability *\/\n }\n\n .service-card {\n padding: 35px; \/* Larger padding for extra large screens *\/\n }\n}\n\n\/* Print styles *\/\n@media print {\n .services {\n padding: 0;\n }\n\n .service-card {\n break-inside: avoid;\n box-shadow: none;\n border: 1px solid #ddd;\n }\n\n button {\n display: none;\n }\n}\n\n\/* Reduced motion preferences *\/\n@media (prefers-reduced-motion: reduce) {\n .service-card,\n button {\n transition: none;\n }\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .service-card {\n background: #2a2a2a;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n\n h2 {\n color: #fff;\n }\n}\n<\/pre>\n\n\n\n\n \n \n 高級(jí)關(guān)鍵幀動(dòng)畫：\n<\/h3>\n\n\n\n:root {\n --primary-color: #007bff;\n --secondary-color: #6c757d;\n --spacing-unit: 1rem;\n}\n\n.button {\n background-color: var(--primary-color);\n padding: var(--spacing-unit);\n}\n<\/pre>\n\n\n\n\n \n \n 實(shí)踐練習(xí)：互動(dòng)卡\n<\/h2>\n\n
創(chuàng)建具有懸停效果的交互式卡片：<\/p>\n\n
HTML：
\n<\/p>
\/* Mobile-first approach *\/\n.container {\n width: 100%;\n padding: 10px;\n}\n\n\/* Tablet and larger *\/\n@media screen and (min-width: 768px) {\n .container {\n width: 750px;\n padding: 20px;\n }\n}\n\n\/* Desktop *\/\n@media screen and (min-width: 1024px) {\n .container {\n width: 960px;\n }\n}\n<\/pre>\n\n\n\n\n \n \n 參考：\n<\/h3>\n\n\n- \nMDN Web 文檔 - CSS 過(guò)渡 - 對(duì) CSS 過(guò)渡的清晰介紹，解釋如何在更改樣式時(shí)創(chuàng)建平滑效果。<\/li>\n
- \nMDN Web 文檔 - CSS 動(dòng)畫 - 關(guān)鍵幀、動(dòng)畫屬性和創(chuàng)建復(fù)雜動(dòng)畫的分步指南。<\/li>\n
- \nW3Schools - CSS 過(guò)渡 - 適合初學(xué)者使用實(shí)時(shí)代碼編輯器以交互方式練習(xí)過(guò)渡和動(dòng)畫。<\/li>\n
- \nW3Schools - CSS 動(dòng)畫 - 關(guān)于使用關(guān)鍵幀和過(guò)渡向網(wǎng)站添加動(dòng)畫的簡(jiǎn)單易懂的指南。<\/li>\n
- \nCSS 技巧 - 動(dòng)畫 - 討論響應(yīng)式動(dòng)畫、減少可訪問(wèn)性的運(yùn)動(dòng)以及媒體查詢集成。<\/li>\n
- \nAnimate.css - 一個(gè)流行的 CSS 庫(kù)，提供預(yù)構(gòu)建的動(dòng)畫，您可以輕松添加到您的項(xiàng)目中。<\/li>\n<\/ul>\n\n\n
\n\n\n \n \n 最佳實(shí)踐和組織 \n<\/h2>\n\n\n \n \n CSS架構(gòu)\n<\/h3>\n\n\n- 使用一致的命名約定<\/li>\n
- 按組件\/功能組織 CSS 文件<\/li>\n
- 盡可能保持較低的特異性<\/li>\n
- 有效地注釋你的代碼\n<\/li>\n<\/ul>\n\n
\n\n\n\nCSS:
\n<\/p>\n\n
\/* Mobile First Approach *\/\n.services {\n padding: 20px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh2 {\n text-align: center;\n color: #333;\n margin-bottom: 30px;\n}\n\n.services-container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.service-card {\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nbutton {\n width: 100%;\n padding: 10px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n\/* Tablet *\/\n@media (min-width: 768px) {\n .services-container {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n .service-card {\n flex: 0 1 calc(50% - 20px);\n }\n}\n\n\/* Desktop *\/\n@media (min-width: 1024px) {\n .service-card {\n flex: 1;\n }\n\n button {\n width: auto;\n padding: 10px 20px;\n }\n}\n<\/pre>\n\n\n\n\n \n \n 實(shí)踐練習(xí)：CSS 架構(gòu)的最佳實(shí)踐\n<\/h2>\n\n\n\n<！DOCTYPE html>\n\n<頭>\n \n \n CSS 架構(gòu)練習(xí)<\/title>\n <link rel=\"stylesheet\" href=\"styles\/reset.css\"> <!-- 重置默認(rèn)瀏覽器樣式 -->\n <link rel=\"stylesheet\" href=\"styles\/layout.css\">\n <鏈接 rel=\"stylesheet\" href=\"styles\/components\/header.css\"> <!-- 標(biāo)題組件樣式 -->\n <link rel=\"stylesheet\" href=\"styles\/components\/card.css\"> <!-- 卡片組件樣式 -->\n <link rel=\"stylesheet\" href=\"styles\/utilities.css\"> <!-- 用于快速修復(fù)的實(shí)用程序類 -->\n<\/頭>\n\n \n\n\n\n<h3>\n \n \n 參考：\n<\/h3>\n\n<\/pre>\n<ul>\n<li>\nBEM - 塊元素修飾符 - 一種流行的命名 CSS 類和構(gòu)建樣式以提高可重用性和可維護(hù)性的方法。<\/li>\n<li>\nSMACSS - CSS 的可擴(kuò)展和模塊化架構(gòu) - 將 CSS 組織為邏輯和可維護(hù)類別的詳細(xì)框架。<\/li>\n<li>\nHarry Roberts 的 CSS 指南 - 使用邏輯文件結(jié)構(gòu)和命名約定編寫可擴(kuò)展、可維護(hù)的 CSS 的高質(zhì)量指南。<\/li>\n<\/ul>\n\n\n<hr>\n\n<h2>\n \n \n 建造時(shí)間到了！ ？\n<\/h2>\n\n<p>現(xiàn)在輪到你將所學(xué)付諸實(shí)踐了！這是你的挑戰(zhàn)：<\/p>\n<ul>\n<li>創(chuàng)建新的 CodePen（在 codepen.io 上免費(fèi)）<\/li>\n<li>構(gòu)建我們介紹的示例和練習(xí)<\/li>\n<li>\n<strong>分享您的創(chuàng)作！<\/strong>在下面的評(píng)論中添加您的 CodePen 鏈接<\/li>\n<\/ul>\n\n<p><strong>獎(jiǎng)勵(lì)積分<\/strong>：在設(shè)計(jì)中添加您自己的創(chuàng)意！我會(huì)親自審核并回復(fù)評(píng)論中分享的每條 CodePen。<\/p>\n\n<p>？ <strong>專業(yè)提示<\/strong>：請(qǐng)記住在 CSS 中添加注釋來(lái)解釋您的想法。它可以幫助其他人從您的代碼中學(xué)習(xí)！<\/p>\n\n\n<hr>\n\n<h2>\n \n \n 接下來(lái)是什么？ ？\n<\/h2>\n\n<p>這是我們的 CSS 從零到英雄系列的第 2 部分。我們將在接下來(lái)的文章中更深入地探討更令人興奮的 CSS 概念。為了確保您不會(huì)錯(cuò)過(guò)：<\/p>\n\n<ol>\n<li>？ <strong>為這篇文章添加書簽<\/strong>以便在編碼時(shí)快速參考<\/li>\n<li>?? <strong>喜歡這篇文章<\/strong>如果您覺得它有幫助（它也可以幫助其他人找到它?。?\/li>\n<li>？ <strong>關(guān)注我<\/strong>觀看本系列的下一部分<\/li>\n<\/ol>\n\n<h3>\n \n \n 讓我們聯(lián)系吧！ ？\n<\/h3>\n\n<p>你嘗試過(guò)練習(xí)嗎？有疑問(wèn)嗎？在評(píng)論中分享您的經(jīng)驗(yàn)！我回復(fù)每條評(píng)論并喜歡看到您的進(jìn)步。<\/p>\n\n<p>第三部分見！快樂編碼！ ???????<\/p>\n\n\n \n\n \n \n\n \n "} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://m.miracleart.cn/zh/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a>
<a href="http://m.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a>
<a href="http://m.miracleart.cn/zh/wenda.html" title="問(wèn)答" class="languagechoosea">問(wèn)答</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a>
<a href="http://m.miracleart.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="工具庫(kù)" class="head_nava head_nava-template1_2">工具庫(kù)</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/zh/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a>
<a href="http://m.miracleart.cn/zh/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a>
<a href="http://m.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫(kù)" class="languagechoosea">PHP 庫(kù)</a>
<a href="http://m.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a>
<a href="http://m.miracleart.cn/zh/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a>
<a href="http://m.miracleart.cn/zh/toolset/extension-plug-ins" title="擴(kuò)展插件" class="languagechoosea on">擴(kuò)展插件</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://m.miracleart.cn/zh/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="休閑" class="head_nava head_nava-template1_3">休閑</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a>
<a href="http://m.miracleart.cn/zh/mobile-game-tutorial/" title="游戲教程" class="languagechoosea">游戲教程</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('zh')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="搜索" onclick="searchs('zh')"><img src="/static/imghw/find.png" alt="搜索"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">簡(jiǎn)體中文<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:;" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://m.miracleart.cn/zh/" title="首頁(yè)"
class="phpgenera_Details_mainL1a">首頁(yè)</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/zh/web-designer.html"
class="phpgenera_Details_mainL1a">web前端</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/zh/css-tutorial.html"
class="phpgenera_Details_mainL1a">css教程</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>《給所有人的權(quán)威 CSS 指南》中的掌握 CSS |第2部分</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">《給所有人的權(quán)威 CSS 指南》中的掌握 CSS |第2部分</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://m.miracleart.cn/zh/member/1468492.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea8147b1057383.png" src="/static/imghw/default1.png" alt="Mary-Kate Olsen">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://m.miracleart.cn/zh/member/1468492.html" class="author_name">Mary-Kate Olsen</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Jan 03, 2025 pm 03:09 PM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173588818469095.jpg" class="lazy" alt="Mastering CSS in The Definitive CSS Guide for Everyone | Part-2"></p>
<h2>
目錄
</h2>
<div><table>
<thead>
<tr>
<th>No.</th>
<th>Section</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Responsive Design Principles</td>
<td>Link</td>
</tr>
<tr>
<td>2</td>
<td>CSS Variables and Custom Properties</td>
<td>Link</td>
</tr>
<tr>
<td>3</td>
<td>Animations and Transitions</td>
<td>Link</td>
</tr>
<tr>
<td>4</td>
<td>Best Practices and Organization</td>
<td>Link</td>
</tr>
</tbody>
</table></div>
<hr>
<h2>
響應(yīng)式設(shè)計(jì)原則
</h2>
<p>在當(dāng)今的多設(shè)備世界中，響應(yīng)式設(shè)計(jì)不是可選的，而是必不可少的。無(wú)論是在智能手機(jī)還是大型桌面顯示器上查看，您的網(wǎng)站都應(yīng)該看起來(lái)很棒。</p>
<h3>
媒體查詢
</h3>
<p>媒體查詢是您的響應(yīng)式設(shè)計(jì)超能力：<br>
</p>
<pre class="brush:php;toolbar:false">/* Mobile-first approach */
.container {
width: 100%;
padding: 10px;
}
/* Tablet and larger */
@media screen and (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* Desktop */
@media screen and (min-width: 1024px) {
.container {
width: 960px;
}
}
</pre>
<h3>
響應(yīng)單位
</h3>
<p>使用相對(duì)單位使您的設(shè)計(jì)自然響應(yīng)：</p>
<ul>
<li>
<strong>rem</strong>：相對(duì)于根元素的字體大小</li>
<li>
<strong>em</strong>：相對(duì)于父元素的字體大小</li>
<li>
<strong>vw/vh</strong>：相對(duì)于視口尺寸</li>
<li>
<strong>%</strong>：相對(duì)于父元素的大小</li>
</ul>
<h2>
實(shí)踐練習(xí)：響應(yīng)服務(wù)部分
</h2>
<p>創(chuàng)建一個(gè)響應(yīng)式服務(wù)部分，使用媒體查詢和靈活的單元無(wú)縫適應(yīng)不同的屏幕尺寸。</p>
<p>HTML：<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>CSS:<br>
</p>
<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.services-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.service-card {
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Tablet */
@media (min-width: 768px) {
.services-container {
flex-direction: row;
flex-wrap: wrap;
}
.service-card {
flex: 0 1 calc(50% - 20px);
}
}
/* Desktop */
@media (min-width: 1024px) {
.service-card {
flex: 1;
}
button {
width: auto;
padding: 10px 20px;
}
}
</pre>
<p>CSS：讓我們探索一下服務(wù)部分的更具體的斷點(diǎn)。<br>
</p>
<pre class="brush:php;toolbar:false">/* Base styles - Mobile First (320px and up) */
.services {
padding: 15px;
max-width: 1200px;
margin: 0 auto;
overflow-x: hidden; /* Prevent horizontal scroll */
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}
.services-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.service-card {
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}
button {
width: 100%;
padding: 8px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
/* Small phones (375px and up) */
@media (min-width: 375px) {
.services {
padding: 20px;
}
.service-card {
padding: 20px;
}
}
/* Large phones (480px and up) */
@media (min-width: 480px) {
.services-container {
gap: 20px;
}
button {
padding: 10px;
font-size: 16px;
}
}
/* Small tablets (600px and up) */
@media (min-width: 600px) {
.services-container {
flex-direction: row;
flex-wrap: wrap;
}
.service-card {
flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
}
}
/* Tablets (768px and up) */
@media (min-width: 768px) {
.services {
padding: 30px;
}
.service-card {
padding: 25px; /* Improved spacing for larger screens */
}
button: hover {
/* Add hover effect for non-touch devices */
background: #0056b3;
transform: translateY(-2px);
}
}
/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
.service-card {
flex: 1; /* Three cards per row */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
button {
/* Change to inline button */
width: auto;
padding: 10px 20px;
}
}
/* Desktops (1200px and up) */
@media (min-width: 1200px) {
.services {
padding: 40px;
}
.services-container {
gap: 30px;
}
.service-card {
padding: 30px;
}
}
/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
.services {
max-width: 1400px; /* Max width to maintain readability */
}
.service-card {
padding: 35px; /* Larger padding for extra large screens */
}
}
/* Print styles */
@media print {
.services {
padding: 0;
}
.service-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
button {
display: none;
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.service-card,
button {
transition: none;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.service-card {
background: #2a2a2a;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
h2 {
color: #fff;
}
}
</pre>
<h3>
參考：
</h3>
<ul>
<li>
MDN Web 文檔 - 響應(yīng)式設(shè)計(jì)基礎(chǔ) - 響應(yīng)式設(shè)計(jì)概念的精彩介紹，涵蓋視口、斷點(diǎn)和靈活布局。</li>
<li>
FreeCodeCamp - 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)認(rèn)證 - 涵蓋響應(yīng)式設(shè)計(jì)原理、網(wǎng)格、媒體查詢和可訪問(wèn)性的完整課程。</li>
<li>
我可以使用 - 檢查瀏覽器兼容性以獲取響應(yīng)式設(shè)計(jì)功能，例如媒體查詢和 Flexbox。</li>
<li>
響應(yīng)式設(shè)計(jì)備忘單 - 以易于理解的格式涵蓋關(guān)鍵的響應(yīng)式設(shè)計(jì)屬性和技術(shù)。</li>
</ul>
<hr>
<h2>
CSS 變量和自定義屬性
</h2>
<p>CSS 變量（自定義屬性）為您的樣式表帶來(lái)類似編程的靈活性。它們使維護(hù)更容易并實(shí)現(xiàn)動(dòng)態(tài)造型。<br>
</p>
<pre class="brush:php;toolbar:false">:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--spacing-unit: 1rem;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing-unit);
}
</pre>
<h2>
實(shí)踐練習(xí)：用于主題化和可重用性的 CSS 變量
</h2>
<pre class="brush:php;toolbar:false"><body>
<header>
<h1>CSS Variables & Custom Properties</h1>
</header>
<main>
<section>
<pre class="brush:php;toolbar:false">/* Define CSS variables (custom properties) in the :root selector */
:root {
--primary-color: #3498db; /* Main theme color */
--secondary-color: #2ecc71; /* Accent color */
--text-color: #333; /* Default text color */
--font-size: 16px; /* Base font size */
--padding: 10px; /* Base padding */
}
/* General styles using variables */
body {
font-family: Arial, sans-serif;
font-size: var(--font-size);
color: var(--text-color);
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
header {
background-color: var(--primary-color);
color: white;
text-align: center;
padding: var(--padding);
}
.card {
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
margin: 20px;
padding: var(--padding);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card h2 {
color: var(--primary-color);
}
.card p {
color: var(--text-color);
}
button {
background-color: var(--secondary-color);
color: white;
border: none;
border-radius: 5px;
padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
cursor: pointer;
font-size: var(--font-size);
}
button:hover {
background-color: var(--primary-color);
}
/* Dark mode example by overriding variables */
body.dark-mode {
--primary-color: #1abc9c;
--secondary-color: #e74c3c;
--text-color: #f9f9f9;
background-color: #333;
}
</pre>
<h3>
參考：
</h3>
<ul>
<li>
MDN Web 文檔 - 使用 CSS 自定義屬性（變量） - 全面、適合初學(xué)者的解釋，包含有關(guān)定義、使用和更新 CSS 變量的示例。</li>
<li>
W3Schools - CSS 變量 - 通過(guò)實(shí)時(shí)代碼示例涵蓋 CSS 變量的基礎(chǔ)知識(shí)，以便快速練習(xí)。</li>
<li>
CSS 技巧 - 自定義屬性完整指南 - 綜合指南，包含真實(shí)用例和高級(jí)變量使用技巧。</li>
<li>
Freecodecamp - CSS 變量完整手冊(cè) - 探索強(qiáng)大的技術(shù)，例如級(jí)聯(lián)效果、基于媒體查詢的變量和范圍管理。</li>
</ul>
<hr>
<h2>
動(dòng)畫和過(guò)渡
</h2>
<p>為您的網(wǎng)站添加動(dòng)感可創(chuàng)造引人入勝的用戶體驗(yàn)。 CSS 提供了兩種主要的動(dòng)畫制作方式：</p>
<h3>
過(guò)渡
</h3>
<p>非常適合簡(jiǎn)單的狀態(tài)更改：<br>
</p><pre class="brush:php;toolbar:false">/* Mobile-first approach */
.container {
width: 100%;
padding: 10px;
}
/* Tablet and larger */
@media screen and (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* Desktop */
@media screen and (min-width: 1024px) {
.container {
width: 960px;
}
}
</pre>
<h3>
關(guān)鍵幀動(dòng)畫
</h3>
<p>對(duì)于更復(fù)雜的多步驟動(dòng)畫：<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>CSS:<br>
</p>
<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.services-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.service-card {
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Tablet */
@media (min-width: 768px) {
.services-container {
flex-direction: row;
flex-wrap: wrap;
}
.service-card {
flex: 0 1 calc(50% - 20px);
}
}
/* Desktop */
@media (min-width: 1024px) {
.service-card {
flex: 1;
}
button {
width: auto;
padding: 10px 20px;
}
}
</pre>
<h3>
先進(jìn)的動(dòng)畫技術(shù)
</h3>
<p>動(dòng)畫中的 CSS 自定義屬性：<br>
</p>
<pre class="brush:php;toolbar:false">/* Base styles - Mobile First (320px and up) */
.services {
padding: 15px;
max-width: 1200px;
margin: 0 auto;
overflow-x: hidden; /* Prevent horizontal scroll */
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}
.services-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.service-card {
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}
button {
width: 100%;
padding: 8px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
/* Small phones (375px and up) */
@media (min-width: 375px) {
.services {
padding: 20px;
}
.service-card {
padding: 20px;
}
}
/* Large phones (480px and up) */
@media (min-width: 480px) {
.services-container {
gap: 20px;
}
button {
padding: 10px;
font-size: 16px;
}
}
/* Small tablets (600px and up) */
@media (min-width: 600px) {
.services-container {
flex-direction: row;
flex-wrap: wrap;
}
.service-card {
flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
}
}
/* Tablets (768px and up) */
@media (min-width: 768px) {
.services {
padding: 30px;
}
.service-card {
padding: 25px; /* Improved spacing for larger screens */
}
button: hover {
/* Add hover effect for non-touch devices */
background: #0056b3;
transform: translateY(-2px);
}
}
/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
.service-card {
flex: 1; /* Three cards per row */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
button {
/* Change to inline button */
width: auto;
padding: 10px 20px;
}
}
/* Desktops (1200px and up) */
@media (min-width: 1200px) {
.services {
padding: 40px;
}
.services-container {
gap: 30px;
}
.service-card {
padding: 30px;
}
}
/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
.services {
max-width: 1400px; /* Max width to maintain readability */
}
.service-card {
padding: 35px; /* Larger padding for extra large screens */
}
}
/* Print styles */
@media print {
.services {
padding: 0;
}
.service-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
button {
display: none;
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.service-card,
button {
transition: none;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.service-card {
background: #2a2a2a;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
h2 {
color: #fff;
}
}
</pre>
<h3>
高級(jí)關(guān)鍵幀動(dòng)畫：
</h3>
<pre class="brush:php;toolbar:false">:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--spacing-unit: 1rem;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing-unit);
}
</pre>
<h2>
實(shí)踐練習(xí)：互動(dòng)卡
</h2>
<p>創(chuàng)建具有懸停效果的交互式卡片：</p>
<p>HTML：<br>
</p><pre class="brush:php;toolbar:false">/* Mobile-first approach */
.container {
width: 100%;
padding: 10px;
}
/* Tablet and larger */
@media screen and (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* Desktop */
@media screen and (min-width: 1024px) {
.container {
width: 960px;
}
}
</pre>
<h3>
參考：
</h3>
<ul>
<li>
MDN Web 文檔 - CSS 過(guò)渡 - 對(duì) CSS 過(guò)渡的清晰介紹，解釋如何在更改樣式時(shí)創(chuàng)建平滑效果。</li>
<li>
MDN Web 文檔 - CSS 動(dòng)畫 - 關(guān)鍵幀、動(dòng)畫屬性和創(chuàng)建復(fù)雜動(dòng)畫的分步指南。</li>
<li>
W3Schools - CSS 過(guò)渡 - 適合初學(xué)者使用實(shí)時(shí)代碼編輯器以交互方式練習(xí)過(guò)渡和動(dòng)畫。</li>
<li>
W3Schools - CSS 動(dòng)畫 - 關(guān)于使用關(guān)鍵幀和過(guò)渡向網(wǎng)站添加動(dòng)畫的簡(jiǎn)單易懂的指南。</li>
<li>
CSS 技巧 - 動(dòng)畫 - 討論響應(yīng)式動(dòng)畫、減少可訪問(wèn)性的運(yùn)動(dòng)以及媒體查詢集成。</li>
<li>
Animate.css - 一個(gè)流行的 CSS 庫(kù)，提供預(yù)構(gòu)建的動(dòng)畫，您可以輕松添加到您的項(xiàng)目中。</li>
</ul>
<hr>
<h2>
最佳實(shí)踐和組織
</h2>
<h3>
CSS架構(gòu)
</h3>
<ul>
<li>使用一致的命名約定</li>
<li>按組件/功能組織 CSS 文件</li>
<li>盡可能保持較低的特異性</li>
<li>有效地注釋你的代碼
</li>
</ul>
<pre class="brush:php;toolbar:false"><section>
<p>CSS:<br>
</p>
<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.services-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.service-card {
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Tablet */
@media (min-width: 768px) {
.services-container {
flex-direction: row;
flex-wrap: wrap;
}
.service-card {
flex: 0 1 calc(50% - 20px);
}
}
/* Desktop */
@media (min-width: 1024px) {
.service-card {
flex: 1;
}
button {
width: auto;
padding: 10px 20px;
}
}
</pre>
<h2>
實(shí)踐練習(xí)：CSS 架構(gòu)的最佳實(shí)踐
</h2>
<pre class="brush:php;toolbar:false"><！DOCTYPE html>
<html lang="zh-cn">
<頭>
<title>CSS 架構(gòu)練習(xí)</title>
<link rel="stylesheet" href="styles/reset.css"> <!-- 重置默認(rèn)瀏覽器樣式 -->
<link rel="stylesheet" href="styles/layout.css">
<鏈接 rel="stylesheet" href="styles/components/header.css"> <!-- 標(biāo)題組件樣式 -->
<link rel="stylesheet" href="styles/components/card.css"> <!-- 卡片組件樣式 -->
<link rel="stylesheet" href="styles/utilities.css"> <!-- 用于快速修復(fù)的實(shí)用程序類 -->
</頭>
<h3>
參考：
</h3>
</pre>
<ul>
<li>
BEM - 塊元素修飾符 - 一種流行的命名 CSS 類和構(gòu)建樣式以提高可重用性和可維護(hù)性的方法。</li>
<li>
SMACSS - CSS 的可擴(kuò)展和模塊化架構(gòu) - 將 CSS 組織為邏輯和可維護(hù)類別的詳細(xì)框架。</li>
<li>
Harry Roberts 的 CSS 指南 - 使用邏輯文件結(jié)構(gòu)和命名約定編寫可擴(kuò)展、可維護(hù)的 CSS 的高質(zhì)量指南。</li>
</ul>
<hr>
<h2>
建造時(shí)間到了！ ？
</h2>
<p>現(xiàn)在輪到你將所學(xué)付諸實(shí)踐了！這是你的挑戰(zhàn)：</p>
<ul>
<li>創(chuàng)建新的 CodePen（在 codepen.io 上免費(fèi)）</li>
<li>構(gòu)建我們介紹的示例和練習(xí)</li>
<li>
<strong>分享您的創(chuàng)作！</strong>在下面的評(píng)論中添加您的 CodePen 鏈接</li>
</ul>
<p><strong>獎(jiǎng)勵(lì)積分</strong>：在設(shè)計(jì)中添加您自己的創(chuàng)意！我會(huì)親自審核并回復(fù)評(píng)論中分享的每條 CodePen。</p>
<p>？ <strong>專業(yè)提示</strong>：請(qǐng)記住在 CSS 中添加注釋來(lái)解釋您的想法。它可以幫助其他人從您的代碼中學(xué)習(xí)！</p>
<hr>
<h2>
接下來(lái)是什么？ ？
</h2>
<p>這是我們的 CSS 從零到英雄系列的第 2 部分。我們將在接下來(lái)的文章中更深入地探討更令人興奮的 CSS 概念。為了確保您不會(huì)錯(cuò)過(guò)：</p>
<ol>
<li>？ <strong>為這篇文章添加書簽</strong>以便在編碼時(shí)快速參考</li>
<li>?? <strong>喜歡這篇文章</strong>如果您覺得它有幫助（它也可以幫助其他人找到它！）</li>
<li>？ <strong>關(guān)注我</strong>觀看本系列的下一部分</li>
</ol>
<h3>
讓我們聯(lián)系吧！ ？
</h3>
<p>你嘗試過(guò)練習(xí)嗎？有疑問(wèn)嗎？在評(píng)論中分享您的經(jīng)驗(yàn)！我回復(fù)每條評(píng)論并喜歡看到您的進(jìn)步。</p>
<p>第三部分見！快樂編碼！ ???????</p>
<p>以上是《給所有人的權(quán)威 CSS 指南》中的掌握 CSS |第2部分的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">本站聲明</div>
<div>本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請(qǐng)聯(lián)系admin@php.cn</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>熱門文章</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 周前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 周前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/1796821868.html" title="Palia：Rasquellywag的Riches Quest演練" class="phpgenera_Details_mainR4_bottom_title">Palia：Rasquellywag的Riches Quest演練</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 周前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/1796822997.html" title="峰：如何復(fù)興球員" class="phpgenera_Details_mainR4_bottom_title">峰：如何復(fù)興球員</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 周前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide |烏瑪媽媽漂亮的德比</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 周前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/zh/article.html">顯示更多</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>熱AI工具</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>免費(fèi)脫衣服圖片</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>用于從照片中去除衣服的在線人工智能工具。</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI脫衣機(jī)</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/zh/ai">顯示更多</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>熱門文章</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 周前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 周前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/1796821868.html" title="Palia：Rasquellywag的Riches Quest演練" class="phpgenera_Details_mainR4_bottom_title">Palia：Rasquellywag的Riches Quest演練</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 周前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/1796822997.html" title="峰：如何復(fù)興球員" class="phpgenera_Details_mainR4_bottom_title">峰：如何復(fù)興球員</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 周前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide |烏瑪媽媽漂亮的德比</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 周前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/zh/article.html">顯示更多</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>熱工具</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="記事本++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title">
<h3>記事本++7.3.1</h3>
</a>
<p>好用且免費(fèi)的代碼編輯器</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3漢化版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title">
<h3>SublimeText3漢化版</h3>
</a>
<p>中文版，非常好用</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="禪工作室 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title">
<h3>禪工作室 13.0.1</h3>
</a>
<p>功能強(qiáng)大的PHP集成開發(fā)環(huán)境</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>視覺化網(wǎng)頁(yè)開發(fā)工具</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac版</h3>
</a>
<p>神級(jí)代碼編輯軟件(SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/zh/ai">顯示更多</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>熱門話題</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/gmailyxdlrkzn" title="gmail郵箱登陸入口在哪里" class="phpgenera_Details_mainR4_bottom_title">gmail郵箱登陸入口在哪里</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8640</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/java-tutorial" title="Java教程" class="phpgenera_Details_mainR4_bottom_title">Java教程</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1787</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1730</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1581</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/zh/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1448</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/zh/faq/zt">顯示更多</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/zh/faq/1796823628.html" title="什么是'渲染障礙CSS”？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="什么是'渲染障礙CSS”？" />
</a>
<a href="http://m.miracleart.cn/zh/faq/1796823628.html" title="什么是'渲染障礙CSS”？" class="phphistorical_Version2_mids_title">什么是'渲染障礙CSS”？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">CSS會(huì)阻塞頁(yè)面渲染是因?yàn)闉g覽器默認(rèn)將內(nèi)聯(lián)和外部CSS視為關(guān)鍵資源，尤其是使用引入的樣式表、頭部大量?jī)?nèi)聯(lián)CSS以及未優(yōu)化的媒體查詢樣式。1.提取關(guān)鍵CSS并內(nèi)嵌至HTML；2.延遲加載非關(guān)鍵CSS通過(guò)JavaScript；3.使用media屬性優(yōu)化加載如打印樣式；4.壓縮合并CSS減少請(qǐng)求。建議使用工具提取關(guān)鍵CSS，結(jié)合rel="preload"異步加載，合理使用media延遲加載，避免過(guò)度拆分與復(fù)雜腳本控制。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/zh/faq/1796822133.html" title="外部與內(nèi)部CSS：最好的方法是什么？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="外部與內(nèi)部CSS：最好的方法是什么？" />
</a>
<a href="http://m.miracleart.cn/zh/faq/1796822133.html" title="外部與內(nèi)部CSS：最好的方法是什么？" class="phphistorical_Version2_mids_title">外部與內(nèi)部CSS：最好的方法是什么？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span>
<p class="Articlelist_txts_p">thebestapphachforcssdepprodsontheproject'sspefificneeds.forlargerprojects，externalcsSissBetterDuoSmaintoMaintainability andReusability; forsMallerProjectsorsingle-pageApplications，InternaltCsmightBemoresobleable.InternalCsmightBemorese.it.it'sclucialtobalancepopryseceneceenceprodrenceprodrenceNeed</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/zh/faq/1796821588.html" title="我的CSS必須在較低的情況下嗎？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="我的CSS必須在較低的情況下嗎？" />
</a>
<a href="http://m.miracleart.cn/zh/faq/1796821588.html" title="我的CSS必須在較低的情況下嗎？" class="phphistorical_Version2_mids_title">我的CSS必須在較低的情況下嗎？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span>
<p class="Articlelist_txts_p">否，CSSDOESNOTHAVETOBEINLOWERCASE.CHOMENDENS，使用flowercaseisrecommondendendending：1）一致性和可讀性，2）避免使用促進(jìn)性技術(shù)，3）潛在的Performent FormanceBenefits，以及4）RightCollaboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraborationWithInteams。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/zh/faq/1796821998.html" title="CSS案例靈敏度：了解重要的" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS案例靈敏度：了解重要的" />
</a>
<a href="http://m.miracleart.cn/zh/faq/1796821998.html" title="CSS案例靈敏度：了解重要的" class="phphistorical_Version2_mids_title">CSS案例靈敏度：了解重要的</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">cssismostlycaseminemintiment，buturlsandfontfamilynamesarecase敏感。1）屬性和valueslikeColor：紅色; prenotcase-sensive.2）urlsmustmustmatchtheserver'server'scase，例如</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/zh/faq/1796828180.html" title="什么是AutoPrefixer，它如何工作？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="什么是AutoPrefixer，它如何工作？" />
</a>
<a href="http://m.miracleart.cn/zh/faq/1796828180.html" title="什么是AutoPrefixer，它如何工作？" class="phphistorical_Version2_mids_title">什么是AutoPrefixer，它如何工作？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">Autoprefixer是一個(gè)根據(jù)目標(biāo)瀏覽器范圍自動(dòng)為CSS屬性添加廠商前綴的工具。1.它解決了手動(dòng)維護(hù)前綴易出錯(cuò)的問(wèn)題；2.通過(guò)PostCSS插件形式工作，解析CSS、分析需加前綴的屬性、依配置生成代碼；3.使用步驟包括安裝插件、設(shè)置browserslist、在構(gòu)建流程中啟用；4.注意事項(xiàng)有不手動(dòng)加前綴、保持配置更新、非所有屬性都加前綴、建議配合預(yù)處理器使用。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/zh/faq/1796821606.html" title="什么是CSS計(jì)數(shù)器？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="什么是CSS計(jì)數(shù)器？" />
</a>
<a href="http://m.miracleart.cn/zh/faq/1796821606.html" title="什么是CSS計(jì)數(shù)器？" class="phphistorical_Version2_mids_title">什么是CSS計(jì)數(shù)器？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span>
<p class="Articlelist_txts_p">csscounterscanautomationallymentermentermentections和lists.1）usecounter-ensettoInitializize，反插入式發(fā)芽，andcounter（）orcounters（）</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/zh/faq/1796821580.html" title="CSS：何時(shí)重要（何時(shí)不）？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS：何時(shí)重要（何時(shí)不）？" />
</a>
<a href="http://m.miracleart.cn/zh/faq/1796821580.html" title="CSS：何時(shí)重要（何時(shí)不）？" class="phphistorical_Version2_mids_title">CSS：何時(shí)重要（何時(shí)不）？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">在CSS中，選擇器和屬性名不區(qū)分大小寫，而值、命名顏色、URL和自定義屬性則區(qū)分大小寫。1.選擇器和屬性名不區(qū)分大小寫，例如background-color和Background-Color相同。2.值中的十六進(jìn)制顏色不區(qū)分大小寫，但命名顏色區(qū)分大小寫，如red有效而Red無(wú)效。3.URL區(qū)分大小寫，可能導(dǎo)致文件加載問(wèn)題。4.自定義屬性（變量）區(qū)分大小寫，使用時(shí)需注意大小寫一致。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/zh/faq/1796827610.html" title="什么是圓錐級(jí)函數(shù)？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175130377175874.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="什么是圓錐級(jí)函數(shù)？" />
</a>
<a href="http://m.miracleart.cn/zh/faq/1796827610.html" title="什么是圓錐級(jí)函數(shù)？" class="phphistorical_Version2_mids_title">什么是圓錐級(jí)函數(shù)？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:16 AM</span>
<p class="Articlelist_txts_p">theconic-Gradient（）functionIncsscreatesCircularGradientsThatRotateColorStopSaroundAcentralPoint.1.IsidealForPieCharts，ProgressIndicators，colordichers，colorwheels和decorativeBackgrounds.2.itworksbysbysbysbydefindefingincolordefingincolorstopsatspecificains off.</p>
</div>
</div>
<a href="http://m.miracleart.cn/zh/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>公益在線PHP培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://m.miracleart.cn/zh/about/us.html">關(guān)于我們</a>
<a href="http://m.miracleart.cn/zh/about/disclaimer.html">免責(zé)聲明</a>
<a href="http://m.miracleart.cn/zh/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://m.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="4gdo9" class="pl_css_ganrao" style="display: none;"><legend id="4gdo9"></legend><span id="4gdo9"></span><abbr id="4gdo9"><strike id="4gdo9"><thead id="4gdo9"></thead></strike></abbr><dfn id="4gdo9"></dfn><del id="4gdo9"><nobr id="4gdo9"></nobr></del><small id="4gdo9"><bdo id="4gdo9"><dd id="4gdo9"></dd></bdo></small><thead id="4gdo9"></thead><address id="4gdo9"><kbd id="4gdo9"><strong id="4gdo9"><small id="4gdo9"></small></strong></kbd></address><nav id="4gdo9"></nav><legend id="4gdo9"><div id="4gdo9"><big id="4gdo9"></big></div></legend><dl id="4gdo9"></dl><address id="4gdo9"><abbr id="4gdo9"></abbr></address><u id="4gdo9"><fieldset id="4gdo9"></fieldset></u><ins id="4gdo9"><optgroup id="4gdo9"></optgroup></ins><progress id="4gdo9"><output id="4gdo9"><style id="4gdo9"></style></output></progress><mark id="4gdo9"></mark><ins id="4gdo9"></ins><code id="4gdo9"></code><em id="4gdo9"></em><i id="4gdo9"></i><small id="4gdo9"></small><i id="4gdo9"><tr id="4gdo9"></tr></i><b id="4gdo9"><small id="4gdo9"><pre id="4gdo9"><span id="4gdo9"></span></pre></small></b><legend id="4gdo9"><div id="4gdo9"><u id="4gdo9"></u></div></legend><rt id="4gdo9"></rt><big id="4gdo9"></big><dd id="4gdo9"><xmp id="4gdo9"><track id="4gdo9"><var id="4gdo9"></var></track></xmp></dd><tr id="4gdo9"></tr><fieldset id="4gdo9"></fieldset><source id="4gdo9"></source><pre id="4gdo9"></pre><address id="4gdo9"><kbd id="4gdo9"><b id="4gdo9"><label id="4gdo9"></label></b></kbd></address><del id="4gdo9"></del><noframes id="4gdo9"></noframes><fieldset id="4gdo9"></fieldset><track id="4gdo9"><input id="4gdo9"><strong id="4gdo9"><meter id="4gdo9"></meter></strong></input></track><strong id="4gdo9"><cite id="4gdo9"><form id="4gdo9"><track id="4gdo9"></track></form></cite></strong><optgroup id="4gdo9"><pre id="4gdo9"><span id="4gdo9"><kbd id="4gdo9"></kbd></span></pre></optgroup><form id="4gdo9"></form><ol id="4gdo9"><xmp id="4gdo9"><track id="4gdo9"><kbd id="4gdo9"></kbd></track></xmp></ol><progress id="4gdo9"><output id="4gdo9"><style id="4gdo9"></style></output></progress><li id="4gdo9"><label id="4gdo9"><sup id="4gdo9"><blockquote id="4gdo9"></blockquote></sup></label></li><label id="4gdo9"></label><var id="4gdo9"></var><nav id="4gdo9"></nav><th id="4gdo9"><strong id="4gdo9"></strong></th><mark id="4gdo9"><table id="4gdo9"></table></mark><dl id="4gdo9"></dl><var id="4gdo9"><wbr id="4gdo9"><output id="4gdo9"><ruby id="4gdo9"></ruby></output></wbr></var><var id="4gdo9"></var></div>
</html>