<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>無標題文檔</title>
<link?href="css/main.css"?rel="stylesheet"?type="text/css"/>
</head>
<script?src="js/setHomeSetFav.js"?type="text/x-javascript"?charset="gb2312"></script>
<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>
<div?class="wrap">
?????<div?class="logo">
??????????<div?class="logo_left">
???????????????<img?src="image/logo.jpg"?alt="mukewang"/>
??????????</div>
??????????<div?class="logo_right">
????????????????<img?src="image/tel.jpg"?alt="服務熱線"/>24小時服務熱線：<span?class="tel">123-456-7890</span>
??????????</div>
?????</div>
?????<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?type="text"/>
?????????????????????</form>
???????????????</div>
??????????</div>
??????????<div?class="nav_right"></div>
?????</div>
</div>
</body>
</html>
@charset?"utf-8";
/*?CSS?Document?*/
*
{
margin:o;
padding:0;
font-size:12px;
}
body
{
background-color:#F5F5F5;
}
.top
{
width:100%;
height:27px;
background:url(../image/top_bg.jpg)?repeat-x;
}
.top_content
{
width:1000px;
margin:0?auto;
}
.top_content?li
{
list-style-image:url(../image/li_bg.gif);
float:right;
width:70px;
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:#990000;
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:#FB0307;
}
.nav
{
height:40px;
}
.nav_left
{
width:10px;
background:url(../image/nav_left.jpg)?no-repeat;
????float:left;
height:40px;
}
.nav_mid
{
width:980px;
background:url(../image/nav_bg.jpg)?repeat-x;
float:left;
}
.nav_right
{
width:10px;
background:url(../image/nav_right.jpg)?no-repeat;
float:left;?height:40px;
}
2015-12-06
logo_left{
? ?height:80px;
}
試了下可以解決！但是還是沒查到為什么明明logo是80px還是會把logo撐開！
2015-11-28
這個是什么意思啊 我做這個也出現了這個問題
2015-08-14
哦哦 我用的HTML5 加了clear：both 后就好了
2015-08-13
nav_left浮動了，不占據標準文檔流了，所以下面的跑上去了