关于margin-left的示例代码

刚找到一个不错的东东
body { margin: 36pt 24pt 36pt; } 
body { margin: 11.5%; } 
body { margin: 10% 10% 10% 10%; }

#idParentDiv{width:100%;padding:6px;background-color:buttonshadow;}
#idDiv{width:400px;height:80px;background-color:#FFD700;padding:6px;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}

var iValue=0;
function rdl_doAdd(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv=document.all("idDiv");
var oNum=document.all("idNum");
iValue+=1;
oNum.value=oDiv.style.marginLeft=iValue.toString()+"px";
oCodeDiv.innerText="margin-left : "+oNum.value+" ; ";
}
function rdl_doDvv(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv=document.all("idDiv");
var oNum=document.all("idNum");
iValue-=1;
oNum.value=oDiv.style.marginLeft=iValue.toString()+"px";
oCodeDiv.innerText="margin-left : "+oNum.value+" ; ";
}

请从下方选属性的值。

margin-left : 0px ;

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jQuery获得包含margin的outerWidth和outerHeight的方法

    本文实例讲述了jQuery获得包含margin的outerWidth和outerHeight的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(fun

  • 简单谈谈margin负值的作用

    简单谈谈margin负值的作用

    1.有俩个边框,有不同的背景色,不管哪边高增加,另一边也变高 2.实现自适应

  • Android中gravity、layout_gravity、padding、margin的区别小结

    1.gravity与layout_gravity的区别 gravity 属性是对该view 内容的限定．比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置．该属性就干了这个． layout_gravity 是用来设置该view相对与起父view 的位置．比如一个button 在linearlayout里,你想把该button放在靠左 靠右等位置就可以通过该属性设置． 这样就解释了,有什么我们弄个最外布局,然后里面包了几个布局,如果要使这几个布局都靠底,就可

  • 各浏览器padding、margin的差异

    各浏览器padding、margin的差异

    margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:IE 6.0 Firefox Opera等是真实宽度=width+padding+border+marginIE5.X真实宽度=width-padding-border-margin 解决的方法是: div.content { width:400px; //这个是错误的width,所有浏览器都读到了voice-family: "\"}\""; //IE5.X/wi

  • firefox margin-top失效的原因与解决办法

    为什么要翻译这篇说明?css2本有人已翻译过,但看一下,很粗糙(不是说自己就怎么怎么样啊,翻译者真的是很值得敬佩的!),近来跟css与xhtml接触得越来越多,但接触得越多,迷惑却总不见少. 现在我觉得很多问题根本不能称之为问题,原因就在于我们的草率理解,比如杀鸡用牛刀,不是不可以,是不合理.不恰当,根源错了,表象也就会错了,如果解决问题从表象入手,难免总会摸不着头脑,还是那句话,要脚踏实地,切莫浮躁. 在这个说明中,"collapsing margins"(折叠margin)的意思是

  • 用margin和overflow属性实现div间距的方法

    用margin和overflow属性实现div间距的方法

    通常我们在制作上图的时候,会分别给四个div加上不同的css属性,来实现中间间隔.但我们更希望的是不需要对html标签做标识,直接能通过css实现,今天在论坛上小志提出了一个很不错的解决方案.使用overflow:hidden属性.或许很多人已经是这样用了,我没用过,觉得耳目一新.呵呵.其实道理很简单,我们按照正常的设置li的margin-right.margin-bottom属性,这样的结果自然会比我们期望的要多出来右边和下方的,这个时候我们通过ul的父级来设置width/height属性,然

  • CSS的margin边界叠加深度剖析图文演示

    CSS的margin边界叠加深度剖析图文演示

    边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: 元素的顶边界与前面元素的底边界发生叠加 当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,见图: 元素的顶边界与父元素的顶边界发生叠加 尽管初看上去有点儿奇怪,但是边界甚至可

  • 用iframe margin实现调用其他网页的某一区域的方法

    逛网中发现,用iframe的margin函数实现调用一网页的部分区域,太有才了,以后就方便了 新建网页 body{ } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • node.js 用socket实现聊天的示例代码

    本文介绍了node.js 用socket实现聊天的示例代码,分享给大家,也给自己留个笔记,具体如下: 服务器搭建 app.js const http = require("http"); const express = require("./express"); //创建一个服务 const server = http.createServer(express); //监听服务端口 server.listen(8001,()=>{ console.log(&q

  • ionic2屏幕适配实现适配手机、平板等设备的示例代码

    本文介绍了ionic2屏幕适配实现适配手机.平板等设备的示例代码,分享给大家,具体如下: 推荐使用的编辑器是:VS code  (Visual Studio Code)=>只负责编辑文档,不编译. 而WebStorm 有检查编译等,在ionic1开发的时候,还很方便用浏览器随时点击按键浏览效果,但是开发ionic2之后,ionic2有自动检查编译,会照成webstorm卡顿,无法编辑. 一.首先增加一个一面作为测试 我使用的工程是sidemenu 在项目目录下执行如下命令: ionic g pa

  • Three.js实现绘制字体模型示例代码

    前言 本文主要给大家介绍了关于利用Three.js绘制字体模型的相关内容,使用three.js绘制字体模型,没有想象当中那么难.下面话不多说了,来一起看看详细的介绍: 首先你需要实例化 THREE.FontLoader() 来进行json格式的文字格式加载,在加载成功的回调函数里面进行创建网格. 然后通过THREE.TextBufferGeometry或者THREE.TextGeometry方法进行网格创建,并将需要设置的问题传入. 再设置一个纹理,通过THREE.Mesh()函数创建成图形添加

  • js使用html2canvas实现屏幕截取的示例代码

    整理文档,搜刮出一个js使用html2canvas实现屏幕截取的示例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <

  • jquery自定义插件——window的实现【示例代码】

    jquery自定义插件——window的实现【示例代码】

    本例子实现弹窗的效果: 1.jquery.show.js /* * 实现功能:点击在鼠标位置显示div * 版本序号:1.0 */ (function($){ $.fn.showDIV = function(options){ var defaults = {}; var options = $.extend(defaults, options); var showdiv=$(this); var close, title, content; close=$(" "); title=$

  • 使用Dropzone.js上传的示例代码

    使用Dropzone.js上传的示例代码

    本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区 引入Dropzone.js和dropzone.css然后使用表单form定义一个class="dropzone"即可完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

  • Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码

    向上滑动隐藏底部悬浮框,向下滑动显示悬浮框.使用pc端浏览器查看请把浏览器设置为手机浏览器模式. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>手机端触屏手指滑动方向</title> <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,us

  • 原生js实现移动端触摸轮播的示例代码

    PC端上实现图片轮播效果很简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现. 下面是移动端手指滑动轮播图的完整代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scala

  • 微信小程序商品详情页规格属性选择示例代码

    detail.wxml展示页面 <!--轮播图--> <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> &

  • 用vue写一个仿简书的轮播图的示例代码

    用vue写一个仿简书的轮播图的示例代码

    1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

随机推荐