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 來定位 我有課件,如果需要請私聊我。望採納!