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 !!!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值