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

nav_middle另起一行？

<html>
<head>
?<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????<title>企業案例</title>
<link?rel="stylesheet"?type="text/css"?href="style.css">

</head>
<body>

<div?class="top">
?<div?class="top_content">
???<ul>
??????<li>聯系我們</li>
??????<li>加入收藏</li>
??????<li>設為首頁</li>

????</ul>
?</div>
?</div>

<div?class="wrap">
<div?class="logo">
?<div?class="logo_right">
??????<img?src="n.png"><span?class="tel">24小時服務熱線：123-456-789</span>
?</div>
<div?class="logo_left">
???<img?src="timg.jpg"?alt="mukewang">
?</div>

?

</div>
<div?class="nav">
<div?class="nav_left"></div>
<div?class="nav_middle">

<div?class="nav_middle_left">
<ul>
<li>首頁</li>
<li>關于慕課</li>
<li>新聞動態</li>
<li>課程中心</li>
<li>在線課程</li>
<li>人才招聘</li>
</ul>
</div>
<div?class="nav_middle_right">
<form?action="#"?method="post">
<input?type="text"/>
</form>
</div>
</div>
<div?class="nav_right"></div>

</div>

</div>


</body>

</html>

*?{
????margin:0;
????padding:0;
????font-size:12px;
}
body{
????background-color:#F5F5F5;
}
.top?{
????width:100%;
????height:30px;
????background:url(headerBg.jpg);
}
.top_content{
????width:1000px;
????margin:0?auto;
}
.top_content?li{
????float:right;
????width:70px;
????line-height:30px;
}
.wrap{
????width:1000px;
????margin:0?auto;
}
.logo{
????height:80px;
????background:white;
}
.logo_right{
????float:right;
????width:300px;
????margin-top:30px;
????color:#8E8E8E;
}
.logo_right?img{
????vertical-align:middle;
????margin-right:10px;
}
.tel{
????font-size:12px;
????font-family:"微軟雅黑";
????color:#C00;
}
.nav{
????height:40px;
????clear:both;
}
.nav_left{
????width:10px;
????height:40px;
????background:url(left.gif);
}
.nav_middle{
?width:980px;
?background:url(mid.gif)?repeat-x;?
?float:left;
????}
.nav_right{
width:10px;
background:url(right.gif)?no-repeat;
float:left;????
height:40px;
????
}