生活随笔
收集整理的這篇文章主要介紹了
Html5响应式设计与实现广场
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
由于提出的想法響應式設計，越來越多的網站使用這樣的思想。各類大型網站如雨后春筍般涌了出來。例如：小米商城。天貓等。
至于響應式設計的概念等大家能夠去百度百度，我這里就不相信解說了。直接為大家帶來源代碼。用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="images/tb01.png" /></b><span>關于我們
</span></a></li><li><a href="/" ><b><img src="images/tb02.png" /></b><span>新聞中心
</span></a></li><li><a href="/" ><b><img src="images/tb03.png" /></b><span>產品展示
</span></a></li><li><a href="/" ><b><img src="images/tb04.png" /></b><span>成功案例
</span></a></li><li><a href="/" ><b><img src="images/tb05.png" /></b><span>下載中心
</span></a></li><li><a href="/" ><b><img src="images/tb06.png" /></b><span>團隊介紹
</span></a></li><li><a href="/" ><b><img src="images/tb06.png" /></b><span>人才招聘
</span></a></li><li><a href="/" ><b><img src="images/tb07.png" /></b><span>聯系我們
</span></a></li><li><a href="/" ><b><img src="images/tb08.png" /></b><span>在線留言
</span></a></li> </ul>如有疑問,請加QQ群：135430763共同學習！
-->
</body> </html> 窄屏執行效果例如以下：
寬屏執行效果例如以下：
歡迎大家關注我的博客！
如有疑問,請加QQ群：135430763共同學習！
版權聲明：本文博主原創文章。博客，未經同意不得轉載。
總結
以上是生活随笔為你收集整理的Html5响应式设计与实现广场的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
