学成在线-（精美推荐部分）

一·其中都有版心，分为两部分（左边部分和右边部分）
1.html部分

<!-- 精品推荐 -->
    <div class="recommend w">
    		<div class="rec-l">
    			<strong>精品推荐</strong>|
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    			<a href="#">jQuery</a> | 
    		</div>
    		<em>修改兴趣</em>
    </div>

2,。css写的顺序（recommed,左边盒子部分，左边内容部分，左边内容超链接部分，右边部分）
注意点：定位（子绝父相），外边距
css代码部分

.recommend {
	margin-top: 10px;
	background-color: #fff;
	height: 60px;
	line-height: 60px;
	position: relative;/*子绝父相部分*/
	box-shadow: 0px 1px 12px rgba(0, 0, 0, .4);/*盒子阴影部分*/
}
.rec-l {
	padding-left: 30px;
}
.rec-l strong {
	color: #22b0ff;
	font-size: 14px;
	margin-right: 15px;
}

.rec-l a {
	margin: 0 15px;
	font-size: 14px;
}

.recommend em {
	position: absolute;
	right: 20px;
	bottom: 0;
}