zoukankan      html  css  js  c++  java
  • html : 九宫格(响应式)

    talk is cheap, show you the code :

    <!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%;
             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;
             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>
    </body>
    </html>
    

     

  • 相关阅读:
    Meten Special Activities II
    Meten Special Activities II
    Meten Special Activities II
    Meten Special Activities II
    Meten Special Activities
    Meten Special Activities
    Meten Special Activities
    Meten Special Activities
    Meten Special Activities
    冒泡排序和选择排序
  • 原文地址:https://www.cnblogs.com/KeenLeung/p/6562101.html
Copyright © 2011-2022 走看看