詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）-H5教程-PHP中文網

首頁

web前端

H5教程

詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）

黄舟

Mar 11, 2017 pm 03:51 PM

自從響應式設計的概念提出以來，越來越大的網站採用這種想法。各類大型網站也如雨後春筍般的湧了出來。如：小米商城，天貓等。
至於響應式設計的概念等大家可以去百度百度，我這裡就不相信講解了。直接為大家帶出來源碼，用Html5實現響應式的九宮格。程式碼如下：

<!DOCTYPE html><html><head><title>html5响应式九宫格</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8" /><style type="text/css">
    html, body { color:#222; font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif; margin:0; padding: 0; text-decoration: none; }
    img { border:0; }
    ul { list-style: none outside none; margin:0; padding: 0; }
    body {        
    background-color:#eee; 
    }
    body .mainmenu:after { clear: both; content: " "; display: block; }

    body .mainmenu li{ 
        float:left;        
        margin-left: 2.5%;        
        margin-top: 2.5%;        
        width: 30%;  
        border-radius:3px; 
        overflow:hidden;    }

    body .mainmenu li a{ display:block;  
    color:#FFF;   
    text-align:center }    
    body .mainmenu li a b{ 
        display:block; height:80px;    }
    body .mainmenu li a img{ 
        margin: 15px auto 15px;        
        width: 50px;        
        height: 50px;    }

    body .mainmenu li a span{ display:block; height:30px; 
    line-height:30px;background-color:#FFF; 
    color: #999; font-size:14px; }

    body .mainmenu li:nth-child(8n+1) {background-color:#36A1DB}    
    body .mainmenu li:nth-child(8n+2) {background-color:#678ce1}    
    body .mainmenu li:nth-child(8n+3) {background-color:#8c67df}    
    body .mainmenu li:nth-child(8n+4) {background-color:#84d018}    
    body .mainmenu li:nth-child(8n+5) {background-color:#14c760}    
    body .mainmenu li:nth-child(8n+6) {background-color:#f3b613}    
    body .mainmenu li:nth-child(8n+7) {background-color:#ff8a4a}    
    body .mainmenu li:nth-child(8n+8) {background-color:#fc5366}
    </style>
    </head>
    <body>
    <ul class="mainmenu">
        <li><a href="/" ><b><img  src="/static/imghwm/default1.png"  data-src="images/tb01.png"  class="lazy"   / alt="詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）" ></b><span>关于我们</span></a></li>
        <li><a href="/" ><b><img  src="/static/imghwm/default1.png"  data-src="images/tb02.png"  class="lazy"   / alt="詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）" ></b><span>新闻中心</span></a></li>
        <li><a href="/" ><b><img  src="/static/imghwm/default1.png"  data-src="images/tb03.png"  class="lazy"   / alt="詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）" ></b><span>产品展示</span></a></li>
        <li><a href="/" ><b><img  src="/static/imghwm/default1.png"  data-src="images/tb04.png"  class="lazy"   / alt="詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）" ></b><span>成功案例</span></a></li>
        <li><a href="/" ><b><img  src="/static/imghwm/default1.png"  data-src="images/tb05.png"  class="lazy"   / alt="詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）" ></b><span>下载中心</span></a></li>
        <li><a href="/" ><b><img  src="/static/imghwm/default1.png"  data-src="images/tb06.png"  class="lazy"   / alt="詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）" ></b><span>团队介绍</span></a></li>
        <li><a href="/" ><b><img  src="/static/imghwm/default1.png"  data-src="images/tb06.png"  class="lazy"   / alt="詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）" ></b><span>人才招聘</span></a></li>
        <li><a href="/" ><b><img  src="/static/imghwm/default1.png"  data-src="images/tb07.png"  class="lazy"   / alt="詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）" ></b><span>联系我们</span></a></li>
        <li><a href="/" ><b><img  src="/static/imghwm/default1.png"  data-src="images/tb08.png"  class="lazy"   / alt="詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）" ></b><span>在线留言</span></a></li>          
    </ul>
    <!-- 欢迎大家关注我的博客！如有疑问,请加QQ群：135430763共同学习！ -->
    </body>
    </html>

窄螢幕運作效果如下：

詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）
#寬螢幕運作效果如下：

詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）

############################################################### #

以上是詳細介紹Html5響應式設計實現九宮格的範例程式碼（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：網絡內容和設計的未來May 01, 2025 am 12:12 AM

H5（HTML5）將通過新元素和API提升網頁內容和設計。 1）H5增強了語義化標記和多媒體支持。 2）它引入了Canvas和SVG，豐富了網頁設計。 3）H5的工作原理是通過新標籤和API擴展HTML功能。 4）基本用法包括使用創建圖形，高級用法涉及WebStorageAPI。 5）開發者需注意瀏覽器兼容性和性能優化。

H5：網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力，極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5：HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進：1.語義化標籤提升了代碼清晰度和SEO效果；2.多媒體支持簡化了視頻和音頻嵌入；3.表單增強簡化了驗證；4.離線與本地存儲提高了用戶體驗；5.畫布與圖形功能增強了網頁的可視化效果。

HTML5：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。