`
sdcyst
  • 浏览: 58328 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

html页面中运用CSS为层(div)元素添加滚动条

CSSHTML 
阅读更多

     当在页面中显示大量信息时，为了不使整个页面太长，常常将这些内容放在一个层中，然后再为这个层加上滚动条。这样即显示了全部的信息，又使得页面更加美观。下面是一个简单的带滚动条的层实现(其中涉及的一些CSS样式最好是能够参考一下CSS手册，可以使得整个层更加漂亮)。

 

<html>
	<head>
	<title>Div Scroll</title>
	
	<style type="text/css">
	.scroll {
		width: 50%;										/*宽度*/
		height: 200px;									/*高度*/
		color: ;										/*颜色*/
		font-family: ;									/*字体*/
		padding-left: 10px;								/*层内左边距*/
		padding-right: 10px;							/*层内右边距*/
		padding-top: 10px;								/*层内上边距*/
		padding-bottom: 10px;							/*层内下边距*/
		overflow-x: scroll;								/*横向滚动条(scroll:始终出现;auto:必要时出现;具体参考CSS文档)*/
		overflow-y: scroll;								/*竖向滚动条*/
		
		scrollbar-face-color: #D4D4D4;					/*滚动条滑块颜色*/
		scrollbar-hightlight-color: #ffffff;				/*滚动条3D界面的亮边颜色*/
		scrollbar-shadow-color: #919192;					/*滚动条3D界面的暗边颜色*/
		scrollbar-3dlight-color: #ffffff;				/*滚动条亮边框颜色*/
		scrollbar-arrow-color: #919192;					/*箭头颜色*/
		scrollbar-track-color: #ffffff;					/*滚动条底色*/
		scrollbar-darkshadow-color: #ffffff;				/*滚动条暗边框颜色*/
	}
	</style>
	
	</head>
	
	<body>
	<div align="center">
		<div class="scroll">
			<!--在此添加想要显示的内容 -->
		</div>
	</div>
	
	</body>
</html>

 

分享到：
评论
2 楼 小林java 2013-04-16  
代码不能运行
1 楼 昔日舞曲 2008-10-22  
不错
挺有趣的。。。！！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics