                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實戰(zhàn)

大神來看下

CSS ：

@charset "utf-8";
/* CSS Document */
*
{
?? ?margin:0px;
?? ?padding:0px;
?? ?font-size:12px;
?? ?}
?? ?
body
{
?? ?background:#f5f5f5;
?? ?}

.header
{
?? ?width:100%;
?? ?height:27px;
?? ?background:url(images/top_bg.jpg) repeat-x;
?? ?}
?? ?
.header_content
{
?? ?width:1000px;
?? ?margin:0 auto; 
?? ?}
?? ?
.header_content li
{
?? ?list-style-image:url(images/li_bg.gif);
?? ?float:right;
?? ?width:70px;
?? ?line-height:27px;
?? ?}
?? ?
.header_content a:link,header_content a:visited
{
?? ?color:#8E8E8E;
?? ?text-decoration:none;
?? ?}
?? ?
.header_content a:hover,header_content a:active
{
?? ?color:#F00;
?? ?text-decoration:none;
?? ?}
?? ?
.wrap
{
?? ?width:1000px;
?? ?margin:0 auto;
}

.logo
{
?? ?height:80px;
?? ?background:#FFF;
}

.logo_left
{
?? ?float:left;
?? ?width:200px;

?? ?
}

.logo_right
{
?? ?float:right;
?? ?width:300px;
?? ?height:28px;
?? ?padding-top:26px;
?? ?color:#8E8E8E;
?? ?

?? ?}
?? ?
.logo_right img
{
?? ?vertical-align:middle;
?? ?margin-right:10px;
}

.tel{
?? ?font-family:"仿宋";
?? ?font-size:14px;
?? ?color:#F00;
}

.nav{
?? ?height:40px;
}

.nav_left
{
?? ?background:url(images/nav_left.jpg) no-repeat;
?? ?width:10px;?? ?
?? ?
?? ?
}

.nav_mid
{
?? ?background:url(images/nav_bg.jpg) repeat-x;
?? ?width:980px;
}

.nav_right
{
?? ?background:url(images/nav_right.jpg) no-repeat;
?? ?width:10px;?? ?
}

.nav_left,.nav_mid,.nav_right
{
?? ?float:left;
?? ?height:40px;
?? ?display:inline;
}

.nav_mid_left
{
?? ?width:680px;
?? ?float:left;
?? ?display:inline;
}
.nav_mid_right
{
?? ?width:300px;
?? ?float:left;
?? ?display:inline;
}
/*.nav_mid_left li
{
?? ?float:left;
?? ?list-style:none;
?? ?word-spacing:20px;
?? ?margin:10px 0 10px 20px;
}*/

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

.nav_mid_left a:link,.nav_mid_left a:visited
{
?? ?color:#FFF;
?? ?text-decoration:none;
?? ?font-size:16px;
?? ?font-family:"微軟雅黑";
?? ?}
.nav_mid_left a:hover,.nav_mid_left a:active
{?? ?
?? ?color:#F00
?? ?text-decoration:none;
?? ?font-size:16px;
?? ?font-family:"微軟雅黑";
}

/*.nav_mid_right
{
?? ?float:right;
?? ?padding:10px 30px 10px 20px;
?? ?background-image:url(images/search.jpg) none;
}*/

.search_text
{
?? ?width:190px;
?? ?height:25px;
?? ?margin:5px;
?? ?background:url(images/search.jpg) no-repeat right center;
?? ?/*background-image;
?? ?background-repeat;
?? ?background-position;*/
?? ?background-color:#FFF;
?? ?padding-right:25px;
?? ?border:1px solid #FFFFFF;
}
.ad
{
?? ?height:320px;
?? ?overflow:hidden;
?? ?margin-top:5px;
}

html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)demo</title>
<link rel="stylesheet" type="text/css" href="css.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>
<link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
myfocus.set({
?? ?id:"Boxid"})
</script>

</head>
<body>
<div class="header">
<div class="header_content">
?? ?<ul>
?? ??? ?<li><a href="#">聯(lián)系我們</a></li>
?? ??? ?<li><a href="#" onClick="AddFavorite(window.location document.title)">加入收藏</a></li>
?? ??? ?<li><a href="#" onClick="SetHome(window.location)">設(shè)為首頁</a></li>
?? ?</ul>
</div>
</div>

?? ?<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="熱線電話"/>熱線電話<span class="tel">11111111</span></div>
??? </div>
?? ?
??? <div class="nav">
??? <div class="nav_left">
??? </div>
?? ?
??? <div class="nav_mid">
??? <div class="nav_mid_left">
??? <ul>
??? <li><a href="#"/>首頁</li>
??? <li><a href="list.html"/>關(guān)于課程</li>
??? <li><a href="list.html"/>新聞動態(tài)</li>
??? <li><a href="list.html"/>課程中心</li>
??? <li><a href="list.html"/>在線課程</li>
??? <li><a href="list.html"/>人才招聘</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 class="ad" id="picBox">
??? <div class="loading"><img src="images/loading.gif" alt="加載中"/>
??? </div>
?? ??? ?<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>