html下拉导航栏代码

html下拉导航栏代码,第1张

这个是用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>

这个直接右击打开选择记事本打开,把里面的改成你的就行了。如果是想简单方便的,建议你下载个 味多美网址导航的源码程序做站,那个程序按来路自动排行,自动审核,修改广告和管理网址都是直接在后台修改,特别方便。

第一种:打开一个网页后点击鼠标的 右键就会有"查看源文件", *** 作 鼠标右键--->查看源文件 即可d出一个记事本,而记事本内容就是此网页的html代码。

可能会碰到一些网页鼠标右键无反应或提出提示框,那是因为做网页的加入了JS代码来禁止用户查看源文件代码或复制网页内容,但是这种方法也没用,只有你稍微懂得以下第二种方法即可查看此网页的源代码源文件。

第二种:通过浏览器状态栏或工具栏中的点击 “查看”然后就用一项“查看源代码”,点击查看源代码即可查看此网页的源代码源文件。

在微软IE下 查看--->源文件 即可查看此网页代码在傲游浏览器下截图:

查看别人网页的源代码可以为我们制作网页时候有帮助,以后将介绍查看源代码更多方法及怎么运用到别人的源代码文件。

三、其它浏览器具体查看html网页源代码方法步骤   -   TOP

首先请打开您的网络浏览器,然后访问任何一个网页。

完成上述步骤后,您可以通过以下针对不同网络浏览器的简单步骤快速查看html网页源代码。

1)、Firefox浏览器,请按以下步骤 *** 作:

点击火狐firefox浏览器上方“工具(T)”菜单。

在下拉菜单中点击“Web 开发者”。

然后在下拉菜单中选择点击“页面源代码”,即可查看网页源代码。

2)、谷歌浏览器,请按以下步骤 *** 作:

点击广告浏览器,右上角“三横”控制图标

在下拉菜单点击“工具”

然后再点击“查看源代码”。

或直接谷歌浏览器中使用快捷键“Ctrl+U”即可查看被访网页源代码。

对于这些的话,新手朋友可以参考附件里面的知识学习下


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6155802.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存