Html5响应式设计实现九宫格,Html5响应式设计实现九宫格,html5响应九宫格

Html5响应式设计实现九宫格,html5响应九宫格

自从响应式设计的理念提出以来,越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如:小米商城,天猫等。

至于响应式设计的概念等大家可以去百度百度,我这里就不相信讲解了。直接为大家带来源码,用Html5实现响应式的九宫格。代码如下:

html5响应式九宫格

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}

窄屏运行效果如下:

56557647_1

宽屏运行效果如下:

56557647_2

欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值