                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /企业网站综合布局实战

得出这样的效果，没有动画且不对齐，道友可有解法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="6.26.css">
<script type="text/javascript" arc="js/myfocus-2.0.1.min.js"></script>
<script type="text/javascript" arc="js/mf-pattern/mF_fancy.js"></script>
<link rel="stylesheet" href="js/mf-pattern/mF_fancy.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="#">加入收藏</a></li>
   <li><a href="#">设为首页</a></li>
  </ul>
</div>
</div>
<div class="wrap">
  <div class="logo">

   <div class="logo-right">
    <img src="images/tel.jpg" ait="服务热线"/>24小时服务热线：<span class="tel">123-456-789</span>
   </div>
   <div class="logo-left">
   <img src="images/logo.jpg" alt="慕课网"/>
   </div>
  </div>
<div class="nav">
<div class="nav-left"></div>
<div class="nav-mid">
  <div class="nav-mid-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 class="nav-mid-right">
   <form action="" method="post">
    <input type="text" class="search-text" /></form>
  </div>
</div>
<div class="nav-right"></div></div>
</div>
<div class="ad" id="picBox">

<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>
</body>
</html>

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: 100px;
line-height:27px;
}
.top-content a:link,.top-content a:visited
{

color: #E8E8E8;
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:30px;
color: #8E8E8E;
}
.logo-right img{

vertical-align: middle;
margin-right:10px;

}
.tel{
font-family: "微软雅黑"；
font-size:16px;
color: #C00;
}
.nav{
height: 40px;
clear: both;
}
.nav-left{
width:10px;
background:url(images/nav_left.jpg) no-repeat;

}
.nav-mid{

width:980px;
background: url(images/nav_bg.jpg) repeat-x;
}
.nav-right{
width:10px;
background: url(images/nav_right.jpg) no-repeat;
}
.nav-left,.nav-mid,.nav-right{
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;
width: 100px;
text-align: center;
line-height: 10px;
list-style-type: none;

}

.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-family: "微软雅黑"；
font-size:16px;

}
.search-text{
width: 190px;
height: 25px;
margin-top: 5px;
background: url(images/search.jpg) no-repeat right center;
background-color: #FFF;
padding-right: 25px;
border: 1px solid #FFF;
}
.ad{
height: 310px;
}
.