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

     当在页面中显示大量信息时,为了不使整个页面太长,常常将这些内容放在一个层中,然后再为这个层加上滚动条。这样即显示了全部的信息,又使得页面更加美观。下面是一个简单的带滚动条的层实现(其中涉及的一些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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值