網頁設計怎麼移動按鈕的位置_css里如何移動按鈕的位置

1、css里如何移動按鈕的位置

用margin-top的屬性設置按鈕的位置。

假設按鈕的class為btn，向上移動10像素。

css：

.btn{

margin-top: -10px;

}

margin：設置一個元素所有外邊距的寬度，或者設置各邊上外邊距的寬度。

塊級元素的垂直相鄰外邊距會合並，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。同樣地，浮動元素的外邊距也不會合並。允許指定負的外邊距值，不過使用時要小心。

允許使用負值。

(1)網頁設計怎麼移動按鈕的位置擴展資料：

CSS 外邊距：

圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的「空白」。

設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。

margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。

margin 可以設置為 auto。更常見的做法是為外邊距設置長度值。

margin 的默認值是 0，所以如果沒有為 margin 聲明一個值，就不會出現外邊距。但是，在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外。

因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要你特別作了聲明，就會覆蓋默認樣式。

可以使用下列任何一個屬性來只設置相應上的外邊距，而不會直接影響所有其他外邊距：

margin-top、margin-right、margin-bottom、margin-left。

2、請教網頁製作中如何實現一個按鈕隨著網頁的上下移動而移動？謝謝！！

<title>icesun</title>
</head>
<body>
leij注:類似新浪首頁兩邊漂浮的廣告圖片，隨滾動條上下移動，兼容1024和768窗口

<script>

var delta=0.15
var collection;
function floaters() {
this.items = [];
this.addItem = function(id,x,y,content)
{
document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute; width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');

var newItem = {};
newItem.object = document.getElementById(id);
newItem.x = x;
newItem.y = y;

this.items[this.items.length] = newItem;
}
this.play = function()
{
collection = this.items
setInterval('play()',10);
}
}
function play()
{
if(screen.width<=800)
{
for(var i=0;i<collection.length;i++)
{
collection[i].object.style.display = 'none';
}
return;
}
for(var i=0;i<collection.length;i++)
{
var followObj = collection[i].object;
var followObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);

if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
followObj.style.left=followObj.offsetLeft+dx;
}

if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
followObj.style.top=followObj.offsetTop+dy;
}
followObj.style.display = '';
}
}

var theFloaters = new floaters();
theFloaters.addItem('followDiv2',6,80,'<a href=# target=_blank><img src=img/1.gif border=1></a> 1234');
theFloaters.addItem('followDiv1','document.body.clientWidth-106',80,'<a href=# target=_blank><img src=img/2.gif border=1></a> ');
theFloaters.play();

</script>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

</body>
</html>

這段代碼是在頂端的，自己改成底端就可以了，如果這個也不會就算了。

3、html&PHP網頁，怎麼移動按鈕到自己想要的位置？代碼，圖如下

用margin 或者是top,left

4、怎麼設置按鈕的位置

有好幾種方法
方法一：style="padding-right:距離px;" 放在td或 div等裡面
方法二專：style="margin-right:距離px;" 放在 input 按鈕裡面
方法三：是table做的話屬多做個td 用倆個或者3個td 最後一個td給整個table的3/1寬度中間的td里放按鈕
方法四：按鈕後面給空的代碼1一個代表1個空格
方法五：給按鈕加上right="距離"
求採納為滿意回答。

5、html中怎麼設置按鈕的位置

設置按鈕的父級元素為相對定位，設置按鈕本身為絕對定位，利用定位控制按鈕的位置！例如：

1、html的結構如下，設置按鈕btn1和父級標簽wrap

2、css樣式如下：

.wrap設置為相對relative, btn1設置為絕對absolute 以及控制他left的值和top的值

3、運行效果如下：

效果解讀：

效果如下：

6、html改變button按鈕位置

1、name : 表示按鈕的名稱，通常作為按鈕標識進行使用。 <button name="btn">按鈕</button>。

