A. HTML5怎么做导航栏
建议使用FF,Safari,举个例子:<! html><html> <head> <title>HTML5+CSS3+javaScript</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <style type="text/css"> body { behavior: url(ie-css3.htc); } * {margin:0 auto;padding:0;} body {font-size:13px;font-family:Arial;} ul li {list-style:none;} #menu { width:982px; height:35px; margin-top:20px;display:block; background: #e3e3e3; background: -moz-linear-gradient(top, #ccc, #999); background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); -moz-box-shadow: 1px 1px 3px #333; -webkit-box-shadow: 1px 1px 3px #333; box-shadow: 1px 1px 3px #333; -webkit-border-top-left-radius:4px;; -webkit-border-top-right-radius:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -o-border-radius:4px; -khtml-border-radius:4px; text-shadow: 0 1px 0 white; } #menu ul { margin-left:0; } #menu ul li { display:inline; } #menu ul li a:link, a:visited { text-align:center;float:left;width:6.8em;text-decoration:none;padding:7.5px 0.75em;font-size:16px;font-weight:bold;margin-top:0px;border-right:1px solid #ccc;color: #454545; } #menu ul li a:hover { text-decoration:none; background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#ccc)); background: -moz-linear-gradient(top, #333, #ccc); -webkit-background-size:0 35px; color: #ddd; text-shadow: 0 1px 0 black; } .text { border:1px solid gray;width:150px;height:17px;position:relative;top:8px;left:13px;font-family:Arial; -webkit-border-top-left-radius:90px;; -webkit-border-top-right-radius:90px; -moz-border-radius-topleft:90px; -moz-border-radius-topright:90px; -webkit-border-bottom-left-radius:90px; -webkit-border-bottom-right-radius:90px; -moz-border-radius-bottomleft:90px; -moz-border-radius-bottomright:90px; -o-border-radius:90px; -khtml-border-radius:90px; } </style> <script language="JavaScript" type="text/javascript"> (function() { if(!0) return; var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=0,length=e.length; while(i<length) { document.createElement_x(e[i++]) } })(); </script> </head><body> <menu id="menu"><form action="index.php" method="get"> <ul> <li><a href="#" title="HomePage">HomePage</a></li> <li><a href="#" title="Introuce">Introuce</a></li> <li><a href="#" title="Procts">Procts</a></li> <li><a href="#" title="My album">My album</a></li> <li><a href="#" title="Shopping">Shopping</a></li> <li><a href="#" title="Contact our">Contact our</a></li> </ul> <input type="search" class="text" value="search…" /></form> </menu><body>
B. 你好。我做导航,鼠标经过下面加一条横线,css代码可以给我下吗。
你最好把你现有的代码发上来?因为这样好有针对性啊,我写完了你未必能用上啊。因为我不知道你用的是文字型导航还是图片型导航还是结合型,不同的应用有不同的方法——————————————下面的这个是专门针对导航采用了A链接的:<style type="text/css">.nav{ /*这里是你导航内文字的CSS*/ text-decoration:none;}.nav:hover, .nav.select{ text-decoration:underline;}</style><body><div><a class="nav" href="#">第一个</a><a class="nav" href="#">第二个</a><a class="nav" href="#">第三个</a><a class="nav" href="#">第四个</a><a class="nav" href="#">第五个</a></div></body>____________下面的针对导航采用了非A链接的文字(因为考虑到IE6兼容的问题,才引入了js):<script type="">window.onload = function(){var myNav = document.getElementById("divNav").getElementsByTagName("span");for(var i=0; i<myNav.length; i++){ myNav[i].onmouseover = function(){this.style.textDecoration = 'underline';} myNav[i].onmouseout = function(){this.style.textDecoration = 'none';}}}</script><style type="text/css">#divNav span{ /*这里是你导航内文字的CSS*/ cursor:pointer;}</style><body><div id="divNav"><span>第一个</span><span>第二个</span><span>第三个</span><span>第四个</span><span>第五个</span></div></body>_________________以上用法只针对文本型导航,如果想使用图片型,就麻烦多了,用法和灵活性也更多,所以得看到你的程序才能有针对性地回答。.
C. html如何制作横线导航菜单
可以用position:fixed来固定div至网页头部,这样就是导航菜单了
D. 如何让导航栏的字下面显示带颜色的横线,鼠标放上时突出显示(html知识)
导航栏下面横线可以通过css样式进行设置,属性为text-decorationg:underline;
上述的方式设置的效果中位子颜色和下划线的颜色是一样的,如果想实现文字和下划线的颜色不一样,可以采用如下方法进行调整。
<a href="javascript:;" style="color:#333;"><span style="color:#f00;">我是文字<span></a>
第3步中的文字嵌套在一个a链接中,实际下划线是使用的a链接的样式。
这样就可以到达两者颜色不一样的效果了。
E. 利用javascript编写一个简单的网站导航菜单
<html> <head> </head> <script language="javascript">function show(id){ var dd=document.getElementById(id); dd.style.backgroundColor='#996633'; if(id=="1") { showid=document.getElementById("11"); showid.style.visibility="visible" } if(id=="2") { showid=document.getElementById("12"); showid.style.visibility="visible" } if(id=="3") { showid=document.getElementById("13"); showid.style.visibility="visible" }}function hidden(id){ var dd=document.getElementById(id); dd.style.backgroundColor='#ffffff'; if(id=="1") { showid=document.getElementById("11"); showid.style.visibility="hidden" } if(id=="2") { showid=document.getElementById("12"); showid.style.visibility="hidden" } if(id=="3") { showid=document.getElementById("13"); showid.style.visibility="hidden" }}</script><body><div id='1' style="float:left;width:80;" align="center" onMouseOver="show('1')" onMouseOut="hidden('1')">首页 </div><div id="2" style="float:left;width:80" onMouseOver="show('2')" align="center" onMouseOut="hidden('2')">公司简介 </div><div id='3' style="width:80" onMouseOver="show('3')" align="center" onMouseOut="hidden('3')">客户</div><div id='11' onMouseOver="show('1')" onMouseOut="hidden('1')" style="position:absolute;background-color:#999999; width:80;visibility:hidden;float:left " ><ul><li>aaa</li><li>bbb</li><li>ccc</li></ul></div><div id='12' onMouseOver="show('2')" onMouseOut="hidden('2')" style="left:90;position:absolute;background-color:#999999;width:80;visibility:hidden;float:left"><ul><li>ddd</li><li>eeee</li><li>fff</li></ul></div><div id='13' onMouseOver="show('3')" onMouseOut="hidden('3')" style="left:173;position:absolute;background-color:#999999;width:80;visibility:hidden;"><ul><li>iii</li><li>fff</li><li>kkk</li></ul></div><hr></body></html>
F. 谁有谷歌广告代码放在网页里用的,要那种横条的代码,可以根据用户浏览器缓存显示广告内容的。
这个事需要付费做推广的,谷歌不可能会让这种代码存在的。
G. jQuery实现的导航动画效果(附demo源码)
本文实例讲述了jQuery实现的导航动画效果。分享给大家供大家参考,具体如下:经常在网上看到的,鼠标在导航上移动时,导航底部的横条会自动移动到鼠标悬浮的导航项上。效果如下图:利用jquery的animate函数,很好实现。代码很简单!代码如下:<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>测试</title><scriptsrc="jquery-1.9.1.min.js"></script></head><body><divclass="nav"style="margin:100pxauto;width:960px;"><aclass="active"href="#">首页</a><ahref="#">产品</a><ahref="#">新闻中心</a><ahref="#">关于我们</a><ahref="#">联系我们</a><ahref="#">首页</a><ahref="#">首页</a><divclass="line"></div></div><style>.nav{position:relative;}.nava{padding:10px20px;border-bottom:solid3px#fff;text-decoration:none;color:#666;}.nava:hover{color:#66f;}.nav.active,.nav.active:hover{color:#f33;}.nav.line{position:absolute;border-top:solid2pxred;width:0;left:0;top:0;}</style><script>functionnavLine(o,bo){varx=''+(o.position().top+o.outerHeight()-2)+'px';vary=''+o.position().left+'px';varw=''+o.outerWidth()+'px';varh='2px';$('.nav.line').stop();if(bo){$('.nav.line').css({width:w,height:h,top:x,left:y});}else{$('.nav.line').animate({width:w,height:h,top:x,left:y});}}$(function(){navLine($('.nav.active'),true);$('.nava').hover(function(){navLine($(this));},function(){navLine($('.nav.active'));});});</script></body></html>完整实例代码点击此处本站下载。更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》希望本文所述对大家jQuery程序设计有所帮助。
H. 网页上面的那种无限长的横条导航条怎么做的啊
很简单
<divstyle="height:30px;background:#000;"></div>
放在最外层,不固定宽度设置背景
I. 一个网站制作问题 现在在做的这个网站要求始终在页面的底部固定显示一个横条,不管移动到什么位置
先设置z-index:10000,这个数字尽量大,是设置显示图层,让横条显示在最前面的图层,然后固定横条 position:fixed;bottom:0px; width: auto; height:100px;当然宽高随便设置