web前端群，189394454，有视频、源码、学习方法等大量干货分享
效果知识点: 企业布局思维的巧妙运用, DIV加CSS，css样式拆解与归类，css3过度与阴影，定位与动，常用如何搭配，开发标准。
👇html代码：
<div class="wrap">
<div class="left">
<a href="#">
<img src="images/left.jpg" alt="">
</a>
</div>
<div class="right">
<ul>
<li>
<a class="img" href="#"><img src="images/1.jpg" alt=""></a>
<a class="title" href="#">小米路由器3.0</a>
<span class="dec">四天线设计，更快更强</span>
<span class="price">149元</span>
<p class="tip exemption">免邮费</p>
<div class="comments">
<a href="#">
<span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
</a>
</div>
</li>
<li>
<a class="img" href="#"><img src="images/2.jpg" alt=""></a>
<a class="title" href="#">小米手环</a>
<span class="dec">OLED 显示屏幕，升级计步算法</span>
<span class="price">149元</span>
<p class="tip donation">有赠品</p>
<div class="comments">
<a href="#">
<span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
</a>
</div>
</li>
<li>
<a class="img" href="#"><img src="images/3.jpg" alt=""></a>
<a class="title" href="#">小米净水器（厨上式）</a>
<span class="dec">限量送 TDS 检测笔</span>
<span class="price">1299元</span>
<p class="tip exemption">免邮费</p>
<div class="comments">
<a href="#">
<span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
</a>
</div>
</li>
<li>
<a class="img" href="#"><img src="images/4.jpg" alt=""></a>
<a class="title" href="#">小米路由器3.0</a>
<span class="dec">四天线设计，更快更强</span>
<span class="price">149元</span>
<p class="tip exemption">免邮费</p>
<div class="comments">
<a href="#">
<span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
</a>
</div>
</li>
<li>
<a class="img" href="#"><img src="images/5.jpg" alt=""></a>
<a class="title" href="#">小米路由器3.0</a>
<span class="dec">四天线设计，更快更强</span>
<span class="price">149元</span>
<p class="tip new_product">新品</p>
<div class="comments">
<a href="#">
<span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
</a>
</div>
</li>
<li>
<a class="img" href="#"><img src="images/6.jpg" alt=""></a>
<a class="title" href="#">九号平衡车</a>
<span class="dec">年轻人的酷玩具，骑行遥控两种玩法</span>
<span class="price">1999元</span>
<p class="tip exemption">免邮费</p>
<div class="comments">
<a href="#">
<span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
</a>
</div>
</li>
<li>
<a class="img" href="#"><img src="images/7.jpg" alt=""></a>
<a class="title" href="#">小米路由器3.0</a>
<span class="dec">四天线设计，更快更强</span>
<span class="price">149元</span>
<p class="tip donation">有赠品</p>
<div class="comments">
<a href="#">
<span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
</a>
</div>
</li>
<li>
<a class="img" href="#"><img src="images/8.jpg" alt=""></a>
<a class="title" href="#">小米路由器3.0</a>
<span class="dec">四天线设计，更快更强</span>
<span class="price">149元</span>
<p class="tip new_product">新品</p>
<div class="comments">
<a href="#">
<span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
</a>
</div>
</li>
</ul>
</div>
</div>
👇css代码：
<style type='text/css'>
* { margin: 0; padding: 0; }
li { list-style: none }
a { text-decoration: none; color: #434343; }
.new_product { background-color: #31d747; letter-spacing: 5px; }
.exemption { background-color: #ffac37; }
.donation { background-color: #5fb0ff; }
body { background-color: #f5f5f5 }
.wrap { width: 1226px; height: 614px; margin: 100px auto; padding: 10px; box-shadow: 0 0 8px #222222; }
.wrap .left { width: 234px; height: 100%; float: left; }
.wrap .right { width: 992px; height: 100%; float: right; }
.wrap .right ul li { position: relative; top: 0;overflow:hidden; width: 234px; height: 300px; float: left; margin: 0 0 14px 14px; background-color: #ffffff;transition:0.3s; }
.wrap .right ul li:hover{top:-5px;box-shadow:0 10px 10px #bbb;}
.wrap .right ul li a,.wrap .right ul li span{ display:block;text-align: center;font-size:12px;}
.wrap .right ul li a.img { display: block; width: 160px; height: 160px; margin: 0 auto; padding-top: 20px; }
.wrap .right ul li a.img img { width: 100%; height: 100%; display: block; }
.wrap .right ul li a.title { font-size: 14px; color: #333333; }
.wrap .right ul li span.dec { margin-top: 6px; color: #bbbbbb; }
.wrap .right ul li span.price { margin-top: 15px; color: #ff6600; }
.wrap .right ul li p.tip { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 65px; height: 20px; color: #ffffff; text-align: center; font-size: 12px; line-height: 20px; }
.wrap .right ul li div.comments{ position: absolute;bottom:-75px; width: 170px; height: 75px; padding:0 32px; background-color: #f60;transition:0.3s}
.wrap .right ul li div.comments span{ margin-top:10px; height: 30px;text-align:left;line-height:15px;text-indent:1.8em; color:#fff;}
.wrap .right ul li:hover div.comments{bottom:0;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
网友评论