2、type : 表示按鈕類型，通常與表單一起聯用。reset : 重置按鈕sumit : 提交按鈕button : 普通按鈕<button type="button">按鈕</button>。

3、value : 表示按鈕初始值，通常在js腳本中進行使用和修改。<button value ="點擊">按鈕</button>。

4、disabled ：表示禁用按鈕，使按鈕不能點擊<button disabled ="disabled">按鈕</button>。

7、如何把html中的按鈕放到某個位置

有兩種方法：

方法一：絕對定位布局，利用定位，可以將按鈕放到任意位置

1）將包含按鈕的父級標簽設置為相對定位

.d2{

width:500px;

height:300px;

background:#660099;

position:relative; /*設置相對定位*/

}

2）將按鈕設置為絕對定位，設置左邊的距離，頂部的距離

.btn2{

background:#99ff00;

position:absolute;

left:100px;

top:120px;

}

3）運行查看結果：按鈕02 離左邊100px ,頂部120px

方法二：浮動定位，利用設置按鈕為浮動，缺點是不能很精確的定位到某個位置

1）代碼如下：利用float:right 設置靠右

2）運行結果如下：

總結：如果需要定位到某個精確的位置，採用定位布局，即方法一

8、html 怎樣設置按鈕的位置

有好幾種方法
方法一：style="padding-right:距離px;" 放在td或 div等裡面
方法二：style="margin-right:距離px;" 放在 input 按鈕裡面
方法三：是table做的話多做個td 用倆個或者3個td 最後一個td給整個table的3/1寬度中間的td里放按鈕
方法四：按鈕後面給空的代碼1一個代表1個空格
方法五：給按鈕加上right="距離"

9、html 怎樣設置按鈕的位置？

有好幾種方法
方法一：style="padding-right:距離px;" 放在td或 div等裡面
方法二：style="margin-right:距離px;" 放在 input 按鈕裡面
方法三：是table做的話多做個td 用倆個或者3個td 最後一個td給整個table的3/1寬度中間的td里放按鈕
方法四：按鈕後面給空的代碼 1一個代表1個空格
方法五：給按鈕加上right="距離"

10、網站設計按鈕放在什麼位置

1.空間記憶
用戶習慣的問題，當用戶對於某種操作形成習慣之後，很大程度提高了他的工作效率，但如果我們設計上調整了習慣，他必須馬上思考這個工具一次，增加使用成本。舉例看淘寶和當當的購物車頁面，淘寶的操作是左右結構，雖然有4個按鈕但是很符合我們的記憶，左邊全選刪除方便快捷。右側的橙色按鈕跟當當的綠色「結算」按鈕功能一致，區別在於當當將「繼續購物」按鈕樣式縮小了，這樣會增加用戶的判斷成本。而且淘寶在這里處理的很好，大小樣式很統一。當當的可取之處在於增加了一個「移入收藏」的文字鏈，個人覺得很實用，但是後續操作「移入收藏」的商品就不顯示在購物車中了。如果改成「加入收藏」商品還是在購物車中保留，效果應該會更好。
2.視覺流向
用戶瀏覽頁面的視覺流向通常是從左上至右下的一條弧線，我們可以看到通常瀏覽器的操作都是在右側，關閉|縮小|滾動條等等。符合視覺流向通常情況下，我們會將按鈕安排在相同的對象右邊，或者是下面，但是復雜界面元素的底部一般是用戶的「盲點」。我們將影響整個頁面或者對話框的按鈕，確認|取消|下一頁|保存這樣類按鈕設置在彈出框的右側有很好的擴展性，左側可以添加幫助按鈕，這樣有助於功能的區域劃分。
如果按鈕都有自己的小圖標，類似用於表單，列表中，網站設計時可以將它們放在工具條或者類似工具條狹長的區域上，通常在頁面的頂部。

導航:首頁 > 萬維百科 > 網頁設計怎麼移動按鈕的位置

網頁設計怎麼移動按鈕的位置

與網頁設計怎麼移動按鈕的位置相關的知識