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

中国少儿美术联盟门户版上

互动艺术社区www.ar

大 | 中 | 小

建站日志 2009/11/15 arthd

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

From: 本站原创