CSS3 Flex布局 练手作业

   * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        body,
        a {
            color: #666;
            text-decoration: none;
            font-size: 12px;
        }

        /* 头部 */
        header {
            display: flex;
            justify-content: space-around;
        }

        .headRight {
            display: flex;
            align-items: center;
        }

        .headRight a {
            margin: 10px;
        }

        .headRight a:hover {
            color: orange;
        }

        /* 主体 */
        .wrap {
            background-color: skyblue;
            display: flex;
            justify-content: center;
            padding: 10px;
        }

        .mian {
            background-color: #fff;
            width: 90%;
            display: flex;
        }

        /* 左边 */
        .mianLeft {
            flex: 0.2;
            text-align: center;
            background-color: #eee;
            padding: 30px 0px;
        }

        .mianLeft>li a {
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

        .mianLeft>li a:hover {
            background-color: #FF4500;
            color: #fff;
        }

        /* 右边 */
        .mianRight {
            flex: 0.8;
        }

        .mianRight h2 {
            font-size: 25px;
            margin: 20px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 20px;
            font-weight: 500;
        }

        .mianRight ul {
            display: flex;
            flex-wrap: wrap;
            margin: 20px 30px 0px 30px;
        }

        .picList img {
            border: 1px solid #eee;
            margin: 5px 5px 20px 5px;
        }

        /* 底部 */
        footer {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 30px;
        }

        footer ul {
            display: flex;
            justify-content: space-between;
            width: 50%;
        }

        footer p {
            margin-top: 5px;
        }

    
    

        

            
        
        

            登录
            注册
        
    
    
    

        

            

                
公司介绍
                
新闻动态
                
联系我们
                
招才纳士
                
用户协议
                
常见问题
                
合作伙伴
                
友情链接
                
网站地图
                
付费协议
                
使用说明
            
            

                
友情链接
                

                    

                    

                    

                    

                    

                    

                    

                    

                    

                
            
        
    
    
    

        

            
公司介绍
            
新闻动态
            
联系我们
            
招商加盟
            
招商用户
            
协议合作伙伴
            
常见问题App
            
下载网站地图
        
        
深圳云飞渡网络科技有限公司 版权所有 京ICP备13047874号
        
Coppyright © 2018 iVmall All Rights Reserved