
<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>企業(yè)網(wǎng)站實例</title>
<link?rel="stylesheet"?type="text/css"?href="main1.css">
</head>
<body>
<div?class="top">
<div?class="top_content">
<ul>
<li><a?href="#">加入收藏</a></li>
<li><a?href="#">聯(lián)系我們</a></li>
<li><a?href="#">設(shè)為首頁</a></li>
</ul>
</div>
</div>
<!--頁面頂端top結(jié)束-->
<div?class="wrap">
<div?class="logo">
<div?class="logo_left">
<img?src="images/logo.jpg"?/>
</div>
<div?class="logo_right">
<img?src="images/tel.jpg"?/>24小時服務(wù)熱線:<span?class="tel">123-456-7890</span>
</div>
</div>
<!--logo結(jié)束-->
<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">關(guān)于慕課</a></li>
<li><a?href="list.html">新聞動態(tài)</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>
<!--nav_mid_left結(jié)束-->
<div?class="nav_mid_right">
<form?action=""?method="post">
<input?type="text"?class="search_text"?/>
</form>
</div>
<!--nav_mid_right結(jié)束-->
</div>
<!--導(dǎo)航主體nav_mid結(jié)束-->
<div?class="nav_right"></div>
</div>
?<!--nav結(jié)束-->
</div>
</body>
</html>
*{
padding:?0px;
margin:?0px;
font-size:?12px;
}
body{
background-color:?#F5F5F5;
}
.top{
width:?100%;
height:27px;
background:?url(images/top_bg.jpg)?repeat-x;
}
.top_content{
width:?1000px;
line-height:?27px;
margin:?0?auto;
}
.top_content?li{
float:?right;
width:?70px;
list-style-image:?url(images/arrow.jpg);
}
.top_content?a:link,.top_content?a:visited{
color:?#8E8E8E;
text-decoration:none;
}
.top_content?a:hover,.top_content?a:active{
color:?#C00;
text-decoration:none;
}
.wrap{
margin:?0?auto;
width:?1000px;
}
.logo{
height:?80px;
background-color:?#FFF;?
}
.logo_left{
width:375px;
display:inline;
float:?left;
}
.logo_right{
display:inline;
height:?28px;
width:?300px;
float:?right;
color:?#8E8E8E;
margin-top:?30px;
}
.logo_right?img{
margin-right:10px;
vertical-align:?middle;?
}
.tel{
font-size:?22px;
color:?#C00;
font-family:?"微軟雅黑";
}
.nav{
height:?40px;
}
.nav_left{
width:?10px;
background:?url(nav_left.jpg)?no-repeat;
}
.nav_mid{
width:?980px;
background:?url(images/nav_bg.jpg)?repeat-x;
line-height:?40px;
}
.nav_right{
width:?10px;
background:?url(images/nav_right.jpg)?no-repeat;
}
?.nav_left,?.nav_mid,?.nav_right{
height:?40px;
display:?inline;
float:?left;
}
.nav_mid?li{
float:?left;
list-style-type:?none;
width:?100px;
text-align:?center;
font-family:?"微軟雅黑";
}
.nav_mid?a:link,?.nav_mid?a:visited{
font-size:?16px;
color:?#FFF;
text-decoration:?none;
}
.nav_mid?a:hover,?.nav_mid?a:active{
font-size:?16px;
color:?#FF0;
text-decoration:?none;
}
.nav_mid_left{
width:?680px;
float:left;
}
.nav_mid_right{
width:?300px;
}
.nav_mid_left,?.nav_mid_right{
display:?inline;
}
.search_text
{
width:?190px;
float:?left;
height:?25px;
margin-top:?5px;
background:url(images/search.jpg)?no-repeat?right?center;
}
2015-04-13
是不是因為你沒有給左側(cè)圓角圖片添加float:left