                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實戰(zhàn)

老師，這是哪里錯了

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta http-equiv="Content-Type" content="text/html"charset="UTF-8">
? ?<title>Title</title>
? ?<link href="style.css"rel="stylesheet" type="text/css"/>
? ?<script src="js\setHomeSetFav.js" type="text/javascript" charset="GB2312"></script>
? ?<script src="js\myfocus-2.0.1.min.js" type="text/javascript"></script>
? ?<script src="js\mf-pattern\mF_YSlider.js" type="text/javascript"></script>
? ?<link href=js\mf-pattern\mF_YSlider.css" rel="stylesheet"type="text/css"/>
? ?<script type="text/javascript">
myfocus.set({
? ? ? ? ? ?Id:"picBox"
})
? ?</script>
</head>
<body>
<div class="top">
? ?<div class="top_content">
? ? ? ?<ul>
? ? ? ? ? ?<li><a href="#">聯(lián)系我們</a></li>
? ? ? ? ? ?<li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
? ? ? ? ? ?<li><a href="#" onclick="SetHome(window.location)">設(shè)為首頁</a></li>
? ? ? ?</ul>
? ?</div>
</div>

<div class="wrap">
? ?<div class="logo">
? ? ?<div class="logo_left">
? ? ? ? ?<img src="images/logo.jpg" alt="幕課網(wǎng)"/>
? ? ?</div>
? ? ?<div class="logo_right">
? ? ? ? ?<img src="images/tel.jpg"alt="聯(lián)系我們"/>
? ? ? ? ?<span class="tel">24小時服務(wù)熱線：123-456-7890</span>
</div>
? ?</div>
<div class="nav">
? ? ? ?<div class="nav_left"></div>
? ? ? ?<div class="nav_mid">
? ? ? ? ? ?<nav class="nav_mid_left" >
? ? ? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ? ? ?<li><a href="#">首頁</a></li>
? ? ? ? ? ? ? ? ? ?<li><a href="list.html">關(guān)于幕課網(wǎng)</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>
? ? ? ? ? ?</nav>
? ? ? ? ? ?<div class="nav_mid_right" >
? ? ? ? ? ? ? ?<form action="" method="post">
? ? ? ? ? ? ? ? ? ?<input class="search_text" type="text"/>
? ? ? ? ? ? ? ?</form>
? ? ? ? ? ?</div>
? ? ? ?</div>
<div class="nav_right"></div>
? ?</div>
<div class="ad" id="picBox">
? ? ? ?<div class="loading"><img src="images/loading.gif" alt="圖片加載中"/></div>
? ? ? ? ? ?<div class="pic">
? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><img src="images\ad2.jpg"/></li>
? ? ? ? ? ? ? ? <li><img src="images\ad3.jpg"/></li>
? ? ? ? ? ? ? ? ?<li><img src="images\ad4.jpg"/></li>
? ? ? ? ? ? ?</ul>
? ? ? ? ? ?</div>
? ? ?</div>
</div>
<a class="main" id="jz">
? ?<div class="news">
? ? ? ?<div class="title">
? ? ? ? ? ?<h2 class="title_left">新聞中心</h2><span class="title_right"><a href="news.html">More>></a></span>

</div>
<div class="pic_news">
? ? ? ? ? ? <img src="images\news.jpg"/><h2><a href="news.html">520慕女神喊你來表白！</a></h2><p>活動時間5.25-5.30<br/>
獲獎公布時間<br/><a href="news.html">Learn More>></a></p>
? ? ? ?</div>
<div class="news_list">
? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ?<li><a href="#">【慕課訪談用戶篇】“有為屌絲”在路上</a></li><span class="date">2014-06-01</span>
? ? ? ? ? ? ? ?<li><a href="#">【有獎活動】給父親的三行書信</a></li><span>2014-06-01</span>
? ? ? ? ? ? ? ?<li><a href="#"> 《程序猿，請曬出你的童年》活動獲獎公告</a></li><span>2014-05-30</span>
? ? ? ? ? ? ? ?<li><a href="#">【慕課訪談】破繭成蝶————<br/>美女程序猿的銳變史</a></li><span>2014-05-28</span>
? ? ? ? ? ?</ul>
</div>
</div>
<div class="course">
? ? ? ?<span class="title">
? ? ? ? ? ?<h2 class="title_left">課程中心</h2><span class="title_right"></span><a href="news.html">
More>></a></span>
? ? ? ?</div>
<div class="course_pic">
? ? ? ? ? ?<img src="images\css.jpg"/><h2>項目列表設(shè)計：</h2><p>1.將重復(fù)的屬性放在同一個class里
? ? ? ? ? <br/> 2.屬性寫在一組,用逗號隔開應(yīng)用這些屬性的選擇器。</p>
? ? ? ? ? ? </div>
<div class="course_type">
? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ?<li>安卓開發(fā)</li>
? ? ? ? ? ? ? ?<li>web開發(fā)</li>
? ? ? ? ? ? ? ?<li>php開發(fā)</li>
? ? ? ? ? ? ? ?<li>java開發(fā)</li>
? ? ? ? ? ?</ul>
? ? ? ? ?</div>
</div>
<div class="sidebar">
? ? ? ?<div class="video"></div>
? ? ? ?<div class="title"><h2>媒體聚焦</h2></div>
? ? ? ?<div class="video_content"></div>
? ? ? ?<div class="sidebar_ad"></div>
? ?</div>
</div>
</body>
</html>

