div | 易学教程

一个不错的div树状导航栏

阅读更多关于一个不错的div树状导航栏

div左右布局

阅读更多关于 div左右布局

一、左右定宽布局：在css分别指定了左右两列的宽度的情况下，只需要将左边的div 向左浮动{float:left;}，右边的div 向右浮动{float:right;}，并清除浮动，即可实现。常用的清除浮动有两种方式： a、通过在浮动元素的父级元素上添加清除浮动的class类：clearfix(见下面的css代码部分)； b、通过在浮动元素后面添加一个空元素，然后在这个空元素上定义clear:both来清除浮动；二、不定宽布局：不定宽布局分为一边不定宽和两边不定宽两种形式，在实际运用中第二种情况是不会采用的，我们具体来分析一下一边不定宽的左右布局方法，有以下两种情况： 1、左边定宽，右边不定宽，左在上，右在下；( 左边在右边div的上边) 遇到这种情况时，要将两个div进行左右布局，与左右定宽布局的方法基本相同，只需要将左边的div向左浮动{float:left;}，并清除浮动，右边的div就会跟在已浮动的“div左”后面，即已经实现左右两列布局了。 2、左边定宽，右边不定宽，左在下，右在上；将右边div写在上方，通常是希望在加载网站内容时先显示右边的内容，这种情况在“左边为菜单，右边是内容”的左右布局中经常用到。总结几点如下： 1）将右边的div向右浮动，并设一个负的margin-left； 2）在右边div里面增加一个div，用于放右边的内容

div浮动层定位

阅读更多关于 div浮动层定位

< div align ="left" style ="position:relative;" > < input type ="text" id ="dw" />< br /> < div style =" position:absolute;display:none; width:200px; border:#b5d5e6 1px solid; float:left; list-style-type:none; background-color:White;" id ="Div1" > </ div > </ div > 原理： position 值值描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index

设置div的时候有时候用到宽度100%会导致撑破盒子的问题解决

阅读更多关于设置div的时候有时候用到宽度100%会导致撑破盒子的问题解决

相信大家在做网页页面设计的时候，都会遇到这么一个问题：在设计俄罗斯套盒的时候（我在说什么？）咳咳，即当盒子里面再套一个盒子的时候，里面盒子由于外面盒子的border和其本身设置的border，padding，margin等元素，会把外面的盒子给撑破了。即使在外面的盒子加了padding也不能解决这个情况。我在学习设计一个类似QQ空间的网页的时候也遇到了这个问题，里面text area撑破了外面的div，代码和效果图片如下： #top { border : 1 px solid #dddddd ; height : 150 px ; width : 600 px ; position : absolute ; left : 0 ; right : 0 ; margin : 0 px auto ; padding - left : 16 px ; padding - right : 16 px ; padding - up : 6 px ; border - dadius : 6 px ; } < div id = "top" > < font style = "color:#668FB8;font-size:12px;font-family:'微软雅黑';" > 有什么事情要分享 ? < / font > < br / > < textarea style = "border

鼠标点击div区域之外的地方后隐藏div

阅读更多关于鼠标点击div区域之外的地方后隐藏div

用div做了一个code选择器，但div打开之后我想实现点击其他区域就可以自动隐藏的效果，最后解决方法：第一步：在js中定义一个变量用来保存鼠标是否在div中这个状态：var isOut=true;(默认不再区域中) 第二步：在div中加上onmouseover和onmouseout事件，用来控制变量isOut： <div id="codediv" onmouseover="isOut=false" onmouseoout="isOut=true"/> 第三步：在显示div的事件中加入取消事件冒泡的语句：(因为这个事件也会触发document.onmousedown) event.cancelBubble=true; 第四步：为document添加onmousedown事件： document.onmousedown=function(){ var codediv=document.getElementById("codediv"); if(codediv.style.display!="none" && isOut){ codediv.style.display!="none"; } } OK。备注：document .onclick事件也行，但要保证页面中其他控件没有用到这个事件，不然可能会发生冲突。 2009-05-08 来源： https://www.cnblogs

固定DIV在页面的某个位置

阅读更多关于固定DIV在页面的某个位置

首先，我们将目光投向了CSS规范，我想很多人和我一样很快就想到了position属性，说到定位，我们很容易想到这个属性。这个属性一共有四个选项：static、relative、absolute、fixed。很高兴，我们在阅读了相关的注释后，我们大概能看到fixed是比较符合我们的需求的： fixed: 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。于是我们很快就有了以下的代码，不过很遗憾，IE中并不能通过严格的测试，但是FireFox中却可以通过测试！ <html> <head>  <title>Only fit FireFox! :(</title>  <style type="text/css"> .fixed_div{ position:fixed; left:200px; bottom:20px; width:400px; } </style> </head> <body> <div class="fixed_div" style=

CSS中设置div垂直居中

阅读更多关于 CSS中设置div垂直居中

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。 Tips: 完美解决方案在文末！一、单行垂直居中　　如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。 1 2 3 4 5 6 7 如： div { height : 25px ; line-height : 25px ; overflow : hidden ; } 　　这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

div 图片垂直居中

阅读更多关于 div 图片垂直居中

div水平居中很容易，设置css样式 text-align: center; 就可以了。垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。第一种方法：通过一个空白图片可以达到垂直居中的效果。 <html> <style> #image{ width:500px; height:500px; background:#fff000; text-align: center; overflow: hidden; } #image img { 　　　　vertical-align: middle; 　　 } #block { width: 0px; height: 100%; } </style> <body> <div id="image"> <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/> <img src="" id="block"/> </div> </body> </html> 个人觉得 vertical-align: middle 是相对于左边的高度垂直居中的，我给左边一个填满div的图片，就可以实现垂直居中了。第二种方法：往div里面加表格。 <html> <style> #a { background: #fff000;

div img 垂直居中

阅读更多关于 div img 垂直居中

*/ /*--> */ 内容内容内容 CSS代码: .box { width : 300px ; height : 300px ; text-align : center ; position : relative ; overflow : hidden ; display : table-cell ; vertical-align : middle ; } .box .mid { width : 300px ; position : static ; +position : absolute ; top : 50% ; left : 0 ; text-align : center ; } .box .inner { position : static ; +position : relative ; top : -50% ; vertical-align : middle ; } div class="box" style="border:1px solid blue;"> < div class ="mid" > < div class ="inner" style ="border:1px solid red;" > 内容 < br /> 内容 < br /> 内容 </ div > </ div > </ div > < div class ="box" style =

DIV 始终位于文档底部

阅读更多关于 DIV 始终位于文档底部

DIV 始终位于文档底部设置 body 为绝对定位，最小显示高度为： 100% ，宽度为： 100% ；设置底部显示块为绝对定位， bottom: 0 ，是 body 元素的最后一个直接子元素；设置底部块元素同级元素的上一个兄弟元素的边距可以包含下底部元素即可； <!DOCTYPE html> <html lang="en"> <head> <style> .slibing-div{ border: 2px red solid; height: 200px; } .footer{ border: 2px blue solid; } </style> </head> <body style="min-height: 100%; width: 100%; position: absolute;"> <div style="margin-bottom: 100px;" class="slibing-div"> <div style="text-align: center">测试用例</div> </div> <div style="position: absolute; bottom: 0; width: 100%; height: 100px;" class="footer"> 底部块 </div> </body> </html> 来源： https://www

订阅 div