<div class="main">
        <div class="news">
            <div class="title">
                <h2 class="title-left">新闻中心</h2><span class="title-right"><a href="news.html">More&gt;&gt;</a></span>
            </div><!--title结束-->
            <div class="pic-news">
                <img src="image/news.jpg"/>520<h2>慕女神喊你来表白！</h2><p>活动时间5月20日-5月25日<br/>获奖公布时间：5月26日<br/>learn More>>
                </p>
            </div><!--pic-news结束-->
            <div class="news-list">
                <ul>
                <li><a href="news.html">【慕课访谈&nbsp;用户篇】</a>”有位屌丝“在路上<span>2014-06-01</span></li>
                <li><a href="news.html">【有奖活动】</a>给父亲的三行书信<span>2014-06-01</span></li>
                <li><a href="news.html">【程序猿，请晒出你的童年】</a>活动获奖公告<span>2014-05-30</span></li>
                <li><a href="news.html">【慕课访谈】</a>破茧成蝶——美女程序猿的蜕变史<span>2014-05-28</span></li>
                </ul>
             </div><!--news-list结束-->
        </div><!--news结束-->

.main{height:250px; background-color:#FFF; margin-top:5px;}
.news{width:340px; border:1px solid #E8E8E8;}
.course{width:410px; border:1px solid #E8E8E8;margin:0 7px;}
.sidebar{width:230px;}
.news,.course,.sidebar{height:250px; float:left;}
.title{height:28px; border:2px solid #E8E8E8;}
.title-left{width:70%; font-family:"微软雅黑"; font-size:14px; font-weight:bold; color:#786F66; float:left; line-height:28px; padding-left:20px;}
.title-right{width:20%; float:right; line-height:28px;}
.title-right a{text-decoration:none; color:#999999;}