1.先看效果:
2.header.html:
<div id="header">
<div class="logo">here is the logo</div>
<div class="menu">
<ul>
<li class="selected"><a id="home" title="Home Page" accesskey="3" href="#">网站首页<br/><span>Home</span></a></li>
<li><a id="modeling_makeup" href="#">化妆造型<br/><span>ModelingMakeup</span></a></li>
<li><a id="jewellery" href="#">精美饰品<br/><span>Jewellery</span></a></li>
<li><a id="wedding_dress" href="#">婚纱礼服<br/><span>WeddingDress</span></a></li>
<li><a id="service" href="#">服务价格<br/><span>Service</span></a></li>
<li><a id="contactme" href="#">联系我们<br/><span>ContactMe</span></a></li>
<li><a id="aboutme" href="#">公司简介<br/><span>CompanyInfo</span></a></li>
</ul>
</div>
</div>
3 style.css:
body {
color:#ffffff;
font-family:arial,helvetica,sans-serif;
font-size:12px;
background-color:#333333;
}
#main_container {
height:auto;
margin:auto;
padding:0;
width:821px;
}
#header {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/header_bg.gif) no-repeat scroll center top;
height:135px;
margin:0;
padding:0;
width:821px;
background-color:#000000;
}
.logo {
padding:30px;
}
.menu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/menu_bg.gif) no-repeat scroll left center;
margin:0;
width:821px;
}
.menu ul{ padding:0px; margin:0 auto;}
.menu ul li {
text-align:center;
margin-right:4px;
display:inline;
float:left;
height:48px;
line-height:48px;
}
.menu ul li a{
width:105px;
text-decoration:none;
display:block;
color:#FFFFFF;
margin-left:5px;
line-height:16px;
height:40px;
padding-top:10px;
}
.menu ul li a span{
padding:0px; margin:0 auto;
}
.menu ul li a:hover{
color:#990000;
background-color:#2F282D;
}
.center_content {
background-color:#E9E5E2;
clear:both;
height:auto;
padding:25px 0 30px;
width:821px;
}