html5九宫格布局

Posted 2021-07-15 绿叶清风

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5九宫格布局相关的知识，希望对你有一定的参考价值。

要点：
- 用百分比指定li的宽度，如：30%
- li左浮动

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

</html>

以上是关于html5九宫格布局的主要内容，如果未能解决你的问题，请参考以下文章