div 订阅
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。 展开全文
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
信息
常用操作
网站制作
类    型
软件
缩写
DIV
中文名
分隔,分割,划分
应用范围
软件,互联网
外文名
DIVision
DIV定义
可定义文档中的分区或节(division/section)。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记
,那么该标签的作用会变得更加有效。注释:
是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。提示:请使用
元素来组合块级元素,这样就可以使用样式对它们进行格式化。
收起全文
精华内容
下载资源
问答
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
    水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法

    下面说两种在屏幕正中(水平居中+垂直居中)的方法
    放上示范的html代码:

    <body>
    	<div class="main">
    		<h1>MAIN</h1>
    	</div>
    </body>
    
    • 方法一:

    div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

    .main{
    	text-align: center; /*让div内部文字居中*/
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    }
    

    效果如图:
    这里写图片描述

    • 方法二:
      仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
     .main{
    	text-align: center;
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }
    
    • 方法三:
      对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:
    <p><center>123</center></p>
    

    这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

    由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:

    <p style="text-align:center;">123</p>
    


    欢迎大家加入QQ群一起交流讨论, 「吟游」程序人生——YinyouPoet
    展开全文
  • HTML(css+div)登录界面

    万次阅读 多人点赞 2018-05-31 23:53:39
    HTML(css+div)登录界面

     (1)这是当时做的一个课程设计,很多人想要图片,在这里我把用到的所有图片资源分享下

     (2)链接:https://pan.baidu.com/s/1nUX1DQe_aDZQMf2Zbblm_A
             提取码:twcp

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>login</title>
    <style type="text/css">
    *{
    	margin: 0;
    	padding: 0;
    }
    #wrap {
    	height: 719px;
    	width: 100;
    	background-image: url(4.jpg);
    	background-repeat: no-repeat;
    	background-position: center center;
    	position: relative;
    }
    #head {
    	height: 120px;
    	width: 100;
    	background-color: #66CCCC;
    	text-align: center;
    	position: relative;
    }
    #foot {
    	width: 100;
    	height: 126px;
    	background-color: #CC9933;
    	position: relative;
    }
    #wrap .logGet {
    	height: 408px;
    	width: 368px;  
    	position: absolute;
    	background-color: #FFFFFF;
    	top: 20%;
    	right: 15%;
    }
    .logC a button {
    	width: 100%;
    	height: 45px;
    	background-color: #ee7700;
    	border: none;
    	color: white;
    	font-size: 18px;
    }
    .logGet .logD.logDtip .p1 {
    	display: inline-block;
    	font-size: 28px;
    	margin-top: 30px;
    	width: 86%;
    }
    #wrap .logGet .logD.logDtip {
    	width: 86%;
    	border-bottom: 1px solid #ee7700;
    	margin-bottom: 60px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-left: auto;
    }
    .logGet .lgD img {
    	position: absolute;
    	top: 12px;
    	left: 8px;
    }
    .logGet .lgD input {
    	width: 100%;
    	height: 42px;
    	text-indent: 2.5rem;
    }
    #wrap .logGet .lgD {
    	width: 86%;
    	position: relative;
    	margin-bottom: 30px;
    	margin-top: 30px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #wrap .logGet .logC {
    	width: 86%;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    }
    
    
    .title {
    	font-family: "宋体";
    	color: #FFFFFF;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
    	font-size: 36px;
    	height: 40px;
    	width: 30%;
    }
    
    .copyright {
    	font-family: "宋体";
    	color: #FFFFFF;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
    	height: 60px;
    	width: 40%;
    	text-align:center;
    }
    	
    
    #foot .copyright .img {
    	width: 100%;
    	height: 24px;
    	position: relative;
    }
    .copyright .img .icon {
    	display: inline-block;
    	width: 24px;
    	height: 24px;
    	margin-left: 22px;
    	vertical-align: middle;
    	background-image: url(%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6.png);
    	background-repeat: no-repeat;
    	vertical-align: middle;
    	margin-right: 5px;
    }
    	
    .copyright .img .icon1 {
    	display: inline-block;
    	width: 24px;
    	height: 24px;
    	margin-left: 22px;
    	vertical-align: middle;
    	background-image: url(%E5%9C%B0%E5%9D%80.png);
    	background-repeat: no-repeat;
    	vertical-align: middle;
    	margin-right: 5px;
    }
    .copyright .img .icon2 {
    	display: inline-block;
    	width: 24px;
    	height: 24px;
    	margin-left: 22px;
    	vertical-align: middle;
    	background-image: url(%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F.png);
    	background-repeat: no-repeat;
    	vertical-align: middle;
    	margin-right: 5px;
    }
    #foot .copyright p {
    	height: 24px;
    	width: 100%;
    }
    </style>
    </head>
    
    <body>
    <div class="header" id="head">
      <div class="title">企业人事管理系统</div>
    	
    </div>
    	
    <div class="wrap" id="wrap">
    	<div class="logGet">
    			<!-- 头部提示信息 -->
    			<div class="logD logDtip">
    				<p class="p1">登录</p>
    			</div>
    			<!-- 输入框 -->
    			<div class="lgD">
    				<img src="img/logName.png" width="20" height="20" alt=""/>
    				<input type="text"
    					placeholder="输入用户名" />
    			</div>
    			<div class="lgD">
    				<img src="img/logPwd.png" width="20" height="20" alt=""/>
    				<input type="text"
    					placeholder="输入用户密码" />
    			</div>
    			<div class="logC">
    				<a href="index.html" target="_self"><button>登 录</button></a>
    			</div>
    		</div>
    </div>
    	
    <div class="footer" id="foot">
      <div class="copyright">
        <p>Copyright © 2018 Qunar.com Inc. All Rights Reserved.</p>
        <div class="img">
    		<i class="icon"></i><span>联系邮箱:jiankangsun@yahoo.com</span>
    	</div>
    	
    	<div class="img">
    		<i class="icon1"></i><span>联系地址:合肥工业大学</span>
    	</div>
    	  
    	<div class="img">
    	  <i class="icon2"></i><span>联系电话:18355042634</span>
    	</div>
    
    
      </div>
    	
    </div>
    	
    	
    </body>
    </html>
    

    展开全文
  • 实现div里的img图片水平垂直居中

    万次阅读 多人点赞 2017-03-31 09:53:09
    div> <img src="1.jpg" alt="haha"> </div> </body>方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。...

    body结构

    <body>
    	<div>
    		<img src="1.jpg" alt="haha">
    	</div>
    </body>
    

    方法一:
    将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。

    <style type="text/css">
    	*{margin: 0;padding: 0;}
        div{
    		width:150px;
    		height: 100px;
    		display: table-cell;
    		vertical-align: middle;
    		text-align: center;
    		border:1px solid #000;
    	}
    	img {
            width: 50px;
      		height: 50px;
    	}
    </style>
    

    结果如下图所示:
    这里写图片描述

    方法二:
    通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。

    <style type="text/css">
    	*{margin: 0;padding:0;}
    	div{
    		width:150px;
    		height: 100px;
    		position: relative;
    		border:1px solid #000;
    	}
    	img {
      		width: 50px;
      		height: 50px;
      		position: absolute;
      		top: 50%;
    		left: 50%;
      		margin-top: -25px; /* 高度的一半 */
      		margin-left: -25px; /* 宽度的一半 */
    	}
    </style>
    

    结果如下图所示:
    这里写图片描述


    很久以前的文章了,看到浏览量这么高,我再补充几种实现方法

    方法三:可以用在不清楚图片图片或元素的真实宽高情况下
    还是通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            width:150px;
            height: 100px;
            position: relative;
            border:1px solid #000;
        }
        img {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
    

    方法四:

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            width:150px;
            height: 100px;
            position: relative;
            border:1px solid #000;
        }
        img {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    

    方法五:弹性布局flex

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            width:150px;
            height: 100px;
            border:1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        img {
            width: 50px;
            height: 50px;
        }
    </style>
    

    效果都一样,希望能帮到大家!

    读后有收获并有兴趣的可以微信打赏哈哈:
    在这里插入图片描述

    展开全文
  • 图片溢出div,超出div解决办法

    万次阅读 2018-07-07 10:14:50
    这个时候,我给它设置了一个小于我的div的宽度,它是可以进入div盒子而不溢出的,然而,当我们的浏览器缩小的时候,我的div是栅格布局,固定了百分比会随浏览器可视界面而缩小,但是此时图片因为固定宽度不能同步...

    当我的图片宽度大小没有设置,过大的时候,它会超出我的div宽度。这个时候,我给它设置了一个小于我的div的宽度,它是可以进入div盒子而不溢出的,然而,当我们的浏览器缩小的时候,我的div是栅格布局,固定了百分比会随浏览器可视界面而缩小,但是此时图片因为固定宽度不能同步缩小,还是会发生溢出现象。还有一种将就的办法,就是设置overflow:hidden,隐藏溢出的部分,但是大家都可以预料的到那种糟糕的效果

    我的解决办法

    方法一

    给图片设置width:100%

    方法二

    可以使用一段js来解决

    
    window.onload = function(){
    //获取图片元素
     var imgs = document.getElementsByTagName("img");
    //获取div元素   
     var contentLeft = document.getElementById("col-md-7");
    //使用js设置图片元素宽度的变化    
    for(var i=0; i<imgs.length; i++){
            imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
        }
    }
    //40是要减去padding

    方法三

    1. 使用CSS max-width和max-height实现图片自动等比例缩小

    2. 很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度,这样图片就会等比例缩放图片,然图片相对不变形清晰。

    3. 使用max-width:300px或max-height:100px,即可解决图片比例缩小。但这样存在一个问题,如果按照宽度缩放,但图片过高会超出溢出盒子,这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height,IE6不支持,我们需要设置个width:expression(this.width > 300 ? "300px" : this.width);或者height:e­xpression(this.height>100?"100px":this.height);。

    <div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
    <script type="text/javascript" >

    方法四

    此时无论怎么响应,图片永远不会溢出

    完整代码如下

    <div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>
    <script type="text/javascript" >
    
    
    //缩放图片到合适大小
    function ResizeImages()
    {
       var myimg,oldwidth,oldheight;
       var maxwidth=550;
       var maxheight=880
       var imgs = document.getElementById('article').getElementsByTagName('img');   //如果你定义的id不是article,请修改此处
    
    
       for(i=0;i<imgs.length;i++){
         myimg = imgs[i];
    
    
         if(myimg.width > myimg.height)
         {
             if(myimg.width > maxwidth)
             {
                oldwidth = myimg.width;
                myimg.height = myimg.height * (maxwidth/oldwidth);
                myimg.width = maxwidth;
             }
         }else{
             if(myimg.height > maxheight)
             {
                oldheight = myimg.height;
                myimg.width = myimg.width * (maxheight/oldheight);
                myimg.height = maxheight;
             }
         }
       }
    }
    //缩放图片到合适大小
    ResizeImages();
    </script>

     

    此时无论怎么响应,图片永远不会溢出

    完整代码如下

     
    <html>
    <head>
        <meta charset="utf-8" />
        <title>div图片溢出</title>
    
    <style type="text/css">
    
    #container {
        width:80%;
        margin: 0 auto;
    }
    
    #col-md-7 {
        width:70%;
        height: 800px;
        float:left;
        border:1px solid red;
        padding: 20px;
    }
    
    #col-md-5 {
        width: 15%;
        float: right;
        height: 800px;
        border:1px solid blue;
        padding: 20px;
    }
    
    img {
        max-width: 730px;
    }
    
    </style>
    
    <script type="text/javascript">
    
    window.onload = function(){
        var imgs = document.getElementsByTagName("img");
        var contentLeft = document.getElementById("col-md-7");
        for(var i=0; i<imgs.length; i++){
            imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
        }
    }
    window.onresize = function(){
        var imgs = document.getElementsByTagName("img");
        var contentLeft = document.getElementById("col-md-7");
        for(var i=0; i<imgs.length; i++){
            imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
        }   
    }
    </script>
    
    </head>
    
    
    <body>
        <div id="container">
            <div id="col-md-7">
                ![小图片](http://upload-images.jianshu.io/upload_images/4958474-b0f8ff5d813edd7e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                ![大图片](http://upload-images.jianshu.io/upload_images/4958474-47fe7b80107cdb9a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            </div>
            <div id="col-md-5"></div>
        </div>
    </body>
    </html>

    展开全文
  • 汇编div指令

    万次阅读 2019-06-08 17:23:56
    div指令是除法指令。100001/100,100001是被除数,100是除数。一般格式为:div reg或div 内存单元,reg和内存单元存放的是除数,除数可分为8位和16为2种。 被除数:默认放在AX或DX和AX,如果除数为8位,被除数则为...
  • HTML如何让IMG自动适应DIV容器大小

    万次阅读 多人点赞 2018-05-22 12:21:12
    HTML如何让IMG自动适应DIV容器...DIV样式(元素居中显示) IMG样式(横向拉伸,纵向自动匹配大小) width:100%; height:auto; DIV样式(元素居中显示) display:flex; align-i...
  • div居中和div内容居中

    万次阅读 2018-08-27 23:44:46
    一、div自身居中: 使用margin:0 auto 上下为0,左右自适应的css样式。 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠左(设置float:left)和div靠右(设置float:...
  • Html div 超出 父div区域

    千次阅读 2019-08-23 16:14:58
    解决方法:在div里面添加下面一句 <div style="clear: both"></div>
  • html5:div 横向排列的方法。

    万次阅读 多人点赞 2017-11-21 12:06:47
    div 横向排列的方法。 以下面这组 div 为例,wrap 的高度由内容撑开 <div id="wrap"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</...
  • 情况如下:     ... 外层的div有一个点击跳转事件,按钮div也是一个点击事件用来隐藏整个div...解决方法: 在子级div上增加一个事件 onClick="event.cancelBubble = true",这样就可以只触发自身的点击事件了
  • div嵌套的div水平垂直居中

    千次阅读 2019-03-18 23:33:58
    效果图如下: body代码: <div class="div-one"> <div class="div-two"></div> </div> css代码: .div-one{ width: 300px; height: 300px; positi...
  • 在html中如何使div在页面中居中显示

    万次阅读 多人点赞 2019-02-28 13:40:41
    在html中如何使div在页面中居中显示 ...尝试着写了一个html网页,结果就连div如何在页面中居中显示都查了好久才弄出来。其实我不知道为什么这样...代码如下(这是一个网页最外层div的css样式): #all{ width: 80...
  • 把鼠标悬浮在标签a标签上时,出现或隐藏div,当div出现之后,将鼠标移到div上的时候,div不消失鼠标还可以继续操作其他功能的代码如下: &lt;a id="login-btn"&gt;按钮&lt;/a&gt; &...
  • div覆盖div DIV相互重叠如何解决

    千次阅读 2018-01-06 23:14:09
    http://www.divcss5.com/rumen/r674.shtml
  • 清空DIV

    千次阅读 2018-09-25 15:20:37
    var div = $("&lt;div&gt;").addClass("col-md-12"); div.append("步骤"+(i+1) + ":"+array[i].resultInput); $("#inputContainer")....
  • DIV不换行与DIV换行 DIV默认自动换行

    千次阅读 2017-08-02 08:24:47
    DIV不换行与DIV换行 DIV默认自动换行了解篇 DIV盒子默认是换行独占100%宽度: DIV盒子没有赋予CSS样式时,默认DIV盒子是独占一行(宽度为100%)。 如下默认情况HTML代码: > html> head> meta charset="utf-8...
  • div p、div>p、div+p、div~p、div.a 、p,span的用法和区别

    万次阅读 多人点赞 2019-01-22 11:08:37
    div p、div&gt;p、div+p、div~p、div.a 的用法和区别 div p :将所有&lt;div&gt;标签里面的&lt;p&gt;标签选中(子标签和孙子辈标签) &lt;style&gt;   div span{color:red;} &...
  • vue中 div 鼠标悬浮显示另一个div

    千次阅读 2020-01-14 15:27:10
    div class="video1"></div> <div class="edittool"> 提示内容 </div> .video1:hover+div{ display: block; } 注意:edittool是悬浮体,该种写法二者必须为兄弟节点。 ...
  • 实现div中的div水平垂直居中

    万次阅读 2019-08-19 14:28:44
    利用transform实现div居中,要先设置定位 css .outer { width: 500px; height: 200px; background-color: green; position: relative; } .inner { width: 20px; height: 10px; background-colo...
  • div布局中:div中加div,如果里面的div给margin-top,则外面的div就会整体下移,如何解决
  • DIV中的DIV居中显示

    千次阅读 2017-12-16 10:33:02
    发现前端div中的div不是居中显示的,网上说将父级DIV设置为text-align:center 子级设置为margin:0 auto,但是我试了下无效,不知道为什么。后来换了一种方法, 父级Divdisplay: flex; align-items: center; 子级...
  • DIV的Position属性和DIV嵌套DIV

    千次阅读 2012-04-09 17:19:38
    这里一如既往的推荐使用 div布局,其实我们只要掌握了div的position属性和div的float属性,布局是非常灵活的,这里详细说一下div的position,没 想象中那么简单,也没想象中那么复杂。 2.position的四种取值 ...
  • MVC项目View中,现在有2个divDiv1和Div2 Div1是在页面一刷新的时候就会加载的 Div2是在js中执行初始化脚本时,append方法添加的 由于这两个div挨得近,所以Div2会覆盖住Div1(因为html加载好后,在执行的js中...
  • div同行实现或div自动换行

    千次阅读 2019-04-25 11:48:55
    使用"float:left"时,div会影响下一个div。"float:left"会让下一个div排在右边,当前div排在左边。 同行显示 <!DOCTYPE HTML> <html> <body> <div> <div style="float:left;display:...
  • DIV+JS画图,DIVDIV之间的连线!

    热门讨论 2008-11-15 10:40:59
    实现DIVDIV之间的连线,工程流程图那样.使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法: var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow...
  • 我们可能在审查网页元素时,会发现这样的一种情况: ... ...从上面的代码来看,包含一个父div和两个子div。而子div又有高度,但是审查元素时,却发现该父div却没有高度(所以此时父div的背景色#c
  • Div与Span标签详解

    万次阅读 2021-08-12 22:30:33
    Div与Span标签详解一、DIV1.简介2.作用3.案例二、span1.简介2.语法3.案例 一、DIV 1.简介 在html中布局使用最多标签为div, 我们通常将网页重构说成div css制作。 Div本身没有什么特别之处,只是div标签替代了...
  • jQuery查询div的子div数量

    千次阅读 2019-03-04 18:40:08
    jQuery查询div的子div数量 页面示例: &lt;div id="d1" class="c1"&gt; &lt;div id="dd1" class="cc1"&gt;1&lt;/div&gt; &lt;div id=&...
  • css:实现透明div上的div不透明,也可说父div透明,子div不透明,但这里并不是严格的父子关系,只是看起来像是父子关系。 一、方法一: (1)代码片段:... <style> div.background { width:500px;...
  • div居中以及div中的元素居中

    万次阅读 2018-10-23 14:45:29
    div居中以及div中的元素居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果。 div水平居中:设置margin的左右边距为自动。 1 div 2 ...

空空如也

空空如也

1 2 3 4 5 ... 20