div | 易学教程

如何给div、p添加onload事件？

阅读更多关于如何给div、p添加onload事件？

前提其实只有 <body>、<frame>、<iframe>、<img>、<link>、<script>、<style> 这些标签才有onload事件，而div、p等标签是没有的。但如果我们还是想在div append到DOM时做一些事情该怎么办呢？有人会说那就在append到DOM的代码后面加不就行了，但这样会每个append地方后面都得一一写上，好麻烦。例如 <div> <p>我有一只小毛驴，我从来也不骑。</p> </div> 假设我想在上面内容加载后，弹出“我是小毛驴”提示框。借花献佛我还是想用onload事件处理，我们也知道哪些标签是支持，那么就可以把代码改成： <div> <p>我有一只小毛驴，我从来也不骑。</p> <style onload="alert('我是小毛驴')"></style> </div> 这样借用style标签，只要div append到DOM，就可模拟触发onload事件。来源： https://www.cnblogs.com/lovesong/p/12040819.html

JS---案例：设置div的宽度

阅读更多关于 JS---案例：设置div的宽度

案例：设置div的宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 150px; background-color: pink; border-radius: 100px; } </style> </head> <body> <input type="button" value="变宽" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> my$("btn").onclick = function () { var width = 200; var timeId = setInterval(function () { width += 10; if (width == 800) { clearInterval(timeId); } my$("dv").style.width = width + "px"; }, 100); }; </script> </body> </html> 来源： https://www.cnblogs.com

div块水平居中，垂直居中

阅读更多关于 div块水平居中，垂直居中

水平居中一个div想要水平居中于它的父div中只需要给它加css属性margin:0 auto; 即可 <!DOCTYPE html> <html> <head> <title></title> </head> <style> #box{ width: 200px; height: 200px; border:2px solid #000; line-height: 200px; } #one{ background: #000; width:50px; height: 50px; margin:0 auto; } </style> <body> <div id="box"> <div id="one"></div> </div> </body> </html> 垂直居中一个div想要垂直居中于它的父div中，需要给它添加css属性display: inline-block;再给它的父div添加css属性vertical-align: middle;即可 <!DOCTYPE html> <html> <head> <title></title> </head> <style> #box{ width: 200px; height: 200px; border:2px solid #000; line-height: 200px; vertical-align: middle;

放入div中的图片不变形的解决方法

阅读更多关于放入div中的图片不变形的解决方法

前言在DIV CSS布局中对于图片排版时，如果使用CSS固定死图片大小（宽度高度），如果图片相对于这个位置不是等比例大小，那么这张图片就会变形。以下是解决图片变形的方法。方法第一种让图片和布局宽度高度成等比例，这样CSS设置死宽度和高度，图片也是等比例缩小，图片也不会变形。 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .imgcss{ width:400px; height: 400px; border:1px solid red; } .imgcss img{ width: 400px; height: 400px; } </style> </head> <body> <div class="imgcss"> <img src="./image/timg.jpg"> </div> </body> 图片原本的宽高都是800px,等比例缩小成400px后，图片不变形。如下图：第二种使用max-width:300px或max-height

div拖拽效果 JQuery

阅读更多关于 div拖拽效果 JQuery

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="description" content="jQuery拖拽div" /> 5 <meta charset="utf-8"> 6 <title>JS Bin</title> 7 <style> 8 #div{ width:200px; height:200px; background:#ccc; position:absolute;} 9 #div h1{ height:30px; line-height:30px; font-size:12px; text-align:center;background: #f1f1f1;border-bottom: 1px solid #ccc;} 10 </style> 11 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.js"></script> 12 13 </head> 14 <body> 15 <div id="div"><h1>标题</h1></div> 16 <script> 17 $.fn.setDrag = function(options){ 18 var defaults = { 19 },

Ajax获取网页添加到div中

阅读更多关于 Ajax获取网页添加到div中

1：利用DOM获取该 div 的 ID，然后清空该DIV的内容（如果你需要接着里面的内容添加可不要清空）；需要注意点是清空最好用“ empty() ”； 2: 把 async设成true , 否则又一条警告的错误，这条错误导致你的内容显示不出来；下面就是警告的错误 3:就是添加HTML了。具体代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <div id="tset"> <a href="http://www.baidu.com">百度</a> </div> <button id="btn">测试</button> </body> <script src="../../Js/jquery-3.4.1.js"> </script><script src="../../Js/layer-v3.1.1/layer/layer.js"></script> <script> $(function(){ $("#btn").click(function(){ $.ajax({ url:'../../Html/JQueryDome/弹框.html', dataType:'html', type:'get', async:true, success

web前端开发中浏览器兼容问题（三）

阅读更多关于 web前端开发中浏览器兼容问题（三）

11.li中内容超过长度后以省略号显示此方法适用于IE与OP 浏览器 <style type="text/css"> li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } </style> 12.为什么无法定义1px左右高度的容器 • IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px等。 13.怎样使一个div垂直居中于浏览器中？ • 这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二。 <style type="text/css"> div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } </style> 14.div居中问题 • div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin:

前端css实现左边div固定宽度100px，右边div自适应布局

阅读更多关于前端css实现左边div固定宽度100px，右边div自适应布局

html结构： <div id="container"> <div id="left"></div> <div id="right"></div> </div> 方法一：flex 布局 #container{ width:100%; height:500px; display: flex } #left{ width:100px; height:100%; background: yellow; } #right{ height:100%; background: pink; flex: 1 } 方法二：浮动 #container{ width:100%; height:500px; } #left{ width:100px; height:100%; background: yellow; float: left; } #right{ height:100%; background: pink; padding-left:100px; } 方法三：BFC(块级格式化上下文) #container{ width:100%; height:500px; } #left{ width:100px; height:100%; background: yellow; float: left; } #right{ height:100%; background: pink; overflow

如何让div水平垂直居中

阅读更多关于如何让div水平垂直居中

如何让div水平垂直居中 @(css)[妙瞳] 引子我们经常遇到需要把div中的内容进行水平和垂直居中。所以，这里介绍一种方法，可以使div水平居中和垂直居中。代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style> *{ margin:0; padding:0; } div.box{ background-color:pink; border:2px solid #000; width:960px; height:500px; margin-left:50px; } </style> </head> <body> <div class="box"> <img src="girl.jpg" alt="美女"> </div> </body> </html> 效果图：现在先让图片在div中水平居中我们可以先给图片套一层盒子。代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } div.container{

CSS简单理解与应用

阅读更多关于 CSS简单理解与应用

一、CSS基本概念： CSS——级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。 CSS能够对 HMTL 中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力；能够统一地控制HMTL中各标志的显示属性；能够使人更能有效地控制网页外观以及创建特殊效果的能力，是真正做到网页表现与内容分离的一种样式设计语言。二、CSS结构与语法说道CSS将网页表现与内容分离，不得不谈到CSS的语法和结构。 CSS属性和选择器 css的语法结构仅仅有三部分组成：选择器（Selector）、属性（property）、和值（value）。使用方法： selector {Property:value;} 选择器（Selector）指这组样式编码所要针对的对象。可以是一个XHTML标签，如body,h1；也可以是定义了特定的ID或CLASS的标签，如#main选择器表示选择<div id="main">，即一个被指定了main为id的对象。浏览器将对css选择器进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。属性（Property）是CSS样式控制的核心，对于每一个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。

订阅 div