<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慕课网首页</title>
<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>
<script type="text/javascript" src="js/mf-pattern/mF_fancy.js"></script>
<link rel="stylesheet" href="js/mf-pattern/mF_fancy.css" type="text/css">
<script type="text/javascript">
myFocus.set({id: "picBox"});
</script>
<style>
div, h2, ul, p, img, li, a {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
background: #F5F5F5;
font-family: "Microsoft YaHei", Verdana, sans-serif, "SimSun";
}
#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");
width: 70px;
line-height: 27px;
float: right;
font-size: 12px;
}
#top_content a:link, #top_content a:visited {
text-decoration: none;
}
#top_content a:hover, #top_content a:active {
text-decoration: none;
color: red;
}
#wrap {
width: 1000px;
margin: 0 auto;
}
#logo {
height: 80px;
background: #FFFFFF;
}
#logoLeft {
width: 200px;
float: left;
}
#logoRight {
width: 300px;
float: right;
margin-top: 30px;
height: 28px
}
#logoRight img {
vertical-align: middle;
margin-right: 10px;
}
.tel {
color: red;
font-size: 16px;
}
#nav {
height: 40px;
clear: both;
}
#nav_left {
width: 10px;
background: url("../images/nav_left.jpg") no-repeat;
float: left;
height: 40px;
}
#nav_middle {
height: 40px;
width: 980px;
background: url("../images/nav_bg.jpg") repeat-x;
float: left;
}
#nav_right {
width: 10px;
background: url("../images/nav_right.jpg") no-repeat;
float: left;
height: 40px;
}
#nav_middle-left {
width: 680px;
float: left;
}
#nav_middle-right {
width: 300px;
float: left;
}
#nav_middle-left li {
float: left;
line-height: 40px;
width: 100px;
list-style: none;
text-align: center;
}
#nav_middle-left a:link, #nav_middle-left a:visited {
text-decoration: none;
color: white;
font-size: 16px;
}
#nav_middle-left a:hover, #nav_middle-left a:active {
font-size: 16px;
color: yellow;
text-decoration: none;
}
.seacher {
width: 190px;
height: 25px;
margin-top: 5px;
padding-right: 25px;
background: url("../images/search.jpg") no-repeat right center white;
border: 1px solid white;
}
.ad {
height: 243px;
overflow: hidden;
}
#main {
height: 330px;
margin-top: 5px;
}
#new {
width: 340px;
}
#course {
width: 410px;
margin-right: 7px;
margin-left: 7px;
}
#sidebar {
width: 230px;
}
#new, #course, #sidebar {
height: 300px;
float: left;
border: 1px solid #ffffcc;
}
.title {
height: 35px;
border-bottom: 2px solid silver;
}
.title_left {
line-height: 35px;
width: 70%;
font-weight: bold;
font-size: 14px;
padding-left: 10px;
float: left;
}
.title_right {
float: right;
line-height: 35px;
width: 20%;
font-weight: bold;
text-align: right;
padding-right: 10px;
}
.title_right a {
text-decoration: none;
color: #999999;
}
.pic_news {
height: 80px;
margin-top: 10px;
line-height: 22px;
}
.pic_news img, .pic_course img {
float: left;
padding: 0 5px;
}
.pic_news a, .pic_course a {
text-decoration: none;
color: #C00;
}
.new_list {
margin-top: 10px;
}
.new_list li {
line-height: 25px;
list-style: none;
background: url("../images/list.jpg") no-repeat;
padding-left: 10px;
border-bottom: 1px dotted #999;
}
.new_list span {
float: right;
}
.new_list a:link, .new_list a:visited {
text-decoration: none;
color: #000;
}
.new_list a:hover, .new_list a:active {
text-decoration: none;
color: #F00;
}
.pic_course {
height: 120px;
line-height: 22px;
margin-top: 10px;
}
.course_type {
margin: 20px auto;
height: 372px;
background: url("../images/product_type_bg.jpg") no-repeat;
}
.course_type li {
list-style: none;
display: inline-block;
line-height: 28px;
font-size: 12px;
margin: 0 15px;
text-align: center;
}
.video {
height: 185px;
border: 1px solid #EbE8E8;
}
.video_content {
height: 185px;
}
.sidebar_ad {
height: 55px;
border: 1px solid #E8E8E8;
margin-top: 10px;
}
.copyright{
clear: both;
width: 100%;
height: 200px;
background:#E8E8E8 ;
}
.copyright_content{
width: 1000px;
margin: 0 auto;
padding-right: 10px;
}
.copyright_content li{
list-style: none;
float: left;
width: 200px;
background: url("../images/line.png") no-repeat right center;
text-align: center;
line-height: 30px;
}
.copyright_content a{
text-decoration: none;
color: #999;
font-size: 18px;
}
.copyright_content li ul li a{
text-decoration: none;
color: #999;
font-size: 14px;
}
.list_main{
min-height: 350px;
_height:350px;
background: white;
margin-top: 10px;
margin-bottom: 10px;
}
.news_type{
width: 220px;
height: 350px;
border:1px solid #E8E8E8;
float: left;
}
.list_box{
width: 770px;
min-height: 350px;
_height:350px;
border:1px solid #E8E8E8;
float: right;
}
.news_type h2 {
height: 35px;
line-height: 35px;
background: #9FF;
color: #666;
font-size:14px ;
background: url("../images/titile_bg.gif") repeat-x;
padding-left: 20px;
}
.news_type_content {
height: 365px;
background: url("../images/content_bg.gif") repeat-x;
}
.news_type_content li{
list-style: none;
height: 30px;
line-height: 30px;
}
.news_type_content li a{
color:#666;
text-decoration: none;
background: url("../images/li_bg.gif") no-repeat left center;
padding-left: 15px;
display: block;
}
.news_type_content li a:hover{
color:#009CDF;
background: url("../images/li_bg2.gif") no-repeat left center;
background-color: #F2F2F2;
}
.list_box h2{
font-size: 14px;
color: #666;
height:35px;
line-height: 35px;
padding-left:15px ;
background:url("../images/titile_bg.gif") repeat-x ;
}
.page{
height: 40px;
margin-top: 10px;
text-align: center;
}
.page a{
display: inline-block;
border: 1px solid #E8E8E8;
text-decoration: none;
margin: 5px;
padding: 5px 10px;
}
.page a:link,.page a:visited{
color:#000;
}
.page a:hover,.page a:active{
color:#FFF ;
background-color: #cc1b1b;
}
</style>
</head>
<body>
<div id="top">
<div id="top_content">
<ul>
<li><a href="#" οnclick="">联系我们</a></li>
<li><a href="#" οnclick="">加入收藏</a></li>
<li><a href="#" οnclick="">设为首页</a></li>
</ul>
</div>
</div> <!--top结束!-->
<div id="wrap">
<div id="logo">
<div id="logoLeft">
<img src="images/logo.jpg">
</div>
<div id="logoRight">
<img src="images/tel.jpg">
24小时服务热线:<span class="tel">123-456-7890</span>
</div>
</div><!--logo结束!-->
<div id="nav">
<div id="nav_left">
</div>
<div id="nav_middle">
<div id="nav_middle-left">
<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>
<div id="nav_middle-right">
<form method="post" action="">
<input type="text" class="seacher">
</form>
</div>
</div><!--nav_middle结束!-->
<div id="nav_right"></div>
</div><!--nav结束!-->
<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><!--pic结束!-->
</div><!--picBox结束!-->
<div id="main">
<div id="new">
<div class="title">
<h2 class="title_left">新闻中心</h2>
<span class="title_right"><a href="#">More > ></a></span>
</div>
<div class="pic_news">
<img src="images/news.jpg">
<h2><a href="#">520 女神喊你来表白</a></h2>
<p>活动时间:5月20-5月25日<br/>
获奖公布时间:5月25日<br/>
<a href="#">Learn More >></a></p>
</div>
<div class="new_list">
<ul>
<li><span>[2014-06-09]</span><a href="#">【哈哈啊啊哈哈</a></li>
<li><span>[2014-06-09]</span><a href="#">【哈哈啊啊哈哈,今日头条 </a>
</li>
<li><span>[2014-06-09]</span><a href="#">【哈哈啊啊哈哈爱奇艺 </a>
</li>
<li><span>[2014-06-09]</span><a href="#">【哈哈啊啊哈哈 </a></li>
</ul>
</div>
</div><!--new结束!-->
<div id="course">
<div class="title">
<h2 class="title_left">课程中心</h2>
<span class="title_right"><a href="#">More > ></a></span>
</div>
<div class="pic_course">
<img src="images/css.jpg">
<h2><a href="#">CSS圆角进化论</a></h2>
<p>
CSS圆角的实现经历了三大发展阶段:背景图片方式、CSS2.0+HTML模拟标签、CSS3.0圆角属性,以及css的显现方式,并对实现的哟缺点进行对比分析</p>
</div>
<div class="course_type">
<ul>
<li> PHP开发</li>
<li> JAVA开发</li>
<li> Andior开发</li>
<li> 前端开发</li>
</ul>
</div><!--pic_course!-->
</div><!--course结束!-->
<div id="sidebar">
<div class="video">
<div class="title">
<h2 class="title_left">媒体聚焦</h2>
<span class="title_right"><a href="#">More > </a></span>
</div>
<div class="video_content">
<embed src="http://player.video.qiyi.com/5828f85deefc77a7ac97afb1ef194a44/0/0/v_19rr935mhw.swf-albumId=783581000-tvId=783581000-isPurchase=0-cnId=6"
allowFullScreen="true" quality="high" width="230"
height="140" align="middle"
allowScriptAccess="always"
type="application/x-shockwave-flash"></embed>
</div><!--videv_content结束!-->
</div><!--videv_结束!-->
<div class="sidebar_ad">
<img src="images/app.jpg">
</div><!--sidebar_ad结束!-->
</div><!--sidebar结束!-->
</div><!--main结束!-->
</div><!--wrap结束!-->
<div class="copyright">
<div class="copyright_content">
<ul>
<li><a href="#">关于</a>
<ul>
<li><a href="#">品牌故事</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">版权声明</a></li>
</ul>
</li>
<li><a href="#">课程</a>
<ul>
<li><a href="#">PHP前端</a></li>
<li><a href="#">JAVA前端</a></li>
<li><a href="#">前端开发</a></li>
<li><a href="#">Andrid开发</a></li>
</ul>
</li>
<li><a href="#">留言</a>
<ul>
<li><a href="#">新浪微博</a></li>
<li><a href="#">腾讯微博</a></li>
<li><a href="#">企业微信</a></li>
<li><a href="#">QQ空间</a></li>
</ul>
</li>
<li><a href="#">关注</a>
<ul>
<li><a href="#">意见反馈</a></li>
<li><a href="#">问题留言</a></li>
<li><a href="#">媒体联系</a></li>
<li><a href="#">在线客服</a></li>
</ul>
</li>
<li><a href="#"><img src="images/weixin.png">微信关注</a>
<ul>
<li><img src="images/qrcode.jpg"></li>
</ul>
</li>
</ul>
</div><!--copyright!-->
</div><!--copyright_content!-->
</body>
</html>