九宫格起始页案例开发

0x01 布局总览

九宫格起始页布局总览图

0x02 代码开发

html布局代码

<div class="box">
        <ul>
            <li>
                <img src="img/SEO.jpg" width="300px" height="160px" />
            </li>
            <li>
                <img src="img/JAVA.jpg" width="300px" height="160px" />
            </li>
            <li>
                <img src="img/WEB.jpg" width="300px" height="160px" />
            </li>
            <li>
                <img src="img/JAVA.jpg" width="300px" height="160px" />
            </li>
            <li>
                <img src="img/WEB.jpg" width="300px" height="160px" />
            </li>
            <li>
                <img src="img/SEO.jpg" width="300px" height="160px" />
            </li>
            <li>
                <img src="img/WEB.jpg" width="300px" height="160px" />
            </li>
            <li>
                <img src="img/SEO.jpg" width="300px" height="160px" />
            </li>
            <li>
                <img src="img/JAVA.jpg" width="300px" height="160px" />
                <img class="left" src="img/jl.jpg" width="300px" height="160px" />
                <img class="top" src="img/jt.jpg" width="300px" height="160px" />
                <p>java面向对象高级编程培训</p>
            </li>
        </ul>
    </div>

** CSS样式代码**

        *{margin: 0px;padding: 0;}
        body{
            background: url('img/bg.jpg');
            background-size: 100% 100%;
        }
        .box{
            width: 930px;
            margin:100px auto;
            background-color: green;
        }
        .box ul{
            list-style:none;
            display: flex;
            flex-wrap: wrap;
            /*justify-content: space-around;
            align-items: center;*/
            height: 500px; 
            background-color: pink;
            
            
        }
        .box ul li{
            width: 300px;
            height:160px;
            margin:auto;
            background-color: yellow;
            position: relative;

        }
        .box ul li p{
            position: absolute;
            width: 300px;
            height: 160px;
            background-color: rgba(0,0,0,0.5);
            font:20px/160px "";
            text-align: center;
            color:#fff;
            opacity: 0;
        }
        .box ul li img{
            position: absolute;
            left: 0;top:0;
            transition: .5s;
        }
        .box ul li img.left,.box ul li img.top{
            opacity: 0;

        }
        .box ul li:hover img.left{
            left:-310px;
            opacity: 1;
        }
        .box ul li:hover img.top{
            top:-167px;
            opacity: 1;

        }
        .box ul li:hover p{
            opacity: 1;
        }

0x03 效果图

九宫格起始页案例开发效果图1

九宫格起始页案例开发效果图2