前端 九宫格学习

2023年1月10日 187次阅读 来源: 九宫格问题

1.第一种方式（float布局），参照大佬代码，重点元素我已标注

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
</head>

<style type="text/css">
    html, body { font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif; margin:0; padding: 0; text-decoration: none; }
    ul { list-style: none outside none; margin:0; padding: 0; }
    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>
<body class="layui-layout-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>
<script th:src="@{/product/jquery/jquery-3.3.1.min.js}"></script>

2.第二种方式（border-box布局）

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
</head>

<style type="text/css">
    a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box; /* Firefox */
        -webkit-box-sizing: border-box; /* Safari */
    }
    ul {
        text-decoration: none;
        list-style-type: none;
    }
    .video_list > li {
        float: left;
        width: 24%;
        text-align: center;
        border: 1px solid #ccc;
        padding-top: 22%;
        margin-left: 7%;
        margin-bottom: 7%;
        position: relative;
    }
</style>
<body>
<ul class="video_list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
</body>
</html>
<script th:src="@{/product/jquery/jquery-3.3.1.min.js}"></script>
    原文作者：九宫格问题
    原文地址: https://blog.csdn.net/ainuser/article/details/88736586
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