详细介绍Html5响应式设计实现九宫格的示例代码(图)


本文摘自PHP中文网,作者黄舟,侵删。


自从响应式设计的理念提出以来,越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如:小米商城,天猫等。
至于响应式设计的概念等大家可以去百度百度,我这里就不相信讲解了。直接为大家带来源码,用Html5实现响应式的九宫格。代码如下:

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

<!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>

窄屏运行效果如下:

阅读剩余部分

相关阅读 >>

HTML5新表单元素的图文实例

h5移动端页面点击input重复弹出键盘的实现方法

canvas波浪效果的实现代码

h5和c3怎样做出太阳系行星运转的动画效果

如何使用HTML5 shiv解决ie不兼容HTML5标签的方法

HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解

基于 HTML5 canvas 的 3d 渲染引擎界面以及吸附等效果的运用

h5实现qq聊天气泡的实例介绍

HTML5 web worker的介绍(附示例)

h5移动端各种各样的列表的制作方法(二)

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...