滚动条的运用

开发工具与关键技术：vs与css

作者：戴怡斌 

撰写时间：2019年5月15日

我相信大家用过电脑，手机 ，用过就代表你也同时用过我今天所说的滚动条，

滚动条是什么，没学过的不知道。但你一定用过。

滚动条就是当你手机，电脑的类容大于你的手机电脑的屏幕高度，他就会形成滚动条，滚动条运用非常广，所以(你懂得-_-)。

滚动条你可以使用插件，也可以自己敲，插件的话推荐使用bootstrap4这一系列(真的没有打广告)。

我就只敲一样，敲没有插件的，有插件的滚动条会少敲不少代码，当然，前提是你得明白意思，

<linkhref="~/HospitalOutpatient/bootstrap4.1.3dist/css/bootstrap.min.css"rel="stylesheet" />

bootstrap4我用的是4.1的(不知道有没有出新版本)，先引用js，我用的是ul标签，当然自己喜欢就好。先来看css部分

li标签里面的类容太多，就收起来了，不影响观看，ul标签有一个默认的样式，那就是会有下划线，所以先要解除它的默认样式。

list-style: none;这一句就是解除li标签默认样式的代码，

还有就是不要加浮动，不能加浮动的原因就是宽度没有了，也不能说宽度没有了，就是会打乱你的部署，差不多，自己试了就知道了。

我li标签里还加了span标签，span标签用来撑开父元素。直接设置宽高。

记住span标签是行内元素，加宽高的时候要把它变成块级元素，不然设置宽高也是没有用的。也可以设置成行内块级元素。

display:inline-block：这一句代码就是把span标签设置成行内块级元素。

可能会有人说不用浮动那怎么让li标签并排，这个时候你可以用table标签啊，也可以用下面这两句代码

display:table-row; display:table-cell;  第一句可以把ul标签转化成tr，第二句就是转化成td，效果都是并排，相当于浮动，再某一方面比浮动还好。

最后图2中第一句里面的overflow-x:scroll;这一句就是核心，横向滚动条就靠他了。如果要是想要竖向滚动条就改成overflow-y:scroll;就可以了。X轴y轴，高中数学，很多人的噩梦。

最后就是效果图了，呈上效果图观看，谢谢点进来的小伙伴，有问题可以在评论区说哦。