html 圆点滚动条,html滚动条样式如何设置

设置html滚动条样式的方法:首先新建文档,再新建CSS文件;然后创建DIV标签并填充内容,并设定滚动条内框的大小,代码为【overflow-y: scroll;overflow-x: scroll;】。

49f78c6a1b4206e1aa6ef8907b961a53.jpg

本教程操作环境:windows7系统、html5&&css3版,DELL G3电脑。

设置html滚动条样式的方法:

1、新建一个HTML文档,这里设立一下基本的架构。

c1bfb193eb8592a6e79314954420efeb.png

2、再新建一个CSS文件,用link关联一下HTML文档。

9941c828d6e84886449b45721de58c94.png

3、创建DIV标签,并且往里面填充内容。

eda7b072011efd25dc27b62a00924a88.png

4、先设定一下滚动条内框的大小,用border先来查看是否有超出,这里可以看出超出了很多内容。

941256c76a189519a9c9405bc7d0b837.png

5、

overflow-y: scroll;

overflow-x: scroll;

加上这个样式滚动条就会出现了。

22a8bf110331769f3b3b5dc608c5823a.png

88090a3c8e2a427fbf6dc9472602ff5f.png

6、#ds::-webkit-scrollbar-track {

background-color: green;

}

#ds::-webkit-scrollbar {

width: 20px;

}

#ds::-webkit-scrollbar-thumb {

background-color: pink;

border-radius: 50%;

}

现在我们就能对轨道和滚动条进行样式的设置了。

646430987b5a704183b144cf1c0fcd6f.png相关学习推荐:html教程

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值