                        課程
                    
                        /前端開發
                        
                            /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;
}
.