css中，关于滚动条滑块的问题

2023-04-20 04:35:02html-css024

css中，关于滚动条滑块的问题,第1张

首先overflow:scoll的意思是当页面内容超出一屏（或者你给body设置的宽度）时显示滚动条的意思。

当没有超出时，当然只有X和Y的轴。

问题出在，背景图片不能设置大小。HTML不会计算出背景图片的大小，这和直接插入的图片是有区别的。

解决办法

1.把body的宽度和高度，和图片真实大小设置为一致。

2.就像你说的body里包的一个div，你给那个div设置的宽度和高度和图片一致即可。

另外题外补充，overflow还有两个其它参数。只显示Y轴或者X轴。不会overflow的使用在IE和FF中是有明显差异的。

如果仍没解决，百度Hi或者站内消息可以找到我

我的知道我的提问

我的回答

知识掌门人

新闻网页贴吧知道 MP3 图片视频百科

帮助设置

百度知道 >电脑/网络 >程序设计 >其他编程语言添加到搜藏待解决

网页中滑块效果是怎么实现的？是div+css布局的哦，下面这个是例子，我想更加清楚的知道含义

悬赏分：5 - 离问题结束还有 14 天 23 小时

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<!--

margin:0px

padding:0px

list-style:none

}

body {

font-family: 宋体

font-size: 12px

color: #000000

text-align: center

}

#news {

width:452px

}

#newstop {

height: 28px

text-align: left

}

#tabnav {

height: 28px

width: 450px

margin:0px

padding-left:0px

}

#tabnav li {

margin:0px

width:50px

height: 28px

float:left

border: 1px solid #66CCFF

}

#newslist {

clear:both

height: 200px

border: 1px solid #66CCFF

text-align: left

}

#newslist1 {

clear:both

height: 200px

display:none

background-color: #66FF99

}

#newslist2 {

clear:both

height: 200px

display:none

background-color: #FFFF99

}

#newslist3 {

clear:both

height: 200px

background-color: #FFCCFF

}

a {

font-family: "宋体"

font-size: 12px

color: #000000

line-height:24px

text-decoration: none

}

a:visited {

text-decoration: none

color: #000000

}

a:hover {

text-decoration: none

color: #FF0000

}

-->

</style>

</head>

<body>

<ul>

</ul>

</div>

<span>

<span>

<span>

</div>

<!--

function show(objID)

{

var obj=document.all?document.all[objID]:document.getElementById(objID)

obj.style.display='block'

}

function hide(objID)

{

var obj=document.all?document.all[objID]:document.getElementById(objID)

obj.style.display='none'

}

-->

</script>

</body>

</html>

提问者：迷茫的星星缘 - 助理二级

我来回答：

回答即可得2分，回答被采纳则获得悬赏分以及奖励20分

如果需要图片来说明回答内容，可以上传图片

参考资料：

匿名回答积分规则

回答共 1 条

主要是通过给DIV设置显示隐藏来实现.

再用onmouseover鼠标经过,覆盖时调用显示与隐藏函数,将需要的显示,不需要的隐藏.

回答者： isopc - 经理四级 2009-6-25 16:51

分类上升达人排行榜

用户名动态上周上升

zmltxwd 650

359552813 635

csg974 465

escortmnm 415

sn_kfc 395

更多>>

订阅该问题

您想在自己的网站上展示百度“知道”上的问答吗？来获取免费代码吧！

--------------------------------------------------------------------------------

如要投诉或提出意见建议，请到

百度知道投诉吧反馈。

可以的，纯css做滑动门有两种办法，一个利用hover伪类，另一种就是设置锚点。对应两种方式触发滑动门效果，鼠标悬浮和点击。

下面各举一例，

鼠标悬浮触发：（此例ie6下无效，因其暂不支持li:hover的伪类）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>纯CSS下拉菜单</title>

font-size:12px

text-decoration:none

color:#000000}

li ul{

display:none

margin-left:5px}

li:hover ul{

width:306px

padding:20px

height:250px

display:block

}

li:hover .fira{border-bottom:#FFFFFF 1px solid

}#kpk{

position:relative

width:420px

}

#kpk>li{

float:left

list-style:none

margin-right:20px

}

#kpk>li .fira{

border:1px #c6c6c6 solid

}

.seca{

position:absolute

z-index:1

left:-5px

top:23px

border:1px #c6c6c6 solid

height:250px

width:306px

padding:20px

height:250px

}

.fira{

width:70px

display:block

line-height:22px

background-color:white

text-align:center

z-index:2

}</style>

</head><body>

<div>

<li>

<li><A href="#" target=_self>1.首页新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.首页最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.首页物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.首页弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.首页揭开郑州神枪手神秘面纱头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.首页美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.首页浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.首页西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.首页女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.首页建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

</ul>-->

</li>

<li>

<li><A href="#" target=_self>1.链接一新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.链接一最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.链接一物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.链接一弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.链接一揭开郑州神枪手神秘面纱头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.链接一美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.链接一浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.链接一西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.链接一女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.链接一建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

</ul>-->

</li>

<li>

<li><A href="#" target=_self>1.链接二新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.链接二最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.链接二物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.链接二弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.链接二揭开郑州神枪手神秘面纱头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.链接二美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.链接二浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.链接二西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.链接二女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.链接二建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

</ul>-->

</li>

<li>

<li><A href="#" target=_self>1.链接三新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.链接三最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.链接三物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.链接三弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.链接三揭开郑州神枪手神秘面纱头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.链接三美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.链接三浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.链接三西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.链接三女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.链接三建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

</ul>-->

</li>

</ul>

</div>

</body>

</html>

锚点点击例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

#nav{

width:303px

height:200px

border:1px solid #CCCCCC

}

#column a {

float:left

width:100px

border-right:1px solid #CCC

border-bottom:1px solid #CCC

font:bold 14px/30px Arial, Helvetica, sans-serif

color:#000

text-decoration:none

text-align:center

}

#contant {

width:303px

height:162px

overflow:hidden

}

ul {

margin:0

padding:0

list-style-type:none

padding:4px 0 0 5px

}

li {

font-size:12px

overflow:hidden

padding-left:2px

line-height:27px

}

</style>

</head>

<body>

<li><a href="#">我喜欢CSS </a></li>

<li><a href="#">我喜欢CSS</a></li>

</ul>

<li><a href="#">我喜欢编程</a></li>

<li><a href="#">我喜欢编程 </a></li>

<li><a href="#">我喜欢编程</a></li>

</ul>

<li><a href="#">我喜欢美工</a></li>

<li><a href="#">我喜欢美工 </a></li>

<li><a href="#">我喜欢美工</a></li>

</ul>

</div>

</body>

</html>

楼主自行copy代码到本地查看，样式微调。。。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：JS获取label标签的值是什么？

# 下一篇：JS防水涂料怎么样啊？优缺点是什么？

推荐阅读

热门文章

最新发布

标签列表

css中，关于滚动条滑块的问题

给您推荐相同类型的内容：