老师，这是哪里错了-慕课网

老师，这是哪里错了

来源：3-15 企业网站制作之课程中心制作

慕粉3316703

2016-05-08 10:49

<!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="#">联系我们</a></li>
<li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
<li><a href="#" onclick="SetHome(window.location)">设为首页</a></li>
</ul>
</div>
</div>

<div class="wrap">
<div class="logo">
<div class="logo_left">
<img src="images/logo.jpg" alt="幕课网"/>
</div>
<div class="logo_right">
<img src="images/tel.jpg"alt="联系我们"/>
<span class="tel">24小时服务热线：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">关于幕课网</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>项目列表设计：</h2><p>1.将重复的属性放在同一个class里
<br/> 2.属性写在一组,用逗号隔开应用这些属性的选择器。</p>
</div>
<div class="course_type">
<ul>
<li>安卓开发</li>
<li>web开发</li>
<li>php开发</li>
<li>java开发</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{/*初始状态和访问之后状态的样式*/
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;/*把上面的参数都写到这里*/
}
.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{
/*控制超链接的初始状态和访问后的状态（超链接共四种状态）*/
text-decoration:none;
color:#fff;
font-size: 16px;
font-family: "微软雅黑";
}
.nav_mid_left a:hover,.nav_mid_left a:active{
/*控制鼠标经过状态和离开状态（超链接共四种状态）*/
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时间标签与文字互换位置也可以解决*/
}