*{
? ?margin: 0;padding: 0;font-size: 12px;
}
body{
background-color: #f5f5f5;
}
.top{
? ?width:100%;height:27px;background:url(images/top_bg.jpg)repeat-x;
}
.top_content{
? ?width:1000px;
? ?margin:0 auto;
}
.top_content li{
? ?list-style-image: url(images/li_bg.gif);float: right;width: 70px;
? ?line-height: 27px; /*在盒子中垂直居中*/
}
.top_content a:link,.top_content a:visited{/*初始狀態(tài)和訪問之后狀態(tài)的樣式*/
? ?color:#8e8e8e;
? ?text-decoration:none;
}
.top_content a:hover,.top_content a:active{
? ?color:#900;
? ?text-decoration:none;
}
.wrap{
? ?width:1000px; margin: 0 auto;
}
.logo{
? height:80px;
? ?background-color: #fff;
}
.logo_left{
? ?width: 200px;
? ?float:left;
}
.logo_right{
? ?width: 300px;
? ?float:right;
? ?height:28px;
? ?margin-top:30px;
? ?color:#8e8e8e;
}
.logo_right image{
? ?vertical-align: middle;
? ?margin-right: 10px;
}
.tel{
? ?font-family: 微軟雅黑;
? ?font-size: 16px;
? ?color:#C00;
}
.nav{
? ?height:40px;width:1000px;
}
.nav_left{
? ?width:10px;
? ?background:url(images/nav_left.jpg) no-repeat;
? /* background-image: url(images/nav_left.jpg);
? ?background-repeat: no-repeat;與上面等效*/
? ?/*float:left;
? ?height:40px;*/
}
.nav_mid{
? ?width:980px;background:url(images/nav_bg.jpg)repeat-x;
}
.nav_right{
? ?width:10px;
? ?background:url(images/nav_right.jpg)no-repeat;
? ?/*float:left;
? ?height:40px;*//*左右邊緣同加，左右邊緣同時露出來*/
}
.nav_mid,.nav_right{/*.nav_left去掉后達到教程效果*/
? ?float:left;
? ?height:40px;/*把上面的參數(shù)都寫到這里*/
}
.nav_mid_left,.nav_mid_right{
? ?float:left;
}
.nav_mid_left{
? ?width:680px;
}
.nav_mid_right{
? ?width:300px;
}
.nav_mid_left li{
? ?float:left;list-style-type:none;width:100px;/*li之間的距離*/
? ?text-align: center;/*左右居中*/
? ?line-height:40px;/*與盒子等高，文字上下居中*/
}
.nav_mid_left a:link,.nav_mid_left a:visited{
? ?/*控制超鏈接的初始狀態(tài)和訪問后的狀態(tài)（超鏈接共四種狀態(tài)）*/
? ?text-decoration:none;
? ?color:#fff;
? ?font-size: 16px;
? ?font-family: "微軟雅黑";
}
.nav_mid_left a:hover,.nav_mid_left a:active{
? ?/*控制鼠標經(jīng)過狀態(tài)和離開狀態(tài)（超鏈接共四種狀態(tài)）*/
? ?text-decoration:none;
? ?color:#ff0;
? ?font-size: 16px;
? ?font-family: "微軟雅黑";
}
.search_text{/*搜索框樣式*/
? ?width:190px;
? ?height:25px;
? ?margin-top: 6.5px;
? ?background:url(images/search.jpg)no-repeat right center #f5f5f5;;
? /* background-color:#f5f5f5;*/
? ?padding-right:25px;/*避免輸入文字時，文字壓到搜索符號*/
? ?border:1px solid #f5f5f5;
}
.ad{
? ?height:310px;
? ?overflow:hidden;
? ?clear:both;/*不加此段只剩右邊一窄條*/
}

.main{
? ?height:250px;width:1000px;margin-left:auto;margin-right:auto;
? ?background:black;margin-top:5px;/*解決水平居中和上邊距同時保證的問題*/
}

.news{
? ?width:340px;
? ?border:1px solid #e8e8e8; background:orange;float:left;
}
.course{
? ?width:410px;
? ?border:1px solid #e8e8e8; background:green;float:left;margin-left:7px;
}
.sidebar{
? ?width:230px; background:black; background:#9e7e6b;margin-left:7px;
? ?float:left;
}
.news,.course,.sidebar{
? ?height:300px;/*高度加了50px;*/
}
.title{
? ?height:35px;border-bottom:2px solid #e8e8e8;
}
.title_left{
? ?width:70%;
? ?font_family:"微軟雅黑";
? ?font_size:14px;
? ?font-weight:bold;
? ?color:#786f66;
? ?float:left;
? ?line-height:35px;/*與title高度相同，垂直居中*/
? ?padding-left: 20px;
}
.title_right{
? ?width:20%;
? ?float:right;
? ?line-height:35px;
}
.title_right a{
? ?text-decoration:none;
? ?color:#999999;
}
.pic_news{
? ?height:80px;
? ?margin-top:10px;
? ?line-height: 22px;
}
.pic_news img{
? ?float:left;
? ?margin:0 5px;
}
.pic_news a{
? ?color:#c00;
? ?text-decoration:none;
}
.news_list{
? ?margin-top:20px;
}
.news_list a{
? ?font-size: 13px;/*時間被擠下去解決*/
}
.news_list li{
? ?list-style-type: none;
? ?background:url(images/list.jpg)no-repeat;/*加載左邊箭頭的方式之一*/
? ?padding-left: 10px;
? ?margin:8px 8px;/*li的上下左右距離均為8px;*/
? ?border-bottom: 1px dotted #ccc;

}
.news_list a:link,.news_list a:visited{
? ?text-decoration: none;
? ?color:#000;
}
.news_list a:hover,.news_list a:active{
? ?text-decoration:none;
? ?color:#f00;
}
.news_list span{/*等效于.date*/
? ?color:#999;
? ?float:right;
? ?margin-top: -20px;/*1時間被擠下去解決 2span時間標簽與文字互換位置也可以解決*/
}