一、首先來了解一下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>
二、設定滾動條的顏色
在瀏覽網頁的時候我們有時可以看到有許多網頁滾動條顏色不是系統默認的，而是漂亮的粉紅色或其它顏色，其實只要在網頁代碼中加入一些代碼就可以實現。
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>
三、最後看一個具體運用
這是我的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>
overflow 的各種用法
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章