當前位置:編程學習大全網 - 源碼下載 - dw cs6中做網站怎麽設置成左側導航欄滾動時不動只有右側內容上下滾動

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

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

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

/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;}

效果圖如下:

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

  • 上一篇:股票代碼的分類
  • 下一篇:校園表白情書最感人的例子
  • copyright 2024編程學習大全網