一个漂亮的css导航

最新推荐文章于 2024-04-29 19:48:40 发布

最新推荐文章于 2024-04-29 19:48:40 发布 · 131 阅读

文章标签：

#CSS #HTML

css javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个具体的网页头部布局案例，使用HTML与CSS实现，并详细展示了各元素的样式设置，如菜单项的交互效果等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}