导航:首页 > 万维百科 > 网页设计中上下滚动的滚动栏

网页设计中上下滚动的滚动栏

发布时间:2021-01-06 17:27:33

1、网页设计如何设置网页部分内容不随着滚动条而移动移动?

div的样式中使用相当于浏览器窗口定位——position:fixed。
一、position:fixed属性的含义
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
我们平时所说的固定定位指的就是fixed,设置了固定定位的元素不会随滚动条上下滚动。

二、一般的 position:fixed; 实现方法
#top{position:fixed;bottom:0;right:20px}
实现了id为top的元素固定在浏览器的底部和距离右边20个像素的位置
#top{position:fixed;top:20px;right:20px}
实现了id为top的元素固定在距离浏览器的顶部20个像素和距离右边20个像素的位置

三、IE6下position:fixed; 实现方法
在IE6中是不能直接使用 position:fixed; 。你需要一些 CSS Hack 来解决它
相同的还是让 <div id="top">...</div> 元素固定在浏览器的底部和距离右边的20个像素,这次的代码是:#top{
position:fixed;
bottom:0;
right:20px;
_position:absolute;

_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
right 跟 left 属性可以用绝对定位的办法解决,而 top 跟 bottom 就需要用上面的表达式来实现。其中在_position:absolute; 中的 _ 符号只有 IE6 才能识别,目的是为了区分其他浏览器

1、使元素固定在浏览器窗口的顶部:
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
}
2、使元素固定距浏览器窗口的顶部a像素的位置:
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
_margin-top:a;
}或者
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+a));
}
3、使元素固定在浏览器窗口的底部:
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
4、使元素固定在距浏览器窗口的底部b像素的位置:
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
_margin-bottom:b;
}或者
#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||b)-(parseInt(this.currentStyle.marginBottom,10)||b)));
}
四、IE6下的闪动问题
问题还没有完全解决。在用了上面的办法后,你会发现:被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入:
*html{background-image:url(about:blank);background-attachment:fixed;}
其中 * html选择器hack是给 IE6 识别的。
到此,IE6 的 position:fixed; 问题已经被解决了

2、网页设计中怎么在页面中设置一个滚动条

css属性 overflow-y:auto; DIV里面的内容超过DIV的高度,右边就会自动出现滚动条

1、用一个div,定制成图中的宽度和高度
2、然后再把div的样式设成overflow-y:scroll,当div里的文字超出那个高度的时候,滚动条就出来了。
例如:<div style="width:100px; height:100px; overflow:auto; border:1px solid #000000;"><img src="" style="width:300px; height:300px;"></div>

3、jsp 页面中怎么设计上下滚动的页面

放到个iframe中,例如
<IFRAME name=rightframe src="faq-1.jsp searchLatn=<%=searchLatn%>" frameBorder=0 width=572
scrolling=auto height="570" ></IFRAME>
注意这个scrolling=auto,有这个,那么叶面内容超过固定表格长度,就内会自动出现容滚动条
,没超过不出现

4、网页制作中滚动条的代码是什么

下面的都为网页制作中滚动条的代码。

overflow: auto;

font-family: Arial,Helvetica,sans-serif;

font-size: 9pt;

line-height: 8px;

color: #000000;

text-decoration: none;

height:250px;

SCROLLBAR-FACE-COLOR:#FFFF00 ;

SCROLLBAR-HIGHLIGHT-COLOR: #87CEFA ;

SCROLLBAR-SHADOW-COLOR: #DEEB9F;

SCROLLBAR-3DLIGHT-COLOR:#00BFFF;

SCROLLBAR-TRACK-COLOR:#BA55D3 ;

SCROLLBAR-ARROW-COLOR: #D3D3D3 ;

SCROLLBAR-DARKSHADOW-COLOR: gold;}

5、关于网页设计中滚动栏的制作。。

看我这个,简单的。

说明:1、你放的内容再多表面上会在Dreamweaver中撑破,但是在浏览器是正常
2、这个就是marquee的用法,height 、width定义了滚动的范围,具体的你可以在百度查

<marquee direction=left height=100 scrollamount=1 scrolldelay=2 width=600>
这里放置要滚动的内容,表格、图片、文字都可以
</marquee>

6、用DW制作网页,浏览时没有上下滚动条

楼上的说话说一半。。。。新手很多不懂,要说清楚,1楼的说的对,但是还有一个选择框架,只要在框架内部,按住alt,左点鼠标就可以选中该框架

7、什么是网页设计中的滚动设计?如何进行滚动设计?

曾经的网站设计“禁忌”已经成为最受欢迎的技术之一,下面将讨论一些滚动设计的利弊,并分析一些技巧。


滚动设计适合你的产品吗?


每一种设计技巧和工具,都有喜欢这个概念的人和那些讨厌它的人。在大多数情况下,任何一方都不是本质上对错的;因此,在处理此类项目之前,权衡所有注意事项非常重要。


滚动的优点:

