一 : div 添加滚动条
//让所有的table td都展开
overflow-y: hidden; overflow-x: scroll; width: 987px //设置竖着没有滚动条，横着有滚动条 ，一定要设置宽度
例子：
<div>
<table cellspacing="0" cellpadding="0" align="center" border="2" bind="on">
<tbody>
<tr>
<td align="center" width="30">
序号
</td>
<td align="center" width="100" req="SORT,创建日期" con="CLICK">
创建日期
</td>
<td align="center" width="100" req="SORT,质量问题名称" con="CLICK">
质量问题名称
</td>
<td align="center" width="100" req="SORT,最终产品名称" con="CLICK">
最终产品名称
</td>
<td align="center" width="100" req="SORT,工作状态" con="CLICK">
工作状态
</td>
<td align="center" width="100" req="SORT,一层原因" con="CLICK">
一层原因
</td>
<td align="center" width="100" req="SORT,技术归零" con="CLICK">
技术归零
</td>
<td align="center" width="100" req="SORT,管理归零" con="CLICK">
管理归零
</td>
<td align="center" width="40" req="SORT,原件查看" con="CLICK">
原件查看
</td>
<td>
<div>
删除</div>
</td>
<td>
<div>
修改</div>
</td>
<td>
<div>
工作流</div>
</td>
<td>
备注
</td>
<td>
多数
</td>
</tr>
<tr req="REPORT,b0cfeedbe63c48a99d3b324acc5bb619,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">
<td align="center">
<div title="1">
1</div>
</td>
<td align="center" width="100">
<div title="2013-01-30 14:05:12">
2013-01-30 14:05:12</div>
</td>
<td align="center" width="100">
<div title="mclk">
mclk</div>
</td>
<td align="center" width="100">
<div title="最终产品名称">
最终产品名称</div>
</td>
<td align="center" width="100">
<div title="总装测试">
总装测试</div>
</td>
<td align="center" width="100">
<div title="软件">
软件</div>
</td>
<td align="center" width="100">
<div title="是">
是</div>
</td>
<td align="center" width="100">
<div title="是">
是</div>
</td>
<td align="center" width="40">
<div>
<div>
</div>
</div>
</td>
<td>
<div>
<img alt="删除" src=http://up.2cto.com/2013/0312/20130312025239307.png" border="0" req="DEL,b0cfeedbe63c48a99d3b324acc5bb619," con="UPDATE" /></div>
</td>
<td>
<div>
</div>
</td>
<td>
<div>
待修改</div>
</td>
<td>
<div>
备注数据</div>
</td>
<td>
sdddddddddddddd
</td>
</tr>
<tr req="REPORT,cd0c2c1ece774dadbb8e734db874d5e7,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">
<td align="center">
<div title="2">
2</div>
</td>
<td align="center" width="100">
<div title="2013-01-22 12:23:03">
2013-01-22 12:23:03</div>
</td>
<td align="center" width="100">
<div title="质量问题名称">
质量问题名称</div>
</td>
<td align="center" width="100">
<div title="234234">
234234</div>
</td>
<td align="center" width="100">
<div title="研制阶段">
研制阶段</div>
</td>
<td align="center" width="100">
<div title="器材">
器材</div>
</td>
<td align="center" width="100">
<div title="是">
是</div>
</td>
<td align="center" width="100">
<div title="是">
是</div>
</td>
<td align="center" width="40">
<div>
<div>
</div>
</div>
</td>
<td>
<div>
<img alt="删除" src=http://up.2cto.com/2013/0312/20130312025239307.png" border="0" req="DEL,cd0c2c1ece774dadbb8e734db874d5e7," con="UPDATE" /></div>
</td>
<td>
<div>
</div>
</td>
<td>
<div>
待修改</div>
</td>
<td>
备注数据
</td>
<td>
sssssdfsdfsdfsdfsdf
</td>
</tr>
<tr req="REPORT,7bfd927584094ba48e29010162b76fcb,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">
<td align="center">
<div title="3">
3</div>
</td>
<td align="center" width="100">
<div title="2013-01-14 11:41:38">
2013-01-14 11:41:38</div>
</td>
<td align="center" width="100">
<div title="问题">
问题</div>
</td>
<td align="center" width="100">
<div title="名称">
名称</div>
</td>
<td align="center" width="100">
<div title="发射场测试">
发射场测试</div>
</td>
<td align="center" width="100">
<div title="工艺">
工艺</div>
</td>
<td align="center" width="100">
<div title="是">
是</div>
</td>
<td align="center" width="100">
<div title="是">
是</div>
</td>
<td align="center" width="40">
<div>
<div>
<a onclick="KeyUpM(1,'VIEW','METE','7bfd927584094ba48e29010162b76fcb')" href="http://localhost:6404/IcelineIar/secure/report/fullQuarterlyList.aspx?TYPE=02#">
<img alt="查看原件" src=http://up.2cto.com/2013/0312/20130312025239327.png" border="0" /></a></div>
</div>
</td>
<td>
<div>
<img alt="删除" src=http://up.2cto.com/2013/0312/20130312025239307.png" border="0" req="DEL,7bfd927584094ba48e29010162b76fcb," con="UPDATE" /></div>
</td>
<td>
<div>
</div>
</td>
<td style="border-bottom-color: #79d8f0;
width: 60px; text-align: center">
<div>
待修改</div>
</td>
<td>
备注数据
</td > www.2cto.com
<td>
eeeeeeeeeeeeeeeeeeeeeeeeeeee
</td>
</tr>
</tbody>
</table>
</div>
二 : 让DIV产生滚动条
所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。（www.61k.com）其功能大约是为了节约页面空间，就是所谓的“缩地”了。看看效果如何吧，代码在下一楼提供。
参考核心代码：
<DIV>
滚动条相关颜色属性：
face-color：滑块颜色
hightlight-color：高亮颜色
3dlight-color：三维光线颜色
darkshadow-color：暗影颜色
shadow-color：阴影颜色
arrow-color：箭头颜色
tack-color：滑道颜色
滚动条属性：
overflow：auto为自动，yes为有，no为无
overflow-x：横向滚动条
overflow-y：纵向滚动条
注意：
在论坛中，要成功使用DIV滚动条，需要在HTML编辑模式下编写代码，发布前将“自动修正”前的“√”去掉。
三 : 网页特效：随滚动条移动的DIV层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下...</div> <div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上...</div> <div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下...</div> 四 : DIV滚动条属性 DIV滚动条就是利用DIV标签，在里面嵌入CSS样式表，当div所定义的区域的内容达到一定程度时，在div标签里面嵌入CSS样式表，定义overflow的属性值，设置DIV滚动条相关的属性。 代码如下: <style type="text/css">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>随滚动条移动的层 - www.61k.com</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="haiwa">
<META NAME="homepage" CONTENT="www.61k.com">
</HEAD>
<style>
<!--
.div{
position: absolute;
border: 2px solid red;
background-color: #EFEFEF;
line-height:90px;
font-size:12px;
z-index:1000;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}
</SCRIPT>
<div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
document.getElementById("Javascript.Div5").sty
这里向大家描述一下DIV滚动条属性及样式设置，所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。
DIV滚动条属性及样式设置
所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。其功能大约是为了节约页面空间，就是所谓的“缩地”了。看看效果如何吧，代码在下一楼提供。
当div所定义的区域的内容达到一定程度时，在div标签里面嵌入css样式表，定义overflow的属性值，设置DIV滚动条相关的属性。
示例代码：
.testDiv{
border-style:solid;
border-width:50px;
border-color:pink;
position:absolute;
top:200px;
left:300px;
height:200px;
width:300px;
overFlow-x:scroll;
overFlow-y:hidden;
scrollBar-face-color:green;
scrollBar-hightLight-color:red;
scrollBar-3dLight-color:orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;
}
</style>
注：
1.overFlow:
visible却省值，没有DIV滚动条，根据内容自动扩撑区域的大小，即定义的区域无效
scroll总是显示滚动条
hidden没有滚动条，超出区域的内容不可见
auto根据内容自动判断是否添加滚动条
2.DIV滚动条颜色属性：
face-color：滑块颜色
hightlight-color：高亮颜色
3dlight-color：三维光线颜色
darkshadow-color：暗影颜色
shadow-color：阴影颜色
arrow-color：箭头颜色
track-color：滑道颜色
base-color：DIV滚动条的主要颜色，其中包含滚动按钮和滚动滑块
3.overFlow-xoverFlow-y
visible却省值，没有DIV滚动条，根据内容自动扩撑区域的大小，即定义的区域无效
scroll总是显示滚动条
hidden没有DIV滚动条，超出区域的内容不可见
auto根据内容自动判断是否添加滚动条
本文地址： http://www.61k.com/1076229.html
61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1