学成在线-（精美产品部分）

一.编辑版心。整体分为（pro-hd,pro-bd,)
1.html部分（首先设计一个大盒子，分为上下两部分，其中下面部分创建一个有序列表ul，ul里面包括很多li，li里面再创建一个两个盒子（一个放照片，下面方文字，在下卖面还有p）。
html代码部分。

<!-- 精品产品 -->
     <div class="products w">
     	 <div class="pro-hd">
     	 	 <h4>精品推荐</h4>
     	 	 <a href="#">查看全部</a>
     	 </div>
     	 <div class="pro-bd clearfix">
     	 	<ul>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="images/pic1.png" >
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="images/pic1.png" >
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="images/pic1.png" >
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="images/pic1.png" >
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="images/pic1.png" >
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="images/pic1.png" >
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="images/pic1.png" >
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="images/pic1.png" >
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="images/pic1.png" >
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		<li>
     	 			<div class="pic">
     	 				<img src="images/pic1.png" >
     	 			</div>
     	 			<div class="pro-title">
     	 				Think PHP 5.0 博客系统实战项目演练  
     	 			</div>
     	 			<p>
     	 				<span>高级</span>  •  1125人在学习
     	 			</p>
     	 		</li>
     	 		
     	 	</ul>
     	 </div>
     </div>

2.css部分（将ul分为12个li之后，利用将12个盒子都弄左边外边距，下外边距，但是由于在外面不应该弄外边距，这样会导致盒子掉下来）。用一下方法解决。
.pro-bd li:nth-child(5n) {
margin-right: 0;/让他的对五个孩子没有外边距，防止掉下来/
}
css代码如下：
.

products {
	margin-top: 30px;
}
.pro-hd {
	height: 40px;
	position: relative;
}
.pro-hd h4 {
	font-weight: normal;
	font-size: 18px;
}
.pro-hd a {
	position: absolute;
	top: 0;
	right: 20px;
}
.pro-bd li {
	width: 228px;
	height: 270px;
	overflow: hidden;/*将多出来的盒子隐藏掉*/
	background-color: #fff;
	float: left;
	margin-right: 15px;/*让ul这个大盒子分开，分成12个小块*/
	margin-bottom: 15px;
	transition: all 0.4s;
}
.pro-bd li:hover {
	box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
	transform: translateY(-10px);/*向上过渡*/
}
.pro-bd li:nth-child(5n) {
	margin-right: 0;/*让他的对五个孩子没有外边距，防止掉下来*/
}
.pic img {
	transition: all 0.4s;/*显示过渡效果*/
}
.pic img:hover {
	margin-left: -5px;
}
.pro-title {
	width: 185px;
	margin: 20px auto;
	font-size: 14px;
	color: #050505;
}
.pro-bd p {
	width: 185px;
	margin: 20px auto;
	color: #999;
}
.pro-bd p span {
	color: #ff7c2d;
}

效果图如下：

整体效果图如下；