浏览 12411 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-10-21
当在页面中显示大量信息时，为了不使整个页面太长，常常将这些内容放在一个层中，然后再为这个层加上滚动条。这样即显示了全部的信息，又使得页面更加美观。下面是一个简单的带滚动条的层实现(其中涉及的一些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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-10-22
不错
挺有趣的。。。！！ |
| 返回顶楼 | |
