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

 <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共同學習！ --&gt body> html>

	
	
		1
	

	
		2
	

	
		3
	

	
		4
	

	
		5
	

	
		6
	

	
		7
	

	
		8
	

	
		9
	

	
		10
	

	
		11
	

	
		12
	

	
		13
	

	
		14
	

	
		15
	

	
		16
	

	
		17
	

	
		18
	

	
		19
	

	
		20
	

	
		21
	

	
		22
	

	
		23
	

	
		24
	

	
		25
	

	
		26
	

	
		27
	

	
		28
	

	
		29
	

	
		30
	

	
		31
	

	
		32
	

	
		33
	

	
		34
	

	
		35
	

	
		36
	

	
		37
	

	
		38
	

	
		39
	

	
		40
	

	
		41
	

	
		42
	

	
		43
	

	
		44
	

	
		45
	

	
		46
	

	
		47
	

	
		48
	

	
		49
	

	
		50
	

	
		51
	

	
		52
	

	
		53
	

	
		54
	

	
		55
	

	
		56
	

	
		57
	

	
		58
	

	
		59
	

	
		60
	

	
		61
	

	
		62
	

	
		63
	

	
		64
	

	
		65
	

	
		66

窄屏執行效果如下：這裡寫圖片描述
寬屏執行效果如下：

Html5響應式設計實現九宮格

相關文章