網頁設計中怎麼做滾動導航條_網站首頁導航欄下面的滾動公告欄如何製作

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>

導航:首頁 > 萬維百科 > 網頁設計中怎麼做滾動導航條

網頁設計中怎麼做滾動導航條

與網頁設計中怎麼做滾動導航條相關的知識