網站設計中導航欄不動_html導航欄不動內容動怎麼做在全都在同一個頁面

1、在網頁中如何製作左邊不動而中間內容可以上下動的導航條？？？

這個可移動的導航條使用相對定位，

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);

2、做網頁左邊的導航欄不動,右邊的內容動怎麼做,

你給的是內網地址，看不到
你可以使用框架結構做

3、html導航欄不動，內容動怎麼做在全都在同一個頁面

給導航欄設置position:fixed;top:0;就可以了~
例如：<div style="position:fixed;top:0;z-index:1000;"></div>

4、html5做網頁導航欄靜止在上面不動,但是下面內容會跑到導航下面怎麼解決

建議導航欄使用固定定位，position：fixed，或者就默認的static

5、dw cs6中做網站怎麼設置成左側導航欄滾動時不動只有右側內容上下滾動

如@suyie001所說，css中position：fixed屬性是可以實現題主的問題，但是在IE6下有Bug。

不考慮IE6的話，可以參考下面鏈接實現。

http://jingyan.baidu.com/article/4d58d541d54e879dd4e9c033.html

而圖片那種屬於左側固定菜單，右側自適應布局。

自適應布局在現在的布局中，很容易遇見，下面是在平時工作中對左邊固定，右邊自適應及左邊自適應，右邊固定布局的幾種方法的一些總結，希望能幫到你！

頁面布局如下：

一、左邊固定，右邊自適應的布局

1. 左邊左浮動，右邊加個overflow:hidden;

#lt{ float: left;width:200px; background: #ff0;}

#rt{ overflow: hidden; background: #f0f;}

2. 左邊左浮動，右邊加個margin-left;

#lt{ float: left; width:200px; background: #ff0;}

#rt{ margin-left: 200px; background: #f0f;}

3. 左邊絕對定位，右邊加個margin-left;

#lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}

#rt{ margin-left: 200px; background: #f0f;}

4. 左右兩邊絕對定位，右邊加個width,top,left,right

#lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}

#rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}

效果圖如下：

二、右邊固定，左邊自適應的布局

1. 左邊左浮動，margin-left負值,右邊右浮動;

#lt{float:left; width:100%;background: #00f;margin-right: -200px;}

#rt{float: right; width: 200px;background: #ff0;}

2. 右邊絕對定位，左邊margin-right;

#lt{margin-right:200px; background: #00f;}

#rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;}

3. 左右兩邊絕對定位，左邊加個width,top,left,right

#lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;}

#rt{ position: absolute; top:0; left:200px; width:200px; background: #ff0;}

效果圖如下：

上面的方法在各瀏覽器的測試中，都能兼容！

6、HTML5如何才能讓導航欄固定頂部不動，且！且！且！不遮擋住下面的DIV？？？

HTML5讓導航欄固定頂部不動且不遮擋住下面的DIV方法如下：

1，首先在html中，添加良好的導航內容。

2，後者是網頁的具體內容，這里的代碼比較簡單。

3，在樣式中，首先在菜單中定義一些樣式。

4，此時，在運行頁面時，滾動條滾動後導航將消失。

5，為了將導航欄固定在頂部，可以添加樣式位置：固定；最高：0;在導航容器中，鍵是第一個樣式，因此其位置是固定的。

6，此時，頁面開始運行，頁面向上滾動，並且導航始終在頂部。

7、如何能在切換網頁時使網頁導航菜單固定不動

使用框架或JavaScript的innerHTML。
具體框架可以瀏覽這個http://.baidu.com/q?word=%CD%F8%D2%B3%BF%F2%BC%DC&lm=0&fr=search&ct=17&pn=0&tn=ikaslist&rn=10
關於js的innerHTML可以訪問這個：http://.baidu.com/q?word=innerHTML&lm=0&fr=search&ct=17&pn=0&tn=ikaslist&rn=10

8、網頁設計導航欄問題

這段代碼比較經典的下拉菜單，不過沒有美化，自己要美化的話，對列的項a a:hover的屬性進行定義即可，比如定義一個好的背景等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*
body
#nav
#nav li
#nav li a
#nav li a:hover
#nav li ul
#nav li.show ul
#nav li.show ul li
#nav li.show ul li a
#nav li.show ul ul
#nav li li.show ul
</style>
<script type="text/javascript">
function getCss(elem,property){
if(elem.style[property]){
return elem.style[property];
}
else if(elem.currentStyle){
return elem.currentStyle[property];
}
else if(document.defaultView && document.defaultView.getComputedStyle){
property = property.replace(/([A-Z])/g,'-$1').toLowerCase();
var s = document.defaultView.getComputedStyle(elem,'');
return s&&s.getPropertyValue(property);
}
else{
return null;
}
}
window.onload = function() {
var obj = document.getElementById("nav");
var lis = obj.getElementsByTagName("li");
var arr = new Array();
var uls = obj.getElementsByTagName("ul")[0];
for(var i=0; i<lis.length; i++){
if(lis[i].className.indexOf("firstLevel")>=0){
arr.push(lis[i]);
}
}
for(var i=0; i<lis.length; i++){
lis[i].style.width = obj.offsetWidth/arr.length - 1 + "px";
if(lis[i].className.indexOf("thirdLevel")>=0){
lis[i].parentNode.style.marginLeft = obj.offsetWidth/arr.length - 1 + "px";
lis[i].parentNode.style.marginTop = -parseInt(getCss(uls,"lineHeight")) + "px";
}
lis[i].onmouseover=function(){
this.className+=(this.className.length>0?" ":"") + "show";
}
lis[i].onmouseout=function(){
this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
}
}
}

</script>
</head>

<body>
<ul id="nav">
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>

</li>
<li>
<a href="#">二級欄目</a>

</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一級欄目</a>
<ul>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
<li>
<a href="#">二級欄目</a>
<ul>
<li class="thirdLevel"><a href="#">三級欄目</a></li>
</ul>
</li>
</ul>
</li>

</ul>
</body>
</html>
網頁設計導航欄問題

9、網頁設計中的導航欄問題

導航:首頁 > 萬維百科 > 網站設計中導航欄不動

網站設計中導航欄不動

與網站設計中導航欄不動相關的知識