HTML代碼：

<div class="list_main">

? <div class="list_left">

? <h2>新聞中心</h2>

? <div class="news_type_list">

? <ul>

? <li><a href="list.html">公司新聞</a></li>

? ?<li><a href="list.html">媒體報道</a></li>

? ? <li><a href="list.html">行業新聞</a></li>

? ? ?<li><a href="list.html">活動專題</a></li>

? ? ? <li><a href="list.html">精彩視頻</a></li>

? ? ? ?<li><a href="list.html">資源下載</a></li>

? ? ? ? <li><a href="list.html">公司內刊</a></li>

? </ul>

? </div>

? </div><!--list_left結束-->

<div class="list_right">

<h1 class="newsTitle">慕課網獲App Store強力推薦榮登四榜單</h1>

? ? ? ? <p class="newsInfo">發布人：Admin 發布時間：2014-08-01 瀏覽：5321次</p>

? ? ? ? <div class="newsContent">

? ? ? ? <p> 8月伊始，慕課網App即獲得了App Store的多個推薦，同時出現在“免費App精選”、“致畢業生”、“學而不倦”以及“輕松學編程”四個榜單中。這款IT編程學習類的App為何如此備受青睞？趣味視頻課程、高清畫面質感、在線離線隨身學習……優質的課程內容結合良好的用戶體驗，慕課網App無疑是IT學習的最佳選擇。</p>

? ? ? ? <p> App Store力薦慕課網榮登四榜單</p>

? ? ? ? <p>App Store因公平著稱，能被其推薦是每一款App夢寐以求的榮譽，慕課網則一舉占據了其四個榜單，包括精品推薦首頁“合集”版塊下“免費App精選”中的“新品”推薦、“合集”版塊“致畢業生”中“學無止境”推薦、教育類別“合集”版塊下“學而不倦”中的推薦以及“輕松學編程”版塊推薦。</p>

? ? ? ? <p><img src="images/news1.jpg" width="500" height="420" alt=""/></p>

? ? ? ? <p>事實上，慕課網登上App Store榜單并非首次。早在2014年5月，慕課網就榮登App Store 精品推薦榜首，同時登上“教育”類別下“優秀新App”榜首，并獲評“五月最佳”精彩App。隨后，慕課網App接連出現在“致畢業生”、“免費App精選”、“夏日學堂”等榜單中。</p>

? ? ? ? <p>從App Store的持續推薦以及“優秀”、“精選”的肯定中不難看出，慕課網在IT在線學習領域以及教育類App中得到了用戶的認可。</p>

? ? ? ? <p>新功能上線持續提升用戶體驗一款好的產品同樣需要不斷改進來滿足用戶需求。慕課網App上線至今進行了多個版本的迭代，不斷完善產品、提升用戶體驗，ios最新的2.1.0版本于7月20日更新，上線了大量新功能。</p>

? ? ? ? <p>明確、清晰的課程分類能夠讓用戶迅速找到感興趣的課程，本次慕課網就上線了全新的課程分類方式，點擊“全部課程”即可顯示出全部的技術語言種類以及視頻課程數量，全部在線課程一目了然。</p>

? ? ? ? <p>不知道講師在哪里？此版本更新中添加了講師認證，不僅對講師空間進行了認證，在課程討論和筆記中，通過認證標識，一眼可以看到哪個是講師回復。</p>

? ? ? ? <p>此外，慕課網App在最新版本中調整了下拉刷新和上拉加載的效果；課程練習部分增加了習題解析；對半透化效果、全屏播放器按鈕進行了優化，并新增了編程課、ps課程。一系列的改進相信能為IT學習用戶帶來更好的學習體驗。</p>

? ? ? ? <p>慕課網App在精品視頻課程的基礎上，不斷優化用戶體驗，幫助IT學習者迅速入門、提升技能，以優秀的產品基因獲得App Store的多個推薦，使更多用戶有機會使用這款IT學習軟件，體驗學習的簡單和快捷。</p>

</div>

</div><!--list_right結束-->

</div><!--list_main結束-->

CSS代碼：

.list_main{min-height:350px;_height:350px;margin-top:10px;}

.list_left{width:220px;

? ? ? ? ? height:350px;

?

?float:left;border:1px solod #E8E8E8;}

.list_left h2{width:200px;height:35px;background:url(images/titile_bg.gif) repeat-x;font-family:"Microsoft YaHei UI";color:#666;font-size:14px;padding-left:20px;line-height:35px;}

.news_type_list li{list-style:none;height:30px;line-height:30px;/*text-align:center;*/}

.news_type_list a{text-decoration:none;color:#666;background:url(images/li_bg.gif) no-repeat center left;

? padding-left:15px;}

.news_type_list a:hover{background:url(images/li_bg2.gif) no-repeat center left;color:#009CDF;background-color:#F2F2F2;display:block;}

/*具體新聞內容樣式*/

.list_right{width:770px;

? ? ? ?min-height:350px;/*最低高度 在IE6不能使用*/

?_height:350px;/*只在IE6可用 只要內容大的時候，自動撐開盒子 只需要設置盒子的高度*/

?float:right;border:1px solod #E8E8E8;}

?.list_right h2{font-family:"Microsoft YaHei UI";height:35px;line-height:35px;font-size:14px;color:#666;background:url(images/titile_bg.gif) repeat-x;padding-left:20px;}

/*新聞詳細內容樣式*/

.newsTitle{font-size:20px;font-family:"Microsoft YaHei UI";text-align:center;padding:10px;}

.newsInfo{font-size:12px;border-bottom:1px solid #E8E8E8;color:#666;text-align:center;}

.newsContent{font-size:14px;line-height:25px;text-indent:2em;}

.newsContent img{margin:5px auto;display:block;}