CSS控制DIV层滚动效果 CSS层滚动条效果

本文提供了一段HTML和CSS代码示例,展示了如何为特定的HTML容器(如div层)设置自定义滚动条样式,包括颜色和尺寸等细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

直接列出代码如下,有需要的自己去参考,可以控制任意 html 容器标签。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS控制DIV层滚动效果 CSS层滚动条效果</title> </head> <style type="text/css"> <!-- ul { border: 3px double #999; height: 300px; width: 200px; overflow: auto; overflow-x: hidden; padding: 2px; scrollbar-3dlight-color:#cccccc; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#cccccc; scrollbar-darkshadow-color:#cccccc; scrollbar-face-color:#ccc; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; } li { list-style-type: none; } li a img { filter: Alpha(Opacity=70); border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; width:180px; height:50px; padding: 2px; } li a:hover img { filter: Alpha(Opacity=100); border: 1px solid #666666; padding: 1px; } --> </style> <body> <ul> <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/01.jpg"></a></li> <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/02.jpg"></a></li> <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/03.jpg"></a></li> <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/04.jpg"></a></li> <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/05.jpg"></a></li> <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/06.jpg"></a></li> <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/07.jpg"></a></li> <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/08.jpg"></a></li> <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/09.jpg"></a></li> <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/10.jpg"></a></li> </ul> </body> </html> <body> </body> </html>

以上代码即可以实现 带有滚动标签容器 ,在做解释 。这个玩意不难,基础的东西,看看就能明白。



Over !!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值