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

html-css012

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

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

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

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

解决办法

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

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

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

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

an787319032 见习魔法师 二级(450) | | 我的知道 | 我的消息(0/9) | 我的空间 | 百度首页 | 退出

我的知道 我的提问

我的回答

知识掌门人

新闻 网页 贴吧 知道 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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

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

<style type="text/css">

<!--

*{

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>

<div id="news">

<div id="newstop">标题</div>

<div id="tabnav">

<ul>

<li><a href="#" onmouseover="javascript:show('newslist1')hide('newslist2')hide('newslist3')">aaa</a></li>

<li><a href="#" onmouseover="javascript:show('newslist2')hide('newslist1')hide('newslist3')">bbb</a></li>

<li><a href="#" onmouseover="javascript:show('newslist3')hide('newslist2')hide('newslist1')">ccc</a></li>

</ul>

</div>

<div id="newslist">

<div id="newslist1">

<span>

<a href="#">aaa</a>

<a href="#">aaa</a>

<a href="#">aaa</a>

<a href="#">aaa</a></span></div>

<div id="newslist2">

<span>

<a href="#">bbb</a>

<a href="#">bbb</a>

<a href="#">bbb</a>

<a href="#">bbb</a></span></div>

<div id="newslist3">

<span>

<a href="#">ccc</a>

<a href="#">ccc</a>

<a href="#">ccc</a>

<a href="#">ccc</a></span>

</div>

</div>

</div>

<script language="javascript">

<!--

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

更多>>

订阅该问题

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

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

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

百度知道投诉吧反馈。

©2009 Baidu