html导航怎么写

1.html导航条代码怎么写ttps://wenwen.sogou.com/login/redirect?url=1%2FDTD%2Fxhtml1-transitional.dtd%22%3E" target="_blank">1/DTD/xhtml1-transitional.dtd">
">
#menu {
display: inline-block;
width: 935px;
background-image: url(images/menu.gif);
margin-top: 1px;
color: #0033CC;
}
#menu ul {
list-style: none;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
#menu ul li {
float: left;
font-size: 14px;
font-weight: normal;
margin-top: 0;
margin-right: 26px;
margin-bottom: 0;
margin-left: 26px;
padding-top: 4px;
padding-bottom: 4px;
}
.menutype {
font-family: "宋体", "新宋体", "黑体";
font-size: 15px;
color: #018ee8;
text-decoration: none;
}
2.用html和css怎么写这个导航啊,求大神帮我<div class="menu">
<ul>
<li class="cur"><a href="http://www.xuexi88.com/zhishi/#">HOME</a></li>
【html导航怎么写】<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>;大致思路就是这样,你自己在我代码的基础上扩展就好
3.html导航栏,这种类型的怎么写这个只是一个图标字体,一般要结合js点击或者经过触发事件 。
代码: <meta charset='utf-8' /> HTML调试 <link rel='stylesheet' type='text/css' href='http://www.xuexi88.com/zhishi/css/zui.css' /> <style type="text/css"> body, div, ul, li { margin: 0; padding: 0; } body { font-family: "微软雅黑", Arial, Helvetica, sans-serif; color: #333333; line-height: 25px; font-size: 14px; } a:link, a:visited { text-decoration: none; color: #333333; } a:hover { text-decoration: underline; color: #08A5E0; text-decoration: none; } ul, ul li { list-style-type: none; } .cl { zoom: 1; } .navbg { height: 40px; width: 100%; background: #08A5E0; box-shadow: 1px 1px 7px #999; position: absolute; z-index: 99; left: 0; } #navul li { float: left; margin-right: 1px; width: 100px; height: 40px; position: relative; text-align: center; line-height: 40px; } #navul li.navhome { text-align: left; padding: 0 0px 0 40px; width: 100px; } #navul li a:link, #navul li a:visited { color: #FFFFFF; } #navul li ul { display: none; position: absolute; z-index: 10000; top: 38px; left: -1px; background: #006D96; border: #004E6C 1px solid; border-bottom: none; } #navul li ul li { display: block; width: 98px; float: none; margin-right: 0px; height: 28px; position: relative; line-height: 28px; border-bottom: #004E6C 1px solid; font-size: 12px; } #navul li.navmoon { background: #006D96; border: #004E6C 1px solid; width: 98px; height: 38px; line-height: 38px; } #navul li.navmoon a { color: #FFFFFF; } #navul li.navhome a:hover { color: #FCFF00; } #navul li.navmoon ul { display: block; } #navul li.navmoon ul a { display: block; width: 98px; height: 28px; line-height: 28px; } #navul li.navmoon ul a:hover { background: #000000; } </style><body>