\/* 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 References:\n<\/h3>\n\n\n- \nMDN Web Docs - Using CSS Custom Properties (Variables) - A thorough, beginner-friendly explanation with examples on defining, using, and updating CSS variables.<\/li>\n
- \nW3Schools - CSS Variables - Covers the basics of CSS variables with live code examples for quick practice.<\/li>\n
- \nCSS Tricks - A Complete Guide to Custom Properties - A comprehensive guide, featuring real-world use cases and tips for advanced variable usage.<\/li>\n
- \nFreecodecamp - CSS Variables Full Handbook - Explores powerful techniques such as cascading effects, media query-based variables, and scope management.<\/li>\n<\/ul>\n\n\n
\n\n\n \n \n Animations and Transitions \n<\/h2>\n\n
Adding movement to your website creates engaging user experiences. CSS provides two main ways to create animation:<\/p>\n\n
\n \n \n Transitions\n<\/h3>\n\n
Perfect for simple state changes:
\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 Keyframe Animations\n<\/h3>\n\n
For more complex, multi-step animations:
\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 Advanced Animation Techniques\n<\/h3>\n\n
CSS Custom Properties in Animations:
\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 Advanced Keyframe Animation:\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 Practical Exercise: Interactive Card\n<\/h2>\n\n
Create an interactive card with hover effects:<\/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 References:\n<\/h3>\n\n\n- \nMDN Web Docs - CSS Transitions - A clear introduction to CSS transitions, explaining how to create smooth effects when changing styles.<\/li>\n
- \nMDN Web Docs - CSS Animations - A step-by-step guide to keyframes, animation properties, and creating complex animations.<\/li>\n
- \nW3Schools - CSS Transitions - Beginner-friendly with live code editors to practice transitions and animations interactively.<\/li>\n
- \nW3Schools - CSS Animations - An easy-to-follow guide on using keyframes and transitions to add animations to a website.<\/li>\n
- \nCSS Tricks - Animations - Discusses responsive animations, reduced motion for accessibility, and media query integration.<\/li>\n
- \nAnimate.css - A popular CSS library offering pre-built animations you can easily add to your projects.<\/li>\n<\/ul>\n\n\n
\n\n\n \n \n Best Practices and Organization \n<\/h2>\n\n\n \n \n CSS Architecture\n<\/h3>\n\n\n- Use a consistent naming convention<\/li>\n
- Organize CSS files by component\/feature<\/li>\n
- Keep specificity low where possible<\/li>\n
- Comment your code effectively\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 Practical Exercise: Best Practices for CSS Architecture\n<\/h2>\n\n\n\n\n\n\n \n \n CSS Architecture Exercise<\/title>\n <link rel=\"stylesheet\" href=\"styles\/reset.css\"> <!-- Resets default browser styles -->\n <link rel=\"stylesheet\" href=\"styles\/layout.css\"> <!-- Layout-related styles -->\n <link rel=\"stylesheet\" href=\"styles\/components\/header.css\"> <!-- Header component styles -->\n <link rel=\"stylesheet\" href=\"styles\/components\/card.css\"> <!-- Card component styles -->\n <link rel=\"stylesheet\" href=\"styles\/utilities.css\"> <!-- Utility classes for quick fixes -->\n<\/head>\n<body>
<h1><a href="http://miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <header>\n\n\n\n<h3>\n \n \n References:\n<\/h3>\n\n<\/pre>\n<ul>\n<li>\nBEM - Block Element Modifier - A popular methodology for naming CSS classes and structuring your styles to improve reusability and maintainability.<\/li>\n<li>\nSMACSS - Scalable and Modular Architecture for CSS - A detailed framework for organizing CSS into logical and maintainable categories.<\/li>\n<li>\nCSS Guidelines by Harry Roberts - A high-quality guide to writing scalable, maintainable CSS with logical file structure and naming conventions.<\/li>\n<\/ul>\n\n\n<hr>\n\n<h2>\n \n \n Time to Build! ?\n<\/h2>\n\n<p>Now it's your turn to put your learning into practice! Here's your challenge:<\/p>\n<ul>\n<li>Create new CodePen (It's free at codepen.io)<\/li>\n<li>Build the examples and exercises we covered<\/li>\n<li>\n<strong>Share your creation!<\/strong> Drop your CodePen link in the comments below<\/li>\n<\/ul>\n\n<p><strong>Bonus Points<\/strong>: Add your own creative twist to the designs! I'll personally review and respond to every CodePen shared in the comments.<\/p>\n\n<p>? <strong>Pro Tip<\/strong>: Remember to add comments in your CSS to explain your thinking. It helps others learn from your code!<\/p>\n\n\n<hr>\n\n<h2>\n \n \n What's Next? ?\n<\/h2>\n\n<p>This is Part 2 of our CSS Zero to Hero series. We'll dive deeper into more exciting CSS concepts in upcoming posts. To make sure you don't miss out:<\/p>\n\n<ol>\n<li>? <strong>Bookmark this post<\/strong> for quick reference when you're coding<\/li>\n<li>?? <strong>Like this article<\/strong> if you found it helpful (it helps others find it too!)<\/li>\n<li>? <strong>Follow me<\/strong> for the next parts of the series<\/li>\n<\/ol>\n\n<h3>\n \n \n Let's Connect! ?\n<\/h3>\n\n<p>Did you try the exercises? Have questions? Share your experience in the comments! I respond to every comment and love seeing your progress.<\/p>\n\n<p>See you in Part 3! Happy coding! ??????<\/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">
<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://miracleart.cn/" 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="Community" class="head_nava head_nava-template1">Community</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://miracleart.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a>
<a href="http://miracleart.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/course.html" title="Course" class="languagechoosea on">Course</a>
<a href="http://miracleart.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a>
<a href="http://miracleart.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a>
<a href="http://miracleart.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a>
<a href="http://miracleart.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a>
<a href="http://miracleart.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a>
<a href="http://miracleart.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://miracleart.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/game" title="Game Download" class="languagechoosea on">Game Download</a>
<a href="http://miracleart.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">English<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:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:;" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</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://miracleart.cn/" title="Home"
class="phpgenera_Details_mainL1a">Home</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://miracleart.cn/web-designer.html"
class="phpgenera_Details_mainL1a">Web Front-end</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://miracleart.cn/css-tutorial.html"
class="phpgenera_Details_mainL1a">CSS Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Mastering CSS in The Definitive CSS Guide for Everyone | Part-2</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Mastering CSS in The Definitive CSS Guide for Everyone | Part-2</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://miracleart.cn/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://miracleart.cn/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>
Table of Contents
</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>
Responsive Design Principles
</h2>
<p>In today's multi-device world, responsive design isn't optional – it's essential. Your website should look great whether it's viewed on a smartphone or a large desktop monitor.</p>
<h3>
Media Queries
</h3>
<p>Media queries are your responsive design superpower:<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>
Responsive Units
</h3>
<p>Using relative units makes your design naturally responsive:</p>
<ul>
<li>
<strong>rem</strong>: Relative to root element's font size</li>
<li>
<strong>em</strong>: Relative to parent element's font size</li>
<li>
<strong>vw/vh</strong>: Relative to viewport dimensions</li>
<li>
<strong>%</strong>: Relative to parent element's size</li>
</ul>
<h2>
Practical Exercise: Responsive Service Section
</h2>
<p>Create a responsive service section that adapts seamlessly to different screen sizes using media queries and flexible units.</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: Let's explore more specific breakpoints for our Service Section.<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>
References:
</h3>
<ul>
<li>
MDN Web Docs - Responsive Design Basics - An excellent introduction to responsive design concepts, covering viewport, breakpoints, and flexible layouts.</li>
<li>
FreeCodeCamp - Responsive Web Design Certification - A complete course covering responsive design principles, grids, media queries, and accessibility.</li>
<li>
Can I Use - Check browser compatibility for responsive design features like media queries and flexbox.</li>
<li>
Responsive Design Cheatsheet - Covers key responsive design properties and techniques in an easy-to-digest format.</li>
</ul>
<hr>
<h2>
CSS Variables and Custom Properties
</h2>
<p>CSS Variables (Custom Properties) bring programming-like flexibility to your stylesheets. They make maintenance easier and enable dynamic styling.<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>
Practical Exercise: CSS Variables for Theming and Reusability
</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>
References:
</h3>
<ul>
<li>
MDN Web Docs - Using CSS Custom Properties (Variables) - A thorough, beginner-friendly explanation with examples on defining, using, and updating CSS variables.</li>
<li>
W3Schools - CSS Variables - Covers the basics of CSS variables with live code examples for quick practice.</li>
<li>
CSS Tricks - A Complete Guide to Custom Properties - A comprehensive guide, featuring real-world use cases and tips for advanced variable usage.</li>
<li>
Freecodecamp - CSS Variables Full Handbook - Explores powerful techniques such as cascading effects, media query-based variables, and scope management.</li>
</ul>
<hr>
<h2>
Animations and Transitions
</h2>
<p>Adding movement to your website creates engaging user experiences. CSS provides two main ways to create animation:</p>
<h3>
Transitions
</h3>
<p>Perfect for simple state changes:<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>
Keyframe Animations
</h3>
<p>For more complex, multi-step animations:<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>
Advanced Animation Techniques
</h3>
<p>CSS Custom Properties in Animations:<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>
Advanced Keyframe Animation:
</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>
Practical Exercise: Interactive Card
</h2>
<p>Create an interactive card with hover effects:</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>
References:
</h3>
<ul>
<li>
MDN Web Docs - CSS Transitions - A clear introduction to CSS transitions, explaining how to create smooth effects when changing styles.</li>
<li>
MDN Web Docs - CSS Animations - A step-by-step guide to keyframes, animation properties, and creating complex animations.</li>
<li>
W3Schools - CSS Transitions - Beginner-friendly with live code editors to practice transitions and animations interactively.</li>
<li>
W3Schools - CSS Animations - An easy-to-follow guide on using keyframes and transitions to add animations to a website.</li>
<li>
CSS Tricks - Animations - Discusses responsive animations, reduced motion for accessibility, and media query integration.</li>
<li>
Animate.css - A popular CSS library offering pre-built animations you can easily add to your projects.</li>
</ul>
<hr>
<h2>
Best Practices and Organization
</h2>
<h3>
CSS Architecture
</h3>
<ul>
<li>Use a consistent naming convention</li>
<li>Organize CSS files by component/feature</li>
<li>Keep specificity low where possible</li>
<li>Comment your code effectively
</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>
Practical Exercise: Best Practices for CSS Architecture
</h2>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Architecture Exercise</title>
<link rel="stylesheet" href="styles/reset.css"> <!-- Resets default browser styles -->
<link rel="stylesheet" href="styles/layout.css"> <!-- Layout-related styles -->
<link rel="stylesheet" href="styles/components/header.css"> <!-- Header component styles -->
<link rel="stylesheet" href="styles/components/card.css"> <!-- Card component styles -->
<link rel="stylesheet" href="styles/utilities.css"> <!-- Utility classes for quick fixes -->
</head>
<body>
<header>
<h3>
References:
</h3>
</pre>
<ul>
<li>
BEM - Block Element Modifier - A popular methodology for naming CSS classes and structuring your styles to improve reusability and maintainability.</li>
<li>
SMACSS - Scalable and Modular Architecture for CSS - A detailed framework for organizing CSS into logical and maintainable categories.</li>
<li>
CSS Guidelines by Harry Roberts - A high-quality guide to writing scalable, maintainable CSS with logical file structure and naming conventions.</li>
</ul>
<hr>
<h2>
Time to Build! ?
</h2>
<p>Now it's your turn to put your learning into practice! Here's your challenge:</p>
<ul>
<li>Create new CodePen (It's free at codepen.io)</li>
<li>Build the examples and exercises we covered</li>
<li>
<strong>Share your creation!</strong> Drop your CodePen link in the comments below</li>
</ul>
<p><strong>Bonus Points</strong>: Add your own creative twist to the designs! I'll personally review and respond to every CodePen shared in the comments.</p>
<p>? <strong>Pro Tip</strong>: Remember to add comments in your CSS to explain your thinking. It helps others learn from your code!</p>
<hr>
<h2>
What's Next? ?
</h2>
<p>This is Part 2 of our CSS Zero to Hero series. We'll dive deeper into more exciting CSS concepts in upcoming posts. To make sure you don't miss out:</p>
<ol>
<li>? <strong>Bookmark this post</strong> for quick reference when you're coding</li>
<li>?? <strong>Like this article</strong> if you found it helpful (it helps others find it too!)</li>
<li>? <strong>Follow me</strong> for the next parts of the series</li>
</ol>
<h3>
Let's Connect! ?
</h3>
<p>Did you try the exercises? Have questions? Share your experience in the comments! I respond to every comment and love seeing your progress.</p>
<p>See you in Part 3! Happy coding! ??????</p>
<p>The above is the detailed content of Mastering CSS in The Definitive CSS Guide for Everyone | Part-2. For more information, please follow other related articles on the PHP Chinese website!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Statement of this Website</div>
<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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>Hot Article</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796822997.html" title="Peak: How To Revive Players" class="phpgenera_Details_mainR4_bottom_title">Peak: How To Revive Players</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796832397.html" title="Grass Wonder Build Guide | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide | Uma Musume Pretty Derby</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796823726.html" title="PEAK How to Emote" class="phpgenera_Details_mainR4_bottom_title">PEAK How to Emote</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/article.html">Show More</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>Hot AI Tools</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ai">Show More</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>Hot Article</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796822997.html" title="Peak: How To Revive Players" class="phpgenera_Details_mainR4_bottom_title">Peak: How To Revive Players</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796832397.html" title="Grass Wonder Build Guide | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide | Uma Musume Pretty Derby</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796823726.html" title="PEAK How to Emote" class="phpgenera_Details_mainR4_bottom_title">PEAK How to Emote</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/article.html">Show More</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>Hot Tools</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/toolset/development-tools/92" title="Notepad++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="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" 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 Chinese version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/toolset/development-tools/121" title="Zend Studio 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="Zend Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" 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 version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ai">Show More</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>Hot Topics</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</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>8644</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://miracleart.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</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://miracleart.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</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://miracleart.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</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>1582</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://miracleart.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</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://miracleart.cn/faq/zt">Show More</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://miracleart.cn/faq/1796823628.html" title="What is 'render-blocking 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="What is 'render-blocking CSS'?" />
</a>
<a href="http://miracleart.cn/faq/1796823628.html" title="What is 'render-blocking CSS'?" class="phphistorical_Version2_mids_title">What is 'render-blocking CSS'?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796822133.html" title="External vs. Internal CSS: What's the Best Approach?" 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="External vs. Internal CSS: What's the Best Approach?" />
</a>
<a href="http://miracleart.cn/faq/1796822133.html" title="External vs. Internal CSS: What's the Best Approach?" class="phphistorical_Version2_mids_title">External vs. Internal CSS: What's the Best Approach?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span>
<p class="Articlelist_txts_p">ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796821998.html" title="CSS Case Sensitivity: Understanding What Matters" 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 Case Sensitivity: Understanding What Matters" />
</a>
<a href="http://miracleart.cn/faq/1796821998.html" title="CSS Case Sensitivity: Understanding What Matters" class="phphistorical_Version2_mids_title">CSS Case Sensitivity: Understanding What Matters</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">CSSismostlycase-insensitive,butURLsandfontfamilynamesarecase-sensitive.1)Propertiesandvalueslikecolor:red;arenotcase-sensitive.2)URLsmustmatchtheserver'scase,e.g.,/images/Logo.png.3)Fontfamilynameslike'OpenSans'mustbeexact.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796828180.html" title="What is Autoprefixer and how does it work?" 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="What is Autoprefixer and how does it work?" />
</a>
<a href="http://miracleart.cn/faq/1796828180.html" title="What is Autoprefixer and how does it work?" class="phphistorical_Version2_mids_title">What is Autoprefixer and how does it work?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796827610.html" title="What is the conic-gradient() function?" 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="What is the conic-gradient() function?" />
</a>
<a href="http://miracleart.cn/faq/1796827610.html" title="What is the conic-gradient() function?" class="phphistorical_Version2_mids_title">What is the conic-gradient() function?</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.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796828149.html" title="CSS tutorial for creating a sticky header or footer" 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/431/639/175138946074845.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS tutorial for creating a sticky header or footer" />
</a>
<a href="http://miracleart.cn/faq/1796828149.html" title="CSS tutorial for creating a sticky header or footer" class="phphistorical_Version2_mids_title">CSS tutorial for creating a sticky header or footer</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:04 AM</span>
<p class="Articlelist_txts_p">TocreatestickyheadersandfooterswithCSS,useposition:stickyforheaderswithtopvalueandz-index,ensuringparentcontainersdon’trestrictit.1.Forstickyheaders:setposition:sticky,top:0,z-index,andbackgroundcolor.2.Forstickyfooters,betteruseposition:fixedwithbot</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796823987.html" title="What is the scope of a CSS Custom Property?" 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/175078178180985.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the scope of a CSS Custom Property?" />
</a>
<a href="http://miracleart.cn/faq/1796823987.html" title="What is the scope of a CSS Custom Property?" class="phphistorical_Version2_mids_title">What is the scope of a CSS Custom Property?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 25, 2025 am 12:16 AM</span>
<p class="Articlelist_txts_p">The scope of CSS custom properties depends on the context of their declaration, global variables are usually defined in :root, while local variables are defined within a specific selector for componentization and isolation of styles. For example, variables defined in the .card class are only available for elements that match the class and their children. Best practices include: 1. Use: root to define global variables such as topic color; 2. Define local variables inside the component to implement encapsulation; 3. Avoid repeatedly declaring the same variable; 4. Pay attention to the coverage problems that may be caused by selector specificity. Additionally, CSS variables are case sensitive and should be defined before use to avoid errors. If the variable is undefined or the reference fails, the fallback value or default value initial will be used. Debug can be done through the browser developer</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796822970.html" title="What are fr units in CSS Grid?" 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/175052439125971.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What are fr units in CSS Grid?" />
</a>
<a href="http://miracleart.cn/faq/1796822970.html" title="What are fr units in CSS Grid?" class="phphistorical_Version2_mids_title">What are fr units in CSS Grid?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 22, 2025 am 12:46 AM</span>
<p class="Articlelist_txts_p">ThefrunitinCSSGriddistributesavailablespaceproportionally.1.Itworksbydividingspacebasedonthesumoffrvalues,e.g.,1fr2frgivesone-thirdandtwo-thirds.2.Itenablesflexiblelayouts,avoidsmanualcalculations,andsupportsresponsivedesign.3.Commonusesincludeequal-</p>
</div>
</div>
<a href="http://miracleart.cn/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>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://miracleart.cn/about/us.html">About us</a>
<a href="http://miracleart.cn/about/disclaimer.html">Disclaimer</a>
<a href="http://miracleart.cn/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://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="00c06" class="pl_css_ganrao" style="display: none;"><bdo id="00c06"><samp id="00c06"><noframes id="00c06"></noframes></samp></bdo><button id="00c06"></button><em id="00c06"></em><dfn id="00c06"></dfn><s id="00c06"></s><menu id="00c06"><tr id="00c06"><abbr id="00c06"></abbr></tr></menu><cite id="00c06"><delect id="00c06"><nav id="00c06"></nav></delect></cite><wbr id="00c06"><abbr id="00c06"><th id="00c06"></th></abbr></wbr><s id="00c06"></s><table id="00c06"></table><object id="00c06"></object><input id="00c06"><tbody id="00c06"><abbr id="00c06"></abbr></tbody></input><abbr id="00c06"></abbr><cite id="00c06"><center id="00c06"><acronym id="00c06"></acronym></center></cite><tfoot id="00c06"></tfoot><input id="00c06"><tbody id="00c06"><wbr id="00c06"></wbr></tbody></input><menu id="00c06"><tbody id="00c06"><li id="00c06"></li></tbody></menu><nav id="00c06"></nav><kbd id="00c06"><optgroup id="00c06"><fieldset id="00c06"></fieldset></optgroup></kbd><xmp id="00c06"></xmp><optgroup id="00c06"></optgroup><code id="00c06"><td id="00c06"><button id="00c06"></button></td></code><s id="00c06"></s><code id="00c06"></code><dfn id="00c06"></dfn><blockquote id="00c06"></blockquote><nav id="00c06"><fieldset id="00c06"><samp id="00c06"></samp></fieldset></nav><li id="00c06"></li><table id="00c06"></table><pre id="00c06"><bdo id="00c06"><table id="00c06"></table></bdo></pre><delect id="00c06"><object id="00c06"><dfn id="00c06"></dfn></object></delect><del id="00c06"></del><td id="00c06"></td><abbr id="00c06"></abbr><strong id="00c06"><del id="00c06"><abbr id="00c06"></abbr></del></strong><input id="00c06"><tbody id="00c06"><li id="00c06"></li></tbody></input><tr id="00c06"><s id="00c06"><button id="00c06"></button></s></tr><dd id="00c06"></dd><tbody id="00c06"><ul id="00c06"><input id="00c06"></input></ul></tbody><sup id="00c06"><tbody id="00c06"><td id="00c06"></td></tbody></sup><s id="00c06"></s><delect id="00c06"></delect><tbody id="00c06"><ul id="00c06"><input id="00c06"></input></ul></tbody><del id="00c06"></del><strike id="00c06"></strike><tfoot id="00c06"></tfoot><small id="00c06"></small><strike id="00c06"><delect id="00c06"><object id="00c06"></object></delect></strike><bdo id="00c06"></bdo><abbr id="00c06"></abbr><del id="00c06"></del><abbr id="00c06"></abbr><td id="00c06"><sup id="00c06"><kbd id="00c06"></kbd></sup></td><strike id="00c06"><delect id="00c06"><nav id="00c06"></nav></delect></strike><em id="00c06"></em><samp id="00c06"><noframes id="00c06"><sup id="00c06"></sup></noframes></samp><strike id="00c06"><kbd id="00c06"><s id="00c06"></s></kbd></strike><sup id="00c06"></sup><cite id="00c06"><samp id="00c06"><noframes id="00c06"></noframes></samp></cite><em id="00c06"><tfoot id="00c06"></tfoot></em><abbr id="00c06"><source id="00c06"><acronym id="00c06"></acronym></source></abbr><menu id="00c06"><pre id="00c06"><small id="00c06"></small></pre></menu><menu id="00c06"></menu><strike id="00c06"><delect id="00c06"><optgroup id="00c06"></optgroup></delect></strike><sup id="00c06"></sup><optgroup id="00c06"></optgroup><fieldset id="00c06"></fieldset><button id="00c06"></button><code id="00c06"></code><center id="00c06"></center><pre id="00c06"><small id="00c06"><source id="00c06"></source></small></pre><button id="00c06"></button><abbr id="00c06"></abbr><acronym id="00c06"></acronym><pre id="00c06"></pre><tbody id="00c06"></tbody><dfn id="00c06"><tbody id="00c06"><del id="00c06"></del></tbody></dfn><dl id="00c06"><td id="00c06"><option id="00c06"></option></td></dl><tr id="00c06"></tr><samp id="00c06"><object id="00c06"><button id="00c06"></button></object></samp><dd id="00c06"><object id="00c06"><tfoot id="00c06"></tfoot></object></dd><tbody id="00c06"><li id="00c06"><center id="00c06"></center></li></tbody><tbody id="00c06"></tbody><strike id="00c06"><tr id="00c06"><object id="00c06"></object></tr></strike><tr id="00c06"></tr><li id="00c06"><rt id="00c06"><pre id="00c06"></pre></rt></li><pre id="00c06"></pre><tr id="00c06"><s id="00c06"><abbr id="00c06"></abbr></s></tr><sup id="00c06"></sup><option id="00c06"></option><bdo id="00c06"></bdo><bdo id="00c06"></bdo><samp id="00c06"></samp><rt id="00c06"><em id="00c06"><cite id="00c06"></cite></em></rt><s id="00c06"></s><small id="00c06"><center id="00c06"><noframes id="00c06"></noframes></center></small><del id="00c06"></del><strong id="00c06"></strong><option id="00c06"></option><bdo id="00c06"><samp id="00c06"><s id="00c06"></s></samp></bdo><sup id="00c06"></sup><tbody id="00c06"></tbody><pre id="00c06"><bdo id="00c06"><dd id="00c06"></dd></bdo></pre><code id="00c06"><xmp id="00c06"><button id="00c06"></button></xmp></code><bdo id="00c06"><center id="00c06"><noframes id="00c06"></noframes></center></bdo><center id="00c06"></center><tbody id="00c06"></tbody><option id="00c06"></option><small id="00c06"><center id="00c06"><noframes id="00c06"></noframes></center></small><th id="00c06"></th><s id="00c06"></s><abbr id="00c06"></abbr><blockquote id="00c06"><menu id="00c06"><pre id="00c06"></pre></menu></blockquote><fieldset id="00c06"></fieldset><input id="00c06"></input><ul id="00c06"></ul><dl id="00c06"><ul id="00c06"><center id="00c06"></center></ul></dl><strike id="00c06"></strike><samp id="00c06"></samp><bdo id="00c06"></bdo><button id="00c06"></button><cite id="00c06"></cite><dl id="00c06"></dl><dfn id="00c06"><tr id="00c06"><td id="00c06"></td></tr></dfn><source id="00c06"></source><fieldset id="00c06"></fieldset><center id="00c06"><em id="00c06"><cite id="00c06"></cite></em></center><center id="00c06"><code id="00c06"><blockquote id="00c06"></blockquote></code></center><em id="00c06"></em><tbody id="00c06"></tbody><samp id="00c06"></samp><blockquote id="00c06"></blockquote><source id="00c06"><pre id="00c06"><cite id="00c06"></cite></pre></source><dd id="00c06"></dd><kbd id="00c06"><s id="00c06"><sup id="00c06"></sup></s></kbd><fieldset id="00c06"></fieldset><dfn id="00c06"></dfn><blockquote id="00c06"></blockquote><tbody id="00c06"></tbody><li id="00c06"><center id="00c06"><optgroup id="00c06"></optgroup></center></li><td id="00c06"></td><td id="00c06"></td><ul id="00c06"><menu id="00c06"><tr id="00c06"></tr></menu></ul><tbody id="00c06"></tbody><center id="00c06"><noframes id="00c06"><sup id="00c06"></sup></noframes></center><strong id="00c06"></strong><strong id="00c06"></strong></div>
</html>