html之--------导航在右边的纵向选项卡...
时间：2010-08-12 来源：shlichanglong
导航一:导航在右侧，导航用<dt>，导航内容用<li>采用div+css
----------------------------------------------------------------------------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style>
dl {
position:absolute;
width:270px;
border:10px solid #eee;
}
dd {
margin:0;
width:270px;
overflow:hidden;
}
dt {
position:absolute;
right:1px;
}
ul {
margin:0;
padding:0;
width:260px;
list-style:none;
background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;
border:1px solid #ccc
}
#b {
background-position:75% center
}
#c {
background-position:75% 86%
}
li {
width:255px;
font:12px/27px "宋体",sans-serif;
white-space:nowrap;
overflow:hidden;
}
dt a {
display:block;
margin:1px;
width:70px;
text-align:center;
font:700 12px/55px "宋体",sans-serif;
color:#fff;
text-decoration:none;
background:#666;
}
dt a:hover {
background:orange
}
</style>
<head/>
<body>
<dl>
<dt><a href="#a" title="">一个好孩子</a><a href="#b" title="">科比入党了</a><a href="#c" title="">失忆的猪猪</a></dt>
<dd>
<ul id="a">
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
</ul>
<ul id="b">
<li><marquee behavior="alternate">·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></marquee></li>
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
</ul>
<ul id="c">
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
</ul>
</dd>
</dl>
</body>
</html>
导航二:导航在左侧，导航用<li>，导航内容用<li>采用div+css
-----------------------------------------------------------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title></title>
<style type="text/css">
*{font-size:12px;margin:0;padding:0;}
#dreamdujsexe{width:748px; overflow:hidden; border:1px #cccbc9 solid; line-margin:2em;}
ul{list-style-type:none;}
.topADL4{float:left; width:257px;}
.topADTabs{width:22px; float:left; color:#494d50; padding-top:1px;}
.topADTabs li{width:131px; padding:9px 0 0 0; border:1px #fff solid; border-top:none; border-left:none; vertical-align:middle; line- text-align:center; background:#e7edf9; cursor:pointer;}
.topADTabs .topADTabsOn{width:131px; background:url() no-repeat; padding:9px 0 0 3px; border-left:1px #fff solid; text-align:left; cursor:pointer;}
.topADTabsCon{width:115px; float:left; text-align:left; padding:4px 0 0 14px;}
.topADTabsCon li{line- overflow:hidden;}
</style>
<script language="javascript" type="text/javascript">
function Show_topADMenu(topadid_num,topadnum){
for(var i=0;i<4;i++){ document.getElementById("topadcontent_"+topadid_num+i).style.display="none";}
for(var i=0;i<4;i++){document.getElementById("topadmenu_"+topadid_num+i).className="";}
document.getElementById("topadmenu_"+topadid_num+topadnum).className="topADTabsOn";
document.getElementById("topadcontent_"+topadid_num+topadnum).style.display="block";
}
</script>
</head>
<body>
<div class="dreamdu"><div id="dreamdujsexe">
<div class="topADL4">
<div class="topADTabs">
<ul>
<li id="topadmenu_10" onmouseover="setTimeout('Show_topADMenu(1,0)',200);" class="topADTabsOn">内容</li>
<li id="topadmenu_11" onmouseover="setTimeout('Show_topADMenu(1,1)',200);">表现</li>
<li id="topadmenu_12" onmouseover="setTimeout('Show_topADMenu(1,2)',200);">行为</li>
<li id="topadmenu_13" onmouseover="setTimeout('Show_topADMenu(1,3)',200);">代码</li>
</ul>
</div>
<div class="topADTabsCon" id="topadcontent_10">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="topADTabsCon" id="topadcontent_11" style="display:none;">
<ul>
<li>line-height属性</li>
</ul>
</div>
<div class="topADTabsCon" id="topadcontent_12" style="display:none;">
<ul>
<li>setTimeout函数</li>
<li>onmouseover函数</li>
<li>getElementById函数</li>
<li>className属性</li>
<li>display属性</li>
<li>for循环</li>
<li>js自定义函数</li>
</ul>
</div>
<div class="topADTabsCon" id="topadcontent_13" style="display:none;">
<ul>
<li>setTimeout函数</li>
<li>onmouseover函数</li>
<li>getElementById函数</li>
<li>className属性</li>
</ul>
</div>
</div>
</div>
</body>
</html>
相关阅读 更多 +
