第4天

样式图片

XA5PBD@8S}X)5`Q0T@RHO(P.png

分析：

                

                    
                    ×
                
                

                    
                    ×
                
                

                    
                    ×
                
                

                    
                    ×
                
                

                    
                    ×
                
                

                    
                    ×
                
                

                    
                    ×
                
                

                    
                    ×
                
                

                    
                    

                
            

ul对应的样式：

    margin: 0;
    padding: 0;
    list-style: none;
    display: block;

ul下面对应的li样式

   width: 33.3333333%;
    float: left;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    position: relative;

接着看li下面包含的图片以及右上角的删除按钮

图片的显示样式
    width: 100%;
    max-width: 100%;
    max-height: 58px;

删除的样式显示
    position: absolute;
    right: -3px;
    top: -3px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-weight: bold;

最后看添加图片这块，他的html结构是这样的

              

                    
                    

                
  input的样式
    display: inline-block;
    width: 100%;
    height: 58px;
    opacity: 0;//即透明化
    position: absolute;
    z-index: 1;
    cursor: pointer;

div的样式
    display: inline-block;
    width: 100%;
    height: 58px;
    border: 1px dashed #868686;
    box-sizing: border-box;
    background: url(../images/zpu.png) no-repeat center;
    background-size: 30px auto;