网页设计中怎么在页面中设置一个滚动条

css属性 overflow-y:autoDIV里面的内容超过DIV的高度，右边就会自动出现滚动条

1、用一个div，定制成图中的宽度和高度

2、然后再把div的样式设成overflow-y:scroll，当div里的文字超出那个高度的时候，滚动条就出来了。

例如：<div style="width:100pxheight:100pxoverflow:autoborder:1px solid #000000"><img src="" style="width:300pxheight:300px"></div>

我们都知道大篇幅的文章会占据页面的大部分空间，从而影响页面整体的美观性，而通过为其添加一个带有滚动条的文本框，则能够很好地解决上述问题。下面就是相关语法： <DIV align=centerstyle='color: #ffffffbackground-color: #000000border: solid 2px blackwidth: 120pxheight: 200pxoverflow: scrollscrollbar-face-color: #889B9Fscrollbar-shadow-color: #3D5054scrollbar-highlight-color: #C3D6DAscrollbar-3dlight-color: #3D5054scrollbar-darkshadow-color: #85989Cscrollbar-track-color: #95A6AA'>日志文字</DIV>上述语法生成一个带有黑色背景及灰蓝色边框的文本滚动框。语法里的参数相当简单，主要是控制不同部分的色彩，你可以做相应变化并在预览中观看实际效果。至于调整文本框的大小，你可以在插入此语法后退出HTML编辑模式，然后在日志编辑页面使用鼠标直接进行调整。 接下来说说文字竖排是如何实现的。

<div class="test test-1">

<div class="scrollbar"></div>

</div>

Css

.test{

width: 50px

height: 200px

overflow: auto

float: left

margin: 5px

border: none

}

.scrollbar{

width: 30px

height: 300px

margin: 0 auto

}

.test-1::-webkit-scrollbar {/*滚动条整体样式*/

width: 10px/*高宽分别对应横竖滚动条的尺寸*/

height: 1px

}

.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

border-radius: 10px

-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2)

background: #535353

}

.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/

-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2)

border-radius: 10px

background: #EDEDED

}

---