这样的样式大家应该在很多网站都见到过,要实现这样的效果,我们首先先来分析下:
(1)大体的思路:用ul>li*10——每个li左浮动——外边距调 (这个应该很easy)先把每个li的位置调好
(2)然后是设置每个li,一个li会了,之后的几个都一样。一个li分为三部分,如下:
第一部分(上):类pic——放图片;
第二部分(中):类pic-title——放Think PHP 5.0 博客系统实战项目演练
第三部分(下):p——放 ”高级 • 1125人在学习“ 由于“高级”要设置颜色,对其单独设置span。
html:
<li>
<div class="pic">
<img src="image/图层-133.png" alt="">
</div>
<div class="pic-title">
Think PHP 5.0 博客系统实战项目演练
</div>
<p>
<span>高级</span> • 1125人在学习
</p>
</li> (有10个,为方便起见这里简写,只写一个)
css:
.product .pro-bd li { width: 228px; height: 270px; background-color: white; float: left; margin-right: 15px; margin-bottom: 15px; overflow: hidden; transition: all 0.4s; } .product .pro-bd li:hover { box-shadow: 2px 2px 10px rgba(0,0,0,.4); transform: translate(-5px); //点击整个li的效果,盒子阴影+向上滑动5px,这里用translate是鼠标点击时,盒子本身不会动,整个部分层叠式地向上移动5px;反之,用margin-top,盒子本身会动,向上移动5px } .product .pro-bd li:nth-child(5){ margin-right: 0; } .product .pro-bd li:nth-child(10){ margin-right: 0; } .pro-bd img { transition: all .4s; } .pro-bd img:hover { margin-left: -5px; } .pro-bd .pic-title { width: 185px; margin: 20px auto; color: #050505; font-size: 14px; } .pro-bd p { width: 185px; margin: 10px auto; color: #999; font-size: 12px; } .pro-bd span { color: orange; }