九宫格起始页案例开发

0x01 布局总览

---

九宫格起始页布局总览图

0x02 代码开发

---

html布局代码

        

            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

                
                
                
                
java面向对象高级编程培训
            
        
    

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