黑马书城项目实战
先放效果图
一、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;也可以实现这样的效果
但是，还是建议用三个盒子，这样会比较规范、不易出错，而且可操作性强。
美团公司福利 1402人发布
