网页设计怎么移动按钮的位置_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.视觉流向
用户浏览页面的视觉流向通常是从左上至右下的一条弧线，我们可以看到通常浏览器的操作都是在右侧，关闭|缩小|滚动条等等。符合视觉流向通常情况下，我们会将按钮安排在相同的对象右边，或者是下面，但是复杂界面元素的底部一般是用户的“盲点”。我们将影响整个页面或者对话框的按钮，确认|取消|下一页|保存这样类按钮设置在弹出框的右侧有很好的扩展性，左侧可以添加帮助按钮，这样有助于功能的区域划分。
如果按钮都有自己的小图标，类似用于表单，列表中，网站设计时可以将它们放在工具条或者类似工具条狭长的区域上，通常在页面的顶部。

导航:首页 > 万维百科 > 网页设计怎么移动按钮的位置

网页设计怎么移动按钮的位置

与网页设计怎么移动按钮的位置相关的知识