html水平导航栏代码（html语言导航栏初始显示英文，鼠标移动上去显示中文代码写法！）

本文目录

• html语言导航栏初始显示英文，鼠标移动上去显示中文代码写法！
• html下拉导航栏代码
• 我用html做了一个导航栏，代码如下：
• 用html制作导航条按钮的代码
• 网页导航栏制作：如何为网页添加导航栏

html语言导航栏初始显示英文，鼠标移动上去显示中文代码写法！

1.在《a》标签中添加两个属性，如下
《a href="http://www.hbadesign.com/portfolio/" class="selected" cn="服务" en="Services"》
然后再对a添加两个事件，mouseover和mouseout，mouseover中将a标签当中的文字替换成
cn的属性值，mourseout则替换成en的属性值;
2.不知道有没有用jquery，如果有的话可以使用事件代理机制
$("#nav li a").live(’mourseover’, function(){文字替换操作});
$("#nav li a").live(’mourseout’, function(){文字替换操作});
3.如果没有jquery的话那最方便的做法就是直接在标签中添加onmourseover,onmouseout
ok?够明白么

html下拉导航栏代码

这个是用JS实现的。你百度一下，JS实现二级导航源码就有了。

《!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=gb2312" /》
《title》简洁的纯CSS下拉菜单代码《/title》
《style》
#sddm
{margin: 0 auto;
padding: 0;
z-index: 30;
background-color:#F4F4F4;
width: 480px;
height:23px;}
#sddm li
{margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 12px arial}
#sddm li a
{display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{background: #49A3FF}
#sddm div
{position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#sddm div a
{position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 12px arial}
#sddm div a:hover
{background: #49A3FF;
color: #FFF}
《/style》
《!-- dd menu --》
《script type="text/javascript"》
《!--
var timeout = 100;
var closetimer = 10;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = ’hidden’;
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = ’visible’;
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = ’hidden’;
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose; 
// --》
《/script》
《/head》
《body style="text-align:center"》
《ul id="sddm"》
《li》《a href="#" onmouseover="mopen(’m1’)" onmouseout="mclosetime()"》Home《/a》
《div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"》
《a href="#"》HTML DropDown《/a》
《a href="#"》DHTML DropDown menu《/a》
《a href="#"》JavaScript DropDown《/a》
《a href="#"》DropDown Menu《/a》
《a href="#"》CSS DropDown《/a》
《/div》
《/li》
《li》《a href="#" onmouseover="mopen(’m2’)" onmouseout="mclosetime()"》Download《/a》
《div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"》
《a href="#"》ASP Dropdown《/a》
《a href="#"》Pulldown menu《/a》
《a href="#"》AJAX dropdown《/a》
《a href="#"》DIV dropdown《/a》
《/div》
《/li》
《li》《a href="#" onmouseover="mopen(’m3’)" onmouseout="mclosetime()"》Order《/a》
《div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"》
《a href="#"》Visa Credit Card《/a》
《a href="#"》Paypal《/a》
《/div》
《/li》
《li》《a href="#" onmouseover="mopen(’m4’)" onmouseout="mclosetime()"》Help《/a》
《div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"》
《a href="#"》Download Help File《/a》
《a href="#"》Read online《/a》
《/div》
《/li》
《li》《a href="#" onmouseover="mopen(’m5’)" onmouseout="mclosetime()"》Contact《/a》
《div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"》
《a href="#"》E-mail《/a》
《a href="#"》Submit Request Form《/a》
《a href="http://www.codefans.net/" target="_blank"》codefans.net《/a》
《/div》
《/li》
《/ul》
《/body》
《/html》

我用html做了一个导航栏，代码如下：

ul的父亲是div啊，你把div的内左边内边矩设为0，padding-left：0；试试。

用html制作导航条按钮的代码

《style type="text/css"》
#daohang{ width:900px;}
#daohang ul{ list-style:none;}
#daohang ul li{ width:100px; display:block; background:#999999; float:left; text-align:center}
#daohang ul li:hover{}
#daohang ul li a{text-decoration:none; display:block;}
#daohang ul li a:hover{ background:#FF0000; color:#000000;text-decoration:none}
《/style》
《div id="daohang"》
《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》
《/ul》
《/div》
看看行不行

网页导航栏制作：如何为网页添加导航栏

制作一个放导航栏的容器

制作一个放导航栏的容器，容器名为nav，容器宽为1000px，高为30px，背景颜

色为灰色，相关代码如下：
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
《div id="nav"》《/div》

显示结果

在浏览器中显示的结果为下图所示：

在容器中放入一些导航栏

导航栏代码如下:
《ul》
《li》模块一《/li》
《li》模块二《/li》
《li》模块三《/li》
《li》模块四《/li》
《li》模块五《/li》
《li》模块六《/li》
《/ul》

为导航栏添加一些属性

《style type="text/css"》
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
#nav ul
{
width:960px;
height:35px;

}
#nav ul li
{
float:left;
width:100px;
float:left;
list-style:none;
background:yellow;
line-height:35px;
}

《/style》

导航栏在浏览器页面的显示结果如下图所示：