鼓励互动 – 随着不断变化的元素不断刺激,它可以是一种有趣的讲故事方法,鼓励用户交互 - 尤其是高雅执行的视差滚动。

更快 – 长滚动比单击复杂的导航路径更快,并且不会减慢或限制用户体验。如Interaction Design Best Practices中所述,对时间的感知通常比实际时间的流逝更重要。

吸引用户 – 易用性可促进交互性,增加现场时间。对于无限滚动网站尤其如此,您可以在其中帮助用户发现他们可能甚至没有想到的相关内容。

响应式设计 – 页面设计在具有不同屏幕大小和功能的设备之间可能会变得复杂,但滚动有助于简化差异。

手势控制 – 滚动似乎与触摸有着有机的联系,因为向下轻扫比在屏幕上不同区域重复点击要自然得多。用户(尤其是移动设备)通常接受这一方式来显示信息。

令人愉快的设计 – 不需要多次单击即可获得更快的交互,从而获得更类似于应用或游戏的用户体验。


滚动的缺点


固执用户 –一些用户总是毫无理由地去抵制改变。尽管如此,该技术现在非常普遍(特别是在移动体验期间),可以说大多数用户都习惯了这种技术。

SEO缺点 - 只有一个页面可能对网站的SEO产生负面影响。

迷失方向 - 滚动和内容之间的断开可能会使用户感到困惑或脱节。

导航困难 – "返回"页面上的先前内容可能会很尴尬。为了对付这种情况,您可以创建一个持久的顶部导航,其中每个部分都锚定到页面。

网站速度 – 视频或图像图库等大量内容可能会降低网站速度,尤其是视差滚动网站,它们依赖于 Javascript 和 jQuery

没有页脚 – 使用无限滚动网站,我们建议使用简约的"粘性"页脚,这样您就不会牺牲可导航性。否则,用户可能会因为页面底部缺少进一步的导航而感到困惑。

撇开优点和缺点不谈,某些类型的网站更适合长滚动设计。更长的滚动网站更适合……

...包含很大一部分移动流量(大多数用户)

...包括频繁更新或新内容(如博客)

...有很多信息以单一的方式呈现,以便理解(如信息图)

...不包含富媒体,因为这可能导致负载时间的消耗

滚动最佳实践

长滚动、视差效应和类似机制在设计领域中仍然比较新(约4年历史),但仍从试错经验中可以获取一些基本的最佳实践。

从 2015 和 2016 的 Web 设计趋势总结,以下是成功实现长滚动的一些日常技巧。

不用担心短滚动和长滚动交替使用。 让内容决定滚动长度,而不是反过来。 使用短滚动主页和长滚动着陆页(如产品,旅游等)非常好(并且非常受欢迎)。

考虑粘性导航,以便用户始终可以快速"返回"或从滚动中的元素跳转到另一个元素。

将滚动与设计元素或工具结合,以便每个用户都能快速了解网站的工作方式。箭头、动画按钮或类似的用户界面工具是帮助用户确定下一步操作的有趣且简单的方法。有些网站甚至包含一个小按钮,其中包含"滚动更多"或"开始"等说明,来提高页面的导航性。

明确区分滚动点击和其他CTA元素,以便网站获得所需的交互。

做一些研究,看看用户如何与滚动交互。例如,在 Google 分析中,可以打开"网页分析"选项卡,查看屏幕下方(第二屏及之后)用户的点击数。然后,你可以根据需要调整设计。

不要过分。长滚动并不意味着 500 页的连续内容 - 长滚动也可以很简单。讲述你的故事,然后适可而止,不要喋喋不休 。

专注于用户目标,并接受即使是无限滚动网站也不是真正无穷无尽的。 创建长滚动网站时,要了解用户仍需要方向感(当前位置)和导航(其他可能的路径)。

包括有助于在滚动中定位用户的视觉提示,例如左下方用于“七种类型的摩托车骑手”站点的头盔图标。

滚动可能是一把双刃剑,所以坚持使用它的建议用法,以避免它弊大于利。

平时用墨刀设计原型时候,可以直接拖动,增加页面长度,进行滚动设计。

8、网页设计中像这样的滚动窗口,代码是什么,求大神解决!!!

这是一段js写的,不过里面的文字图片是代码控制后台添加的,我这里有可以联系我

9、再网页设计中如何做滚动的公告栏?

<marquee behavior="scroll" onmouseover=this.stop() onmouseout=this.start() width=220 height=120 direction="up">这里是公告内容</marquee>
高度和宽度可以自己调

10、在网站设计中:文字垂直向上滚动怎么弄,求代码、CSS,求详解???

这段代码你看下是不是你要的效果。如果不是可以继续追问
<div style="width:200px; height:300px">
<marquee direction="up" truespeed="truespeed" height="300px" behavior="scroll">
<p></p>
<p></p>
<p></p></marquee></div>

与网页设计中上下滚动的滚动栏相关的知识