                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /企業網站綜合布局實戰

焦點圖會自動輪播，但是沒有下面那個條狀按鈕

html文件

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>企業網站</title>
????<link?rel="stylesheet"?href="css/main.css"?type="text/css"?/>
????<script?src="js/setHomeSetFav.js"?type="text/javascript"?charset="gbk"></script>
????<script?type="text/javascript"?src="js/myfocus-2.0.1.min.js"></script><!--引入myFocus庫-->
????<script?type="text/javascript"?src="js/mf-pattern/mF_fancy.js"></script><!--引入風格js文件-->
????<link?href="js/mf-pattern/mF_fancy.css"?type="text/css"?/><!--引入風格css文件-->
????<script?type="text/javascript">
????????myFocus.set({
????????????id:'focus',//焦點圖盒子ID
????????????pattern:'mF_fancy',//風格應用的名稱
????????????time:1,//切換時間間隔(秒)
????????????trigger:'click',//觸發切換模式:'click'(點擊)/'mouseover'(懸停)
????????????width:1000,//設置圖片區域寬度(像素)
????????????height:310,//設置圖片區域高度(像素)
????????????txtHeight:'default'//文字層高度設置(像素),'default'為默認高度，0為隱藏
????????});
????</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>
<!--top結束-->
<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="電話">24小時服務熱線：<span>123-456-7890</span>
????????</div>
????</div>
????<!--logo結束-->
????<div?class="nav">
????????<div?class="nav_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_right">
????????????<form?action=""?method="post">
????????????????<input?type="text">
????????????</form>
????????</div>
????</div>
????<!--nav結束-->
????<div?id="focus">
<!--????????<div?class="loading"><img?src="images/loading.gif"?alt="請稍候..."?/></div>&lt;!&ndash;載入畫面(可刪除)&ndash;&gt;-->
????????<div?class="pic">
????????????<ul>
??????????????<li><a?href="#"><img?src="images/ad2.jpg"?thumb=""?alt=""?text="詳細描述2"?/></a></li>
??????????????<li><a?href="#"><img?src="images/ad3.jpg"?thumb=""?alt=""?text="詳細描述3"?/></a></li>
??????????????<li><a?href="#"><img?src="images/ad4.jpg"?thumb=""?alt=""?text="詳細描述4"?/></a></li>
??????????????<li><a?href="#"><img?src="images/ad3.jpg"?thumb=""?alt=""?text="詳細描述5"?/></a></li>
????????????</ul>
????????</div>
????</div>
????<!--focus結束-->
</div>
<!--wrap結束-->
</body>
</html>

css文件

*{
????margin:?0;
????padding:?0;
????font-size:?12px;
}

body{
????background-color:?#F5F5F5;
}

.top{
????width:?100%;
????height:?27px;
????background-image:?url(../images/top_bg.jpg);
}

.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?li?a:link,.top_content?li?a:visited{
????text-decoration:?none;
????color:?#8E8E8E;
}

.top_content?li?a:hover,.top_content?li?a:active{
????text-decoration:?none;
????color:?#990000;
}

.wrap{
????width:?1000px;
????margin:?0?auto;
????background-color:?#F5F5F5;
}

.wrap?.logo{
????width:?100%;
????height:?80px;
????background-color:?#FFFFFF;
}

.wrap?.logo?.logo_left{
????width:?200px;
????float:?left;
}

.wrap?.logo?.logo_right{
????width:?300px;
????float:?right;
????line-height:?80px;
????color:?#8E8E8E;
}

.wrap?.logo?.logo_right?img{
????vertical-align:?middle;
}

.wrap?.logo?.logo_right?span{
????font-size:?22px;
????font-family:?微軟雅黑;
????color:?#990000;
}

.nav{
????width:?100%;
????height:?40px;
????background-color:?#999999;
????border-radius:?5px;
}

.nav?.nav_left{
????width:?700px;
????float:?left;
}

.nav?.nav_left?li{
????list-style:?none;
????float:?left;
????width:?100px;
????text-align:?center;
????line-height:?40px;
}

.nav?.nav_left?li?a{
????font:?16px?微軟雅黑;
????text-decoration:?none;
????color:?#FFFFFF;
}

.nav?.nav_right{
????width:?300px;
????float:?right;
}
.nav?.nav_right?input{
????height:?30px;
????font:?16px?微軟雅黑;
????color:?#999999;
????background:?url(../images/search.jpg)?no-repeat?right?center;
????background-color:?#FFFFFF;
????padding-right:?25px;
}

#focus{
????width:?1000px;
????height:?310px;
????margin:?0?auto;
????overflow:?hidden;
}