1、用CSS样式制作的网页二级导航!
<style> body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#BD06B4; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; } </style> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> </ul> </div>
采纳哦
2、网页中的二级导航怎么辨认呢?
二级导航识别方法可以参考网页链接
如果是首页下面的一个就是二级导航
或者在面包屑导航处也可以看到
3、网页制作中,如何做二级菜单(就是鼠标滑过去才有显示)
你说的是把鼠标搁置在某个控件上停留一会,然后弹出快捷菜单吗?
其实我无形中已经告诉你办法了,鼠标事件选择“载入”或者“显示”,事件代码就是“弹出快捷菜单”并写上快捷菜单显示内容
4、dw设计页面,打开已下载的网页,有一级导航,二级导航,但是在设计页面,二级导航不显示,怎么对二级导
可以把你的页面图截出来看看,可以在代码里面把二级导航的内容删除的
5、如何利用纯CSS制作二级或多级导航菜单
<style>
<!--
* {margin:0px;padding:0px;}
body {overflow:scroll;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;}
a {font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;text-decoration:none;}
.menu {position:relative;width:1000px;background-color:#360;}
.menu ul {list-style-type:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:22px;border:1px solid #000;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;}
.menu a:hover{background:#690;color:#000;}
.menu ul ul,
.menu ul ul li {clear:both;text-align:left;}
.menu ul ul li a{display:block;width:100px;height:15px;}
.menu ul ul li a:hover{background:#690;}
-->
</style>
<body>
<div class="menu">
<ul>
<li><a href="#">一级菜单_01
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">二级菜单_01</a></li>
<li><a href="#">二级菜单_02</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
以上是代码
将<a>作为块处理,结合包含选择符,这就做出效果来了。
另外一提,各个浏览器的解释是不一样,所以就必须解决这些臭虫,利用Hack技术。这个我不多说了,你自己百度“hack”就知道了。
以上是原理。
你要具体说代码的含义?自己对着css样式表手册看吧。
当然你也可以直接套用以上代码。
6、HTML中什么是二级菜单导航
举个例子吧,任意一本教科书里面,每一章算是一级导航菜单,那每一章里面的每一节就是二级导航菜单,每一节里面还可以有一段算是三级导航菜单,以此类推可以有N级导航菜单。每级菜单里面可以有div和table,dl,dt,dd等等。
7、div CSS 列表菜单 二级导航 二级菜单 网页设计师。最好给我代码。粘贴一下不就行了。就这点分了。
首先把display 属性的置设置为 :none; 做这个二级菜单 你要会javascript语言,就是当属标经过时把 display 属性的置设置为 :block; 就是当属标l离开时再把 display 属性的置设置为 :none; 给你一个代码参考一下:
<html >
<head>
<script>
window.onload=function()
{
var obb=document.getElementById('bb');
var obc=document.getElementById('bc');
var obd=document.getElementById('bd');
var obe=document.getElementById('be');
obb.onmouseover=bbv;
obb.onmouseout=bbu;
obc.onmouseover=bcv;
obc.onmouseout=bcu;
obd.onmouseover=bdv;
obd.onmouseout=b;
obe.onmouseover=bev;
obe.onmouseout=beu;
}
function bbv()
{
var ofb=document.getElementById('fb');
ofb.style.display='block';
}
function bbu()
{
var ofb=document.getElementById('fb');
ofb.style.display='none';
}
function bcv()
{
var ofc=document.getElementById('fc');
ofc.style.display='block';
}
function bcu()
{
var ofc=document.getElementById('fc');
ofc.style.display='none';
}
function bdv()
{
var ofd=document.getElementById('fd');
ofd.style.display='block';
}
function b()
{
var ofd=document.getElementById('fd');
ofd.style.display='none';
}
function bev()
{
var ofe=document.getElementById('fe');
ofe.style.display='block';
}
function beu()
{
var ofe=document.getElementById('fe');
ofe.style.display='none';
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#fa ,#fb,#fc ,#fd,#fe{
list-style-type:none;
margin:0px;
padding:0px;
}
#fa{
width:100px;
}
#fa li{
padding:5px;
background:#FDC1E3;
border-bottom:#FFF solid 1px;
text-align:center;
}
#fb,#fc,#fd,#fe{
text-align:center;
width:100px;
height:120px;
border:#F00 solid 5px;
position:absolute;
left:110px;
top:10px;
padding-top:15px;
}
#fc{
border:#0FF solid 5px;
}
#fd{
border:#90C solid 5px;
}
#fe{
border:#9F3 solid 5px;
}
</style>
</head>
<body>
<div>
<ul id="fa">
<li id="bb">图书</li>
<li id="bc">电器</li>
<li id="bd">数码</li>
<li id="be">手机</li>
</ul>
<ul id="fb" style="display:none">
<li>图书</li>
</ul>
<ul id="fc" style="display:none">
<li>电器</li>
</ul>
<ul id="fd" style="display:none">
<li>数码</li>
</ul>
<ul id="fe" style="display:none">
<li>手机</li style="display:none">
</ul>
</div>
</body>
</html>
如果你不会javascript语言,还是先去了解一个javascript 再来做这个二级菜单吧
8、网页中主页导航的二级导航怎么做
当鼠标放上去出去二级菜单么?如果的是的话一般都是用javascript做的,要是这是你的专业就是这个建议你好好学学,毕竟这都是基础,要是你只是用用我这有现成的模版,改下标题就行,留邮箱发给你!
9、如何制作网页首页导航菜单显示二级菜单
<!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>无标题文档</title>
<style>
.sever{ margin-top:4px;}
.sever_menu{ width:213px; background:#99ABB9;}
.sever_menu a{ display:block; }
.sever_menu img{ *margin-bottom:-2px;}
.help_menu,.help_menu_main{ line-height:25px; }
.help_menu{ height:25px; background:#4AC5E8; border-bottom:1px solid #99ABB9;text-indent:57px;}
.help_menu a{ background:url(../images/help_arr.jpg) no-repeat 43px center;}
#sever_left .help_menu:hover a{ color:#fff;}
.help_menu .hover{ background:url(../images/help_hover_arr.jpg) no-repeat 43px center; color:#FFFFFF;}
.help_menu_main ul{ text-indent:63px;}
.help_menu_main ul li{ border-bottom:1px solid #B3BFCB;}
.help_menu_main ul li a{ color:#fff;}
</style>
<script>
// JavaScript Document
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>
<body>
<div class="sever">
<div class="sever_menu L" id="sever_left">
<img src="images/sever_help.jpg" />
<div class="help_menu"><a id="help1" onclick="setTab('help',1,9)" class="hover">新手上路</a></div>
<div id="con_help_1" class="help_menu_main">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help2" onclick="setTab('help',2,9)">如何销售</a></div>
<div id="con_help_2" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help3" onclick="setTab('help',3,9)">如何采购</a></div>
<div id="con_help_3" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help4" onclick="setTab('help',4,9)">交易安全</a></div>
<div id="con_help_4" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help5" onclick="setTab('help',5,9)">操作指南</a></div>
<div id="con_help_5" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help6" onclick="setTab('help',6,9)">商人通服务</a></div>
<div id="con_help_6" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help7" onclick="setTab('help',7,9)">商业资讯</a></div>
<div id="con_help_7" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help8" onclick="setTab('help',8,9)">展会帮助</a></div>
<div id="con_help_8" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help9" onclick="setTab('help',9,9)">广告帮助</a></div>
<div id="con_help_9" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
这个拿去参考一下吧~~