网站建设佰金手指科杰二五,crm管理系统,网站排名优化推广公司,西宁建设工程信息网站由于提出的想法响应式设计#xff0c;越来越多的网站使用这样的思想。各类大型网站如雨后春笋般涌了出来。例如#xff1a;小米商城。天猫等。 至于响应式设计的概念等大家能够去百度百度#xff0c;我这里就不相信解说了。直接为大家带来源代码。用Html5实现响应式的九宫格… 由于提出的想法响应式设计越来越多的网站使用这样的思想。各类大型网站如雨后春笋般涌了出来。例如小米商城。天猫等。 至于响应式设计的概念等大家能够去百度百度我这里就不相信解说了。直接为大家带来源代码。用Html5实现响应式的九宫格。代码例如以下 !DOCTYPE html
html
head
titlehtml5响应式九宫格/title
meta http-equivContent-Type contenttext/html; charsetUTF-8
meta nameviewport contentwidthdevice-width,heightdevice-height,inital-scale1.0,maximum-scale1.0,user-scalableno; /
meta nameapple-mobile-web-app-capable contentyes /
meta nameapple-mobile-web-app-status-bar-style contentblack /
meta nameformat-detection contenttelephoneno /
meta charsetutf-8 /
style typetext/csshtml, 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(8n1) {background-color:#36A1DB}body .mainmenu li:nth-child(8n2) {background-color:#678ce1}body .mainmenu li:nth-child(8n3) {background-color:#8c67df}body .mainmenu li:nth-child(8n4) {background-color:#84d018}body .mainmenu li:nth-child(8n5) {background-color:#14c760}body .mainmenu li:nth-child(8n6) {background-color:#f3b613}body .mainmenu li:nth-child(8n7) {background-color:#ff8a4a}body .mainmenu li:nth-child(8n8) {background-color:#fc5366}
/style
/headbodyul classmainmenulia href/ bimg srcimages/tb01.png //bspan关于我们/span/a/lilia href/ bimg srcimages/tb02.png //bspan新闻中心/span/a/lilia href/ bimg srcimages/tb03.png //bspan产品展示/span/a/lilia href/ bimg srcimages/tb04.png //bspan成功案例/span/a/lilia href/ bimg srcimages/tb05.png //bspan下载中心/span/a/lilia href/ bimg srcimages/tb06.png //bspan团队介绍/span/a/lilia href/ bimg srcimages/tb06.png //bspan人才招聘/span/a/lilia href/ bimg srcimages/tb07.png //bspan联系我们/span/a/lilia href/ bimg srcimages/tb08.png //bspan在线留言/span/a/li /ul!-- 欢迎大家关注我的博客如有疑问,请加QQ群135430763共同学习 -- /body /html 窄屏执行效果例如以下 宽屏执行效果例如以下 欢迎大家关注我的博客如有疑问,请加QQ群135430763共同学习 版权声明本文博主原创文章。博客未经同意不得转载。
