网页设计中怎么做滚动导航条_网站首页导航栏下面的滚动公告栏如何制作

1、HTML5如何制作特效导航栏？

鼠标移上去时，改变li元素的大小、背景色、文字颜色等

代码如下：

<!DOCTYPE html>

<html>

<head>

ul {

margin: 0;

padding: 0;

}

ul li {

list-style: none;

width: 130px;

height: 50px;

text-align: center;

line-height: 50px;

font-size: 20px;

position: relative;

margin-left: 10px;

}

div {

width: 150px;

height: 500px;

border: 1px dashed #000000;

text-align: center;

}

.active {

background-color: green;

color: #fff;

}

.show {

width: 2px;

height: 20px;

position: absolute;

left: 10px;

top: 15px;

background-color: white;

}

.li1 {

left: 20px;

border-radius: 5px;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

var oLi = document.getElementsByTagName("li");

var oSpan = document.getElementsByTagName("span");

for (var i = 0; i < oLi.length; i++) {

oLi[i].onmouseover = function() {

var sp = this.childNodes[0];

console.log(sp);

for (var i = 0; i < oLi.length; i++) {

oLi[i].setAttribute("class", "");

oSpan[i].setAttribute("class", "");

}

this.setAttribute("class", "active li1");

sp.setAttribute("class", "show");

}

oLi[i].onmouseout = function() {

for (var i = 0; i < oLi.length; i++) {

oLi[i].setAttribute("class", "");

}

</script>

</body>

</html>

这应该是你要的效果

2、网页导航条怎么做?

可以用div+css做的

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(/uploadfile/200806/17/66191858519.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(/uploadfile/200806/17/66191858519.gif) left -42px; color:#ffffff;}
#nav li a#current { background:url(/uploadfile/200806/17/66191858519.gif) left -84px; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="/index.asp">主页</a></li>
<li><a id="current" href="/Sort/List_4.html">DIV+CSS教程</a></li>
<li><a href="/Sort/List_5.html">常用代码</a></li>
<li><a href="/Sort/List_6.html">水晶图标</a></li>
<li><a href="/Sort/List_7.html">幻灯图片</a></li>
<li><a href="/Sort/List_10.html">软件下载</a></li>
<li><a href="/css2/">CSS2.0实用手册</a></li>
</ul>
</body>
</html>
文章出处：标准之路(http://www.aa25.cn/div_css/289.shtml)

3、网站首页导航栏下面的滚动公告栏如何制作

4、滑动门导航栏在html中怎么制作

不知道你说的是不是，很像在一些网站侧边栏上看到的“分享到”，碰一下移出来，鼠标移开又回去。先写了再说吧....
<style>
#share{
width: 150px;
height: 200px;
background-color: green;
position: absolute;
left:-150px;
}
#share span{
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
background-color: yellow;
right: -20px;
top: 70px;
}
</style>

<div id="share">
<span>分享到</span>
</div>
<script>
var oDiv6=document.getElementById("share");
var timer4=null;
oDiv6.onmouseover=function()
{
startshare(0);
}
oDiv6.onmouseout=function()
{
startshare(-150);
}
function startshare(iTarget)
{
var oDiv6=document.getElementById("share");
clearInterval(timer4);

timer4=setInterval(function()
{
var speed1=0;
if (oDiv6.offsetLeft>iTarget)
{
speed1=-10;
}
else
{
speed1=10;
}

if (oDiv6.offsetLeft==iTarget)
{
clearInterval(timer4);
}
else
{
oDiv6.style.left=oDiv6.offsetLeft+speed1+'px';
}
},30)
}

</script>

我这里是鼠标移入移出有效果，你可以改成点击某个元素有效果，等等等等

5、网页设计中,怎么做成上面是导航条,下面是内容....... （我要简单的代码，让我做参考）

没明白你什么意思！你是说就像百度知道首页一样，导航条在上面，导航条的下面也有内容？还是内容在导航条里面，鼠标放在导航条上自动弹出导航内容的效果？

6、网页中的导航条怎样简单的制作出来？？

不麻烦啊。。。。css文本导航条，你多去学学就很简单啊。。。你加我qq，我传个给你，这个里面有很多精美的导航。。。 //css代码 body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } img { border: none; } /*- Menu Tabs 1--------------------------- */ #tabs1 { float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url("images/tableft1.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url("images/tabright1.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } //图片 //html代码 <h2>Tab Menu 1</h2> <div id="tabs1"> <ul> <li><a href="#" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> <li><a href="#" title="Link 5"><span>Link 5</span></a></li> <li><a href="#" title="Link 6"><span>Link 6</span></a></li> <li><a href="#" title="Link 7"><span>Link 7</span></a></li> </ul> </div> <br /><br />
记得采纳啊

7、在网页中如何制作左边不动而中间内容可以上下动的导航条？？？

这个可移动的导航条使用相对定位，

position: absolute;
z-index: 100;

在初始时确保它出现在你希望的位置

然后使用js控制它的位置

function scl(DivId) {
        var Div = $(DivId);
        $(DivId).style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - $(DivId).offsetHeight) / 2) + "px
";
        $(DivId).style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - $(DivId).offsetWidth) / 2) + "px
";

//alert($(DivId).style.top);

    }

当页面滚动时触发事件，去动态修改div的定位

window.onscroll = scl(DivId);
window.onresize = scl(DivId);

window.onload = scl(DivId);

8、网页设计导航条

下面的代码，你去看看，不好用再说。
<!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 type="text/css">

</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品展示</a>
<div>
<ul>
<li><a href="#">产品1一</a></li>
<li><a href="#">产品2一</a></li>
<li><a href="#">产品3一</a></li>
<li><a href="#">产品4一</a></li>
<li><a href="#">产品5一</a></li>
<li><a href="#">产品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">联系电话</a>
<div>
<ul>
<li><a href="#">产品1一</a></li>
<li><a href="#">产品2一</a></li>
<li><a href="#">产品3一</a></li>
<li><a href="#">产品4一</a></li>
<li><a href="#">产品5一</a></li>
<li><a href="#">产品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">公司介绍</a></li>
</ul>
</div>

</body>
</html>

导航:首页 > 万维百科 > 网页设计中怎么做滚动导航条

网页设计中怎么做滚动导航条

与网页设计中怎么做滚动导航条相关的知识