好心人幫我檢查一下代碼！看看有沒有什么可以改進的，雖然完成了，但是感覺代碼寫的很爛！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕課網</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class="wrap">
? <div class="nav">
??? <div class="nav-left">
????? <img src="http://img1.sycdn.imooc.com//53edadad0001efe202000070.jpg"/>
??? </div><!--nav-left結束-->
??? <div class="nav-right">
????? <ul>
??????? <li><a href="#">首頁</a></li>
??????? <li><a href="#">產品特色</a></li>
??????? <li><a href="#">解決方案</a></li>
??????? <li><a href="#">產品價格</a></li>
??????? <li><a href="#">幫助中心</a></li>
??????? <li><a href="#">關于我們</a></li>
????? </ul>
??? </div><!--nav-right結束-->
? </div><!--nav結束-->
? <div class="banner">
??? <img src="http://img1.sycdn.imooc.com//53edad2c0001b61310000314.jpg"/>
? </div><!--banner結束-->
? <div class="scroll-news">
??? <div class="scroll-news-left"><a href="#">滾動新聞</a></div>
??? <div class="scroll-news-right"><a href="#">這是滾動新聞</a></div>
? </div><!--scroll-news結束-->
? <div class="pic">
??? <div class="pic-left">
????? <img src="http://img1.sycdn.imooc.com//53edad54000119fb03300130.jpg"/>
????? <div class="pic-left-title"><a href="#">玩轉BootStrap</a></div>
??? </div><!--pic-left結束-->
??? <div class="pic-mid">
????? <img src="http://img1.sycdn.imooc.com//53edad690001260a03300130.jpg"/>
????? <div class="pic-mid-title"><a href="#">企業網站實踐</a></div>
??? </div><!--pic-mid結束-->
??? <div class="pic-right">
????? <img src="http://img1.sycdn.imooc.com//53edad7a0001cde803300130.jpg"/>
????? <div class="pic-right-title"><a href="#">JavaScript基礎</a></div>
??? </div><!--pic-right結束-->
? </div><!--pic結束-->
? <div class="main">
??? <div class="news">
??????? <div class="news-title">
??????? <h2><a href="#">新聞中心</a></h2>
??????? </div><!--news-title結束-->
??????? <div class="news-content">
?????????? <div class="news-content-up">
??????????????? <div class="news-content-date"><p>8月23日</p></div>
??????????????? <div class="news-contents">
??????????????????? <h3><a href="#1">學習計劃之"Android攻城獅初養成"</a></h3>
??????????????????? <p><a href="#1">想成為Android攻城獅?想開發一款專屬App?沒有任何基礎的你,應該從何學起?</a></p>
??????????????? </div><!--news-contents-->
??????????? </div><!--news-content-up結束-->
???????????? <div class="news-content-mid">
??????????????? <div class="news-content-date"><p>8月23日</p></div>
??????????????? <div class="news-contents">
??????????????????? <h3><a href="#1">學習計劃之"Android攻城獅初養成"</a></h3>
??????????????????? <p><a href="#1">想成為Android攻城獅?想開發一款專屬App?沒有任何基礎的你,應該從何學起?</a></p>
??????????????? </div><!--news-contents-->
??????????? </div><!--news-content-mid結束-->
??????????? <div class="news-content-down">
??????????????? <div class="news-content-date"><p>8月23日</p></div>
??????????????? <div class="news-contents">
??????????????????? <h3><a href="#1">學習計劃之"Android攻城獅初養成"</a></h3>
??????????????????? <p><a href="#1">想成為Android攻城獅?想開發一款專屬App?沒有任何基礎的你,應該從何學起?</a></p>
??????????????? </div><!--news-contents-->
??????????? </div><!--news-content-down結束-->
??????? </div><!--news-content結束-->
??? </div><!--news結束-->
??? <div class="course">
????? <div class="course-title">
??????? <h2><a href="#">熱門活動</a></h2>
??????? </div><!--course-title結束-->
??????? <div class="course-pic">
????????? <img src="http://img1.sycdn.imooc.com//53edacdd0001b8e804820302.jpg"/>
??????? <p><a href="#">慕課網2048游戲源碼征集</a></p><p><a href="#">慕課網2048游戲源碼征集</a></p><p><a href="#">慕課網2048游戲源碼征集</a></p><p><a href="#">慕課網2048游戲源碼征集</a></p><p><a href="#">慕課網2048游戲源碼征集</a></p>
??????? </div>
??? </div>
??? <div class="sidebar">
????? <div class="sidebar-title">
??????? <h2><a href="#">聯系我們</a></h2>
??????? </div><!--sidebar-title結束-->
?????????? <div class="sidebar-content-up">
???????????? <ul>
????????????? <li>講師招募</li>
????????????? <li>鄒同學</li>
????????????? <li>電話：18911888956</li>
????????????? <li>QQ：576264119</li>
????????????? <li>E-mail:[email protected]</li>
???????????? </ul>
????????? </div>
????????? <div class="sidebar-content-down">
???????????? <ul>
????????????? <li>網站合作</li>
????????????? <li>呂同學</li>
????????????? <li>電話：13261771203</li>
????????????? <li>QQ：1059809142</li>
????????????? <li>E-mail:[email protected]</li>
???????????? </ul>
????? </div>???????????????????????????????????????????????????? ?
??? </div>
? </div><!--main結束-->
? <div class="copyright">
??? <p>Copyright ? 2015imooc.com All Rights Reserved 京ICP備 13046642號-2</p>
? </div>
</div><!--wrap結束-->
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;font-family:"微軟雅黑";text-decoration:none;}
body{background:#F5F5F5;}
.wrap{width:1000px;background:#FFF;margin:0 auto;}
.nav{width:100%;height:70px;}
.nav-left{width:200px;float:left;}
.nav-right{width:600px;float:left;font-size:18px;padding-left:10px;}
.nav-right li{list-style-type:none;float:left;width:100px;line-height:70px;text-align:center;}
.nav-right a{text-decoration:none;color:#000;width:100%;}
.nav-right a:hover{color:#333;background-color:#be3948;display:inline-block;}
.banner{width:100%;margin-top:10px;}
.scroll-news{width:100%;height:50px;margin:10px auto;font-size:18px;}
.scroll-news-left{width:150px;background-color:#be3948;}
.scroll-news-right{width:830px;background-color:#333;}
.scroll-news-left,.scroll-news-right{line-height:50px;float:left;padding-left:10px;}
.scroll-news-left li,.scroll-news-right li{list-style-type:none;text-align:center;}
.scroll-news-left a,.scroll-news-right a{color:#FFF;}
.scroll-news-left a:hover,.scroll-news-right a:hover{color:#A52A2A;}
.pic{width:100%;height:130px;text-align:center;margin:10px auto;}
.pic-left,.pic-mid,.pic-right{width:330px;float:left;}
.pic-mid,.pic-right{padding-left:5px;}
.pic-left-title,.pic-mid-title,.pic-right-title{font-size:18px;padding-top:5px;}
.pic-left a,.pic-mid a,.pic-right a{color:#000;}
.pic-left a:hover,.pic-mid a:hover,.pic-right a:hover{color:#333;}
.main{width:100%;height:350px;margin-top:40px;}
.news,.course,.sidebar{width:330px;height:350px;float:left;}
.news-title{width:100%;height:50px;font-size:14px;background-color:#be3948;}
.news-title h2,.course-title h2{padding-left:20px;line-height:50px;}
.news-title a,.course-title a{color:#FFF;}
.news-content-up,.news-content-mid,.news-content-down{width:100%;height:100px;border-bottom:1px dotted #333;}
.news-content-date{background-color:#be3948;width:60px;height:70px;border-radius:10px;margin-top:15px;}
.news-content-date p{margin:5px;margin-left:10px;font-size:20px;color:#fff;}
.news-contents{width:240px;padding-left:10px;font-size:12px;line-height:20px;}
.news-contents,.news-content-date{float:left;margin-left:10px;}
.news-contents h3{font-size:14px;font-family:"宋體";text-align:center;line-height:30px;}
.news-contents a,.course-pic a{color:#000;}
.news-contents a:hover,.course-pic a:hover{color:#333;}
.course-title{width:100%;height:50px;font-size:14px;background-color:#be3948;margin-left:5px;}
.course-pic{width:100%;height:300px;}
.course-pic img{height:150px;width:300px;margin:20px;}
.course-pic p{font-size:14px;height:20px;line-height:20px;margin-left:20px;}
.sidebar-title{width:100%;height:50px;font-size:14px;background-color:#be3948;margin-left:10px;}
.sidebar-title h2{padding-left:20px;line-height:50px;}
.sidebar-title a{color:#FFF;}
.sidebar-content-up{margin:20px 0;}
.sidebar-content-up li,.sidebar-content-down li{list-style-type:none;margin-left:20px;font-size:14px;}
.copyright{width:100%;height:50px;background-color:#e8e8e8;margin-top:10px;}
.copyright p{line-height:50px;text-align:center;}
2015-12-03
怎么說的，就是寫css的時候要考慮到復用性 ?比如玩轉bootStrp ?企業網站實踐 等 那幾個在真正的項目中是通過數據庫中的數據 再通過后臺循環輸出到頁面中的（并不是說你的代碼有問題），我們所做的是頁面排版，防止后臺輸出到界面的數據混亂 和 瀏覽器間的兼容，和利用javaScript制作一些讓用戶喜愛的并且能簡化用戶操作的交互效果，還有就是優化性能 等等，要學的還很多哦~加油。