先放效果图

一、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马书城项目实战</title>
    <link rel="stylesheet" href="css/bookstore.css" type="text/css">
</head>
<body>
    <header>
        <img src="images/tou.png" alt="">
    </header>
    <div class="items">
        <div class="item">
            <div class="p">热销教材</div>
        </div>
        <div class="item">
            <div class="content">
                <a href="#"><img src="images/1.png" alt="C语言开发入门教程" title="C语言开发入门教程"></a>
            </div>
            <div class="desc">
<!--                可以选择删掉details-->
                <div class="details">
                    <i>￥36.00</i>[已售7件]
                    <a href="#"><img border="0" src="images/qq.gif" alt="联系卖家" title="联系卖家"></a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="content">
                <a href="#"><img src="images/3.png" alt="C++程序设计教程" title="C++程序设计教程"></a>
            </div>
            <div class="desc">
                <div class="details">
                    <i>￥36.00</i>[已售7件]
                    <a href="#"><img border="0" src="images/qq.gif" alt="联系卖家" title="联系卖家"></a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="content">
                <a href="#"><img src="images/4.png" alt="Java基础入门" title="Java基础入门"></a>
            </div>
            <div class="desc">
                <div class="details">
                    <i>￥36.00</i>[已售7件]
                    <a href="#"><img border="0" src="images/qq.gif" alt="联系卖家" title="联系卖家"></a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="content">
                <a href="#"><img src="images/5.png" alt="Android移动应用基础教程" title="Android移动应用基础教程"></a>
            </div>
            <div class="desc">
                <div class="details">
                    <i>￥36.00</i>[已售7件]
                    <a href="#"><img border="0" src="images/qq.gif" alt="联系卖家" title="联系卖家"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="items">
        <div class="item">
            <div class="p">热销教材</div>
        </div>
        <div class="item">
            <div class="content">
                <a href="#"><img src="images/6.png" alt="网页设计与制作(HTML+CSS)" title="网页设计与制作(HTML+CSS)"></a>
            </div>
            <div class="desc">
                <div class="details">
                    <i>￥36.00</i>[已售7件]
                    <a href="#"><img border="0" src="images/qq.gif" alt="联系卖家" title="联系卖家"></a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="content">
                <a href="#"><img src="images/7.png" alt="Android项目实战——手机安全卫士" title="Android项目实战——手机安全卫士"></a>
            </div>
            <div class="desc">
                <div class="details">
                    <i>￥36.00</i>[已售7件]
                    <a href="#"><img border="0" src="images/qq.gif" alt="联系卖家" title="联系卖家"></a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="content">
                <a href="#"><img src="images/8.png" alt="IOS开发项目化入门教程" title="IOS开发项目化入门教程"></a>
            </div>
            <div class="desc">
                <div class="details">
                    <i>￥36.00</i>[已售7件]
                    <a href="#"><img border="0" src="images/qq.gif" alt="联系卖家" title="联系卖家"></a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="content">
                <a href="#"><img src="images/9.png" alt="PHP网站开发实例教程" title="PHP网站开发实例教程"></a>
            </div>
            <div class="desc">
                <div class="details">
                    <i>￥36.00</i>[已售7件]
                    <a href="#"><img border="0" src="images/qq.gif" alt="联系卖家" title="联系卖家"></a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

二、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去掉如下：

  <div class="desc">
      <i>￥36.00</i>[已售7件]
      <a href="#"><img border="0" src="images/qq.gif" alt="联系卖家" title="联系卖家"></a>
  </div>

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

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

也可以实现这样的效果

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