黑马书城项目实战

先放效果图

一、HTML代码

    
    
    


    

        
    
    

        

            
热销教材
        
        

            

                
            
            


                

                    ￥36.00[已售7件]
                    
                
            
        
        

            

                
            
            

                

                    ￥36.00[已售7件]
                    
                
            
        
        

            

                
            
            

                

                    ￥36.00[已售7件]
                    
                
            
        
        

            

                
            
            

                

                    ￥36.00[已售7件]
                    
                
            
        
    
    

        

            
热销教材
        
        

            

                
            
            

                

                    ￥36.00[已售7件]
                    
                
            
        
        

            

                
            
            

                

                    ￥36.00[已售7件]
                    
                
            
        
        

            

                
            
            

                

                    ￥36.00[已售7件]
                    
                
            
        
        

            

                
            
            

                

                    ￥36.00[已售7件]
                    
                
            
        
    

二、CSS代码

body{
    margin: 0;
    padding: 0;
    background-color: #F7F7F7;
}

header{
    width: 1250px;
    height: 400px;
    margin: 10px auto;
    padding-left: 20px;
}
.items{
    width: 1250px;
    height: 300px;
    margin: 10px auto;
    padding-left: 20px;
}
.item{
    width: 230px;
    height: 300px;
    float: left;
    margin-right: 20px;
    background-color: #FFF;
    /*添加阴影*/
    box-shadow: #41a8ff 0px 5px 5px;
    /*线性渐变*/
    background-image: linear-gradient(to bottom,#58ACFA,#A9D0F5,white);
    position: relative;
    overflow: hidden;
    transition: all 0.5s;/*表示所有属性的改变都在0.5秒内完成*/
}
.p{
    color: #F7F7F7;
    text-align: center;
    font-family: 幼圆, serif;
    font-size: 40px;
    margin-top: 50px;
}
.content>a>img{
    width: 230px;
    height: 300px;
}
/*突出图书块*/
.item:hover{
    top: -5px;
    box-shadow: 0 0 15px #AAA;
}
.item:hover .desc{/*hover和.desc之间必须加一个空格，否则无效*/
     bottom: 0px;
     transition: bottom 0.5s;/*表示bottom属性的改变在0.5秒内完成*/
 }
.desc{
    position: absolute;
    display: block;
    bottom: -100px;
    width: 230px;
    height: 80px;
    background-image: linear-gradient(to bottom,#58ACFA,#A9D0F5,white);
    /*如果删掉details需要使用下面的代码*/
    /*text-align: center;*/
    /*padding-top: 20px;*/
    /*box-sizing: border-box;*/
}
.details{
    position: absolute;
    bottom: 27px;
    left: 40px;
}
/*设置价格为红色*/
.details i{
    color: #e15016;
}

有个需要注意的地方是：每一个item里面需要设置三个盒子，一个用来放图片，一个用来设置鼠标放上去会浮动出来的浅色方框，第三个盒子用来放价格、数量和联系卖家的QQ图标，并分别设置绝对定位。其实两个盒子也可以做到，第二个和第三个盒子可以去掉其中一个。例如：

把details去掉如下：

  

      ￥36.00[已售7件]
      
  

然后在.desc里面加入如下样式

  text-align: center;
  padding-top: 20px;
  box-sizing: border-box;

也可以实现这样的效果

但是，还是建议用三个盒子，这样会比较规范、不易出错，而且可操作性强。