網頁滾動條樣式 overflow 轉

 

轉自http://hi.baidu.com/uecd/homecss

"html

1、首先來了解一下overflow
overflow:內容溢出時的設置,能夠設置對象是否顯示滾動條,
overflow-x:指水平方向內容溢出時的設置
overflow-y:指垂直方向內容溢出時的設置
它們設置的值爲visible、scroll、hidden、auto。

visible是默認值。使用這個值時,不管設置的"width"和"height"的值是多少,其中的內容不管是否超出範圍都會被強制顯示出來。
hidden效果與visible相反。任何超出"width"和"height"的內容都會不可見。
scroll不管內容是否超出範圍,都會顯示滾動條。
auto當內容超出範圍時,自動顯示滾動條,不然不顯示。

例如:
1.瀏覽器窗口不出現滾動條:
a.沒有水平滾動條:<body style="overflow-x:hidden">
b.沒有垂直滾動條:<body style="overflow-y:hidden">
c.沒有滾動條:<body style="overflow-x:hidden;overflow-y:hidden">
 或<body style="overflow:hidden">
2.讓多行的文本隱藏滾動條:
a.沒有水平滾動條:<textarea style="overflow-x:hidden"></textarea>
b.沒有垂直滾動條:<textarea style="overflow-y:hidden"></textarea>
c.沒有滾動條:<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
 或<body style="overflow:hidden"></textarea>

2、設定滾動條的顏色
在瀏覽網頁的時候咱們有時能夠看到有許多網頁滾動條顏色不是系統默認的,而是漂亮的粉紅色或其它顏色,其實只要在網頁代碼中加入一些代碼就能夠實現。
DIY屬於你本身的滾動條,將這些代碼加入到<head></head>中間。

<style type="text/css">  
  <!-- 
  Body {  
  scrollbar-face-color:#FFFFFF;
  scrollbar-highlight-color:#FFFFFF; 
  scrollbar-shadow-color:#808080; 
  scrollbar-arrow-color:#000000;  
  scrollbar-track-color:#E0E0E0; 
  scrollbar-3dlight-color:#C0C0C0;  
  scrollbar-darkshadow-color:#000000; 
  scrollbar-base-color:#333333;
  }  
  -->  
  </Style> 

3、最後看一個具體運用
這是個人photo頁面爲方便瀏覽照片時添加滾動條的代碼:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>dragon★龍的相冊</title>
<style type="text/css">
<!--
#tiao {
 height: 260px;
 width: 200px;
 overflow-y:auto;
  }  
body {  
  scrollbar-face-color:#EEFAFF;  
  scrollbar-highlight-color:#FFF;
  scrollbar-Shadow-color:#3bb8ff;
  scrollbar-arrow-color:#3bb8ff; 
  scrollbar-track-color:#FFF;
 }
-->
</style>
</head>
<body>
<div id="tiao">
<img src="myphoto/luori/lr1.jpg"/>
<img src="myphoto/luori/lr2.jpg"/>
<img src="myphoto/luori/lr3.jpg"/>
<img src="myphoto/luori/lr4.jpg"/>
<img src="myphoto/luori/lr5.jpg"/>
</body>
</html>

我把這個照片顯示框的ID命名爲"tiao",在head部分設置了它的寬、高以及滾動條的顏色,DIY的滾動條就製做完成了。瀏覽器

相關文章
相關標籤/搜索