导航:首页 > 万维百科 > 网页设计中移动块元素代码

网页设计中移动块元素代码

发布时间:2020-10-17 02:36:15

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、网页制作中的移动界面是什么

没听过这个词!

3、HTML5移动网页的设计稿尺寸应该是多少

HTML5的移动端网页设计稿,通常情况下,内容区为750px或960px或者1080px的,一般不小于750px像素大小(宽度)
设计稿可以比750px大,但是绝对不能比750px小,这个主要是由于当前手机的分辨率相对较高(iPhone 6是375物理像素,但实际像素为其两倍,也就是750,这个750就是这么来的)
如果设计图稿过小,前端在实现图稿的时候里面的图片大小在高分辨率的情况下会显得模糊不清,所以这也是为何要“大”分辨率
此外需要注意的是,要保证页面的基准字体大小,在320px的设计稿当中,最小字体不宜小于12像素,其他像素的设计稿当中,等比例换算即可(12/320px*设计稿像素值)

4、很简单的一个网页制作问题小弟不懂,在网页制作中,如何移动元素的位置?

style="float:left;"

5、网页中如何实现图片已张张从右想左移动的效果?希望高手给个制作办法或者给个代码。

向左:程序代码
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img
src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img
src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向右:程序代码
<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img
src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img
src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

6、网页设计程序字体代码的marquee移动一次的代码怎么写

marquee的属性loop=1

7、dreamweaver网页设计中的字体是怎么移动的?

主要就是这个marquee标签。 你在试试下面的效果: 在网页上可以方便地设置文字上下左右移动,控制文字左右移动的标点词<marquee>,如: <marquee>文字在移动</marquee> 在浏览器中显示时,文字在移动这几个字左右移动。<marquee>还有一些重要的属性。 direction:控制移动方向,可取left,right,up,down四个值; behavior:移动方向,可取scrdl(循环移动),slide(只走一圈),alternate(来回移动); loop:指定循环次数,不输入表示无限循环 scrollamount:移动的快慢,整数越大则越快 scorlldelay:每移动一步之后的延时,单位毫米 height,width:移动区域的高忽然宽,单位像素 bgcolor:移动区域的背景色 onmouseover=this.stop() 鼠标覆盖时停止滚动 onmouseout=this.start() 鼠标离开时开始滚动 如下面的代码就上一个常见的实现向上滚动公告栏的原代码; <marquee direction=up width=100 bgcolor=#336699 scrollamount=2>谢谢</marquee>

记得采纳啊

8、网页设计图中如何把文字移动到右上角的代码?急急急

右上角? 你是要把图片跟文字并排显示吗? 如果是的话把图片设置下浮动就行了, float:left;

如果是标题要放到右上角的话, 如果是宽度没有错的情况下就设置字体位置 text-align:center;

9、网页制作问,怎么将下面两个图片中的各个板块合理布局,通过何种代码可以移动这些板块,求大神指教!!!

你是需要怎么移动的呢?可以用相对定位vrelative:Relative使元素偏移一定的距离,偏移的方向及幅度由top、right、bottom和left偏移属性联合指定。
#mydiv {
position:relative;
left:50%;
top: 30px; }
top、left、bottom、right四个偏移属性仅对设置了定位属性的元素有效

也可以用绝对定位vabsolute:absolute使元素从HTML普通流中分离出来,并把它送到一个完全属于自己的定位中。通过设置top、right、bottom和left的值,可以使绝对定位的元素放置到任何地方。例
em {
background-color: #0099FF;
position:absolute;
left:60px;
top: 30px; }

不过我们上课讲的最多的还是利用浮动float 来定位 我有课件,如果需要请私聊我。望采纳!

与网页设计中移动块元素代码相关的知识