css怎么写导航

1. 用html和css怎么写这个导航啊,求大神帮我 <div class="menu">
<ul>
<li class="cur"><a href="http://www.xuexi88.com/zhishi/#">HOME</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">ABOUT</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">SERVICES</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">CLIENTS</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">PORTFOLIO</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">CONTACTS</a></li>
</ul>
</div>
<style>
.menu ul {text-align:justify;font-size:0;letter-spacing:-4;height:69px}
.menu ul:after {display:inline-block;width:100%;height:\20;overflow:hidden}
.menu ul li {display:inline-block;line-height:69px}
.menu ul li.cur a {color:#9cd249}
.menu ul li a {display:inline-block;font-size:22px;font-family:BebasNeue;color:#fff;padding:0 20px}
.menu ul li a:hover {color:#9cd249}
</style>;大致思路就是这样,你自己在我代码的基础上扩展就好
2. div+css怎么写这个导航 用CSS的滑动门技术可以做
步骤:
1.
素材:找背景图片(图片的width与height 要与ul的一致)
2.
代码:<style type="text/css">
/*确定菜单的整体位置*/
body{margin-top:20px; margin:0;}
/* 设置ul的样式*/
ul.menu{ font-family:Arial;
font-size:14px;
background:url(滑动门技术/hdm.jpg);
padding:0 0 0 8px;
list-style:none;
height:32px;/*背景图片的高*/
width:400px;/*背景图片的宽*/
}
.menu li {float:left;}/*设置#menu中的li属性。li原本的块级元素,设置向左浮动,这样使得各列表横向排列*/
ul li a {display:block;
line-height:32px;
color:#ddd;
text-decoration: none;
padding: 0 0 0 14px;
}
li strong { display:block;}
li a:hover strong{ color:#fff; background:url(滑动门技术/Lt_hdm.jpg) ; background-color:#999999;}
</style>
</head>
<body>
<ul class="menu">
<li><a href="http://www.xuexi88.com/zhishi/" ><strong>CSS</strong></a></li>
【css怎么写导航】<li><a href="http://www.xuexi88.com/zhishi/#"><strong>HTML</strong></a></li>
<li><a href="http://www.xuexi88.com/zhishi/#"><strong>Dreamweaver</strong></a></li>
<li><a href="http://www.xuexi88.com/zhishi/#"><strong>Photoshop</strong></a></li>
<li><a href="http://www.xuexi88.com/zhishi/#"><strong>Home</strong></a></li>
</ul>
</body>
3. dw css代码怎么写啊 <html>
<head>
<title>;简单的css导航</title>
<style>
#nav{ height:30px; width:500px;margin-left:350px;}
#nav li{float:left; list-style-type:none;}
#nav li a{text-decoration:none; color:#000; margin-left:10px; line-height:20px; display:block; width:65px; height:20px;
background-color:#0F3; text-align:center;
}
#nav li a:hover{ color:#FF0 }
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.xuexi88.com/zhishi/#">;首页</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;产品中心</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;新闻中心</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;客服代表</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;网站地图</a></li>