css
/*公共樣式*/
/*浮動*/
.fl{float:left;}
.fr{float:right;}
body{background:?#F5F5F5;font-family:?"宋體"；}
#top{width:100%;height:27px;background:url(../images/top_bg.jpg)?repeat-x;}
.topText{width:1000px;height:27px;margin:0?auto;}
.topText?ul?li{font-size:15px;float:?right;list-style-image:url(../images/arrow.jpg);
width:75px;height:27px;line-height:27px;margin-right:?3px;}
.topText?a:link,?.topText?a:visited{color:?#8E8E8E;};
.topText?a:hover,?.topText?a:active?{color:?#C00;};
/*End?top*/
.warp{width:1000px;margin:0?auto;}
.logo{width:1000px;margin:0?auto;height:80px;background:#FFF;}
.logoLeft{width:200px;height:80px;}
.logoRight{margin-top:30px;width:300px;font-size:15px;}
.logoRight?img{vertical-align:middle;margin-right:10px;display:inline;}
.logoRight?span{color:red;font-size:18px;font-weight:?bold;}
/*End?logo*/
.nav{width:1000px;margin:0?auto;height:40px;}
.navLeft{width:10px;background:url(../images/nav_left.jpg)?no-repeat;}
.navMid{width:980px;line-height:40px;background:url(../images/nav_bg.jpg)?repeat-x;}
.navRight{width:10px;background:url(../images/nav_right.jpg)?no-repeat;}
.navLeft,.navMid,.navRight{float:left;height:40px;display:inline;}
.navMidLeft?li{float:left;width:100px;text-align:center;font-size:17px;}
.navMidLeft?li?a:link,.navMidLeft?li?a:visited{color:?white;}
.navMidLeft?li?a:hover,.navMidLeft?li?a:active{color:yellow;}
.search{width:190px;height:20px;margin-top:9px;margin-left:20px;
background:?url(../images/search.jpg)?no-repeat?right?center;
background-color:#FFF;border:1px?solid?#FFF;padding-left:5px;
padding-right:25px;}
/*End?nav*/
.ad?{width:1000px;margin:0?auto;height:320px;margin-top:5px;overflow:hidden;}
/*End?ad*/
html
<body>
?<div?id="top">
?<div?class="topText?.clearfix">
? <ul>
? <li><a?href="#">聯系我們</a></li>
??????<li><a?onclick="AddFavorite(window.location,document.title)"?href="javascript:void(0)">加入收藏</a></li>
??????<li><a?onclick="SetHome(window.location)"?href="javascript:void(0)">設為首頁</a></li>
? </ul>
?</div>
?</div>
?<!--?End?top?-->
<div?class="warp">
<div?class="logo?clearfix">
<div?class="logoLeft?fl"><h1><a?href=""><img?src="images/logo.jpg"?alt="慕課網"?class="logoLeft?fl"?/></a></h1></div>
<div?class="logoRight?fr"><img?src="images/tel.jpg"?alt="聯系電話"/>24小時服務熱線：<span>123-456-7890</span></div>
</div><!--?End?logo-->
<div?class="nav">
????<div??class="navLeft"></div>
????<div?class="navMid">
??????<div?class="navMidLeft?clearfix">
????????<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>
??????<!--navMidLeft-->
??????<div?class="navMidRight">
??????????<form?action=""?method="post">
??????????<input?type="text"?class="search"?/>
??????????</form>
??????</div>
??????<!--navMidRight-->?
????</div>
????<!--navMid-->
????<div?class="navRight"></div>
????</div><!--?End?nav?-->
<div?class="ad">
????<div?id="boxID"><!--焦點圖盒子-->
??????<div?class="loading"><img?src="images/loading.gif"?alt="請稍候..."?/></div>
??????<!--載入畫面(可刪除)-->
??????<div?class="pic"><!--內容列表(li數目可隨意增減)-->
????????<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>
??</div>
??<!--End?ad-->
</div><!--?End?warp-->
