<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Enterprise</title> <link rel="stylesheet" href="css/main.css" type="text/css"> <link rel="stylesheet" href="js/mf-pattern/mF_YSlider.css" 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> <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><!--End Top--> <div class="wrap""> <div class="logo"> <div class="logo_left"> <img src="img/logo.jpg" alt="慕课网"/> </div> <div class="logo_right"> <img src="img/tel.jpg" alt="服务热线"/>24小时服务热线:<span class="tel">123-456-789</span><!--内联元素--> </div> </div><!--End logo--> <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="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> </div> <div class="nav_mid_right"> <form action="" method="post"> <input class="search_text" type="text"/> </form> </div> </div> <div class="nav_right"></div> </div><!--End navigator--> <div class="ad" id="picBox"> <div class="pic"> <ul> <li><img src="img/ad2.jpg"/></li> <li><img src="img/ad3.jpg"/></li> <li><img src="img/ad4.jpg"/></li> </ul> </div><!--End pic--> </div> </div><!--End wrap--> </body>
@charset "utf-8" * { margin:0; padding:0; font-size:12px; } body{ background-color:#F5F5F5; } .top{ width:100%; height:27px; background:url(../img/top_bg.jpg) repeat-x; } .top_content{ width:1000px; margin:0 auto; /*centralize*/ } .top_content li{ list-style-image:url(../img/li_bg.gif); float:right; width:80px; 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 img { vertical-align:middle; margin-right:10px; } .tel { font-family:"微软雅黑"; font-size:16px; color:#C00; } .nav{ height:40px; } .nav_left{ width:10px; background:url(../img/nav_left.jpg) no-repeat; } .nav_mid{ width:980px; background:url(../img/nav_bg.jpg) repeat-x; } .nav_right{ width:10px; background:url(../img/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; list-style-type:none; width:100px; text-align:center; line-height:10px; } .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:5px; background:url(../img/search.jpg) no-repeat right center; /*background-image:url(../img/search.jpg); background-repeat:no-repeat; background-position:right center;*/ background-color:#FFF; padding-right:25px; border:1px solid #FFF; } .ad{ height:310px; overflow:hidden; }
老师为什么我的焦点图不能向左对齐,而且没有焦点图轮播的特效……求解……
在.ad里加上float:left