开发工具与关键技术: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轴,高中数学,很多人的噩梦。
最后就是效果图了,呈上效果图观看,谢谢点进来的小伙伴,有问题可以在评论区说哦。