|
一个简单的横向菜单，你可以根据需要修改尺寸，增加背景图效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> css菜单例子 - 一个简单的横向黑色菜单 </title>
<style type="text/css">
body{background:#616161;margin:0;padding:0;font-size:12px;color:#fff;}
a{color:#fff;}
/* menu [[ */
#mainnav{width:700px;height:29px;margin:0 auto;background:#171717;font-size:12px;border-bottom:1px solid #424243;}
#mainnav *{margin:0;padding:0;}
#mainnav ul{border-bottom:1px solid #000;}
#mainnav li{float:left;list-style:none;}
#mainnav li a{display:block;width:70px;height:29px;line-height:30px;color:#fff;text-decoration:none;text-align:center;}
#mainnav li a:hover{background:#666 url(http://www.div-css.com/d/x/menu-bg.gif) repeat-x;}
/* menu ]] */
.box{width:700px;margin:0 auto;}
.ft,
.hd{height:100px;background:#444;}
.bd{height:600px;background:#000;}
</style>
</head>
<body>
<div class="box hd">一个简单的横向菜单，你可以根据需要修改尺寸，增加背景图效果</div>
<!-- menu [[ -->
<div id="mainnav">
<ul>
<li><a href="?">公司简介</a></li>
<li><a href="?">最新资讯</a></li>
<li><a href="?">产品展示</a></li>
<li><a href="?">设计团队</a></li>
<li><a href="?">成功案例</a></li>
<li><a href="?">制服书籍</a></li>
<li><a href="?">人才招聘</a></li>
<li><a href="?">意见反馈</a></li>
<li><a href="?">联系我们</a></li>
<li><a href="?">返回首页</a></li>
</ul>
</div>
<!-- menu ]] -->
<div class="box bd"></div>
<div class="box ft">Web标准化 <a href="www.div-css.comhttp://www.div-css.com">www.div-css.com</a></div>
</body>
</html>
|
一共有 0 条评论