div_divide - CSDN
div 订阅
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。 展开全文
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
信息
常用操作
网站制作
类    型
软件
缩写
DIV
中文名
分隔,分割,划分
应用范围
软件,互联网
外文名
DIVision
DIV定义
可定义文档中的分区或节(division/section)。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记
,那么该标签的作用会变得更加有效。注释:
是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。提示:请使用
元素来组合块级元素,这样就可以使用样式对它们进行格式化。
收起全文
精华内容
参与话题
  • div

    千次阅读 2019-06-29 06:37:39
    div> 是一个块级元素。这意味着它的内容自动地开始一个新行。 实际上,换行是 <div> 固有的唯一格式表现。 可以对同一个 <div> 元素应用 class 或 id 属性来添加额外的样式,但是更常见的情况是只...

    <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。

    实际上,换行是 <div> 固有的唯一格式表现。

    可以对同一个 <div> 元素应用 class 或 id 属性来添加额外的样式,但是更常见的情况是只应用其中一种。

    这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

    <html>
    <body>
    
    <h3>This is a header</h3>
    <p>This is a paragraph.</p>
    
    <div style="color:#00FF00">
      <h3>This is a header</h3>
      <p>This is a paragraph.</p>
    </div>
    
    </body>
    </html>

    转载于:https://www.cnblogs.com/chrisghb8812/p/5632878.html

    展开全文
  • 四个完整的DIV+CSS网页案例,有详细解说

    千次下载 热门讨论 2020-07-30 23:33:23
    四个完整的DIV+CSS网页案例,有详细解说,教你如何一步步完成页面制作。
  • HTML CSS + DIV实现整体布局

    万次阅读 多人点赞 2018-09-14 21:01:13
    盒子模型的相关属性 margin(外边距/边界) border(边框) padding(内边距/填充 )  我们看图理解一下各属性作用:    以上属性又分为上、右、下、左四个方向    问题:页面元素的宽度width、高度height...

    盒子模型的相关属性

    • margin(外边距/边界)
    • border(边框)
    • padding(内边距/填充 )

         我们看图理解一下各属性作用:

         

         以上属性又分为上、右、下、左四个方向
         
         问题:页面元素的宽度width、高度height如何计算?
         答案:元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度
         比如:元素实际占位高度 = height属性 + 上下padding + 上下边框宽度


    9、盒模型的层次关系

        我们通过一个经典的盒模型3D立体结构图来理解,如图:
        

         从上往下看,层次关系如下:

         第1层:盒子的边框(border),
         第2层:元素的内容(content)、内边距(padding)
         第3层:背景图(background-image)
         第4层:背景色(background-color)
         第5层:盒子的外边距(margin)

         从这个层次关系中可以看出,当同时设置背景图和背景色时,背景
         图将在背景色的上方显示


    11、水平居中和垂直居中

        水平居中包含两种情况:
            块级元素的水平居中:margin:0px auto;
            文字内容的水平居中:text-align: center;
        
        垂直居中:
            常见的单行文字的垂直居中可设置文字所在行的height与
            行高样式属性一致,比如:
            div{
                width: 400px;
                height: 400px;
                line-height: 400px;/*行高与div高度一致*/
            }


    13、首页布局CSS + DIV代码分析

        HTML结构代码:
        <div id="container">
                <div id="header">顶部(header)</div>
                <div id="main">主体部分(main)</div>
                <div id="footer">底部(footer)</div>
        </div>
        
        CSS样式代码:
        /*主面板样式*/
        #container { 
            width:980px; 
            margin:0px auto;/*主面板DIV居中*/
        }
       /*顶部面板样式*/
        #header {
            width:100%;
            height:150px;
            border:1px #F00 solid;
        }
        /*中间部分面板样式*/
        #main {
            width:100%;
            height:400px;
            border:1px #F00 solid;
        } 
        /*底部面板样式*/
        #footer {
            width:100%;
            height:100px;
            border:1px #F00 solid;
        }

    14、为什么需要float浮动属性?
       
        我们来看看下图:

        
        
        问题:如何让商品分类DIV、内容DIV和右侧DIV并排放置?
        答案:使用float(浮动)样式

    15、浮动属性

        理解浮动属性首先要搞清楚,什么是文档流?
        文档流:浏览器根据元素在html文档中出现的顺序,
            从左向右,从上到下依次排列
        
        浮动属性是CSS中的定位属性,用法如下:
            float: 浮动方向(left、right、none);

        left为左浮动、right为右浮动、none是默认值表示不浮动
        ,设置元素的浮动,该元素将脱离文档流,向左或向右移动
        直到它的外边距碰到父元素的边框或另一个浮动元素的边
        框为止


        浮动示例,没有使用浮动的3个DIV:
        HTML结构代码:
            <div id="first">第1块div</div>
            <div id="second">第2块div</div>
            <div id="third">第3块div</div>

        CSS样式代码:
            #first, #second, #third{
                    width:100px;
                    height:50px;
                    border:1px #333 solid;
                    margin:5px;
            }

        执行效果如图:
        


        样式中加入 float:left;
        执行效果如图:
        
        
        你再修改为 float: right试试右浮动是什么效果
        
    16、让商品分类DIV、内容DIV和右侧DIV并排放置

        HTML结构代码:
        

    Java代码 复制代码 收藏代码

    1. <div id="container"> 
    2.     <div id="header">顶部(header)</div> 
    3.     <div id="main"> 
    4.         <div class="cat">商品分类(cat)</div> 
    5.         <div class="content">内容(content)</div> 
    6.         <div class="sidebar">右侧(sidebar)</div> 
    7.     </div> 
    8.     <div id="footer">底部(footer)</div> 
    9. </div> 
    
     
    1. <div id="container">

    2. <div id="header">顶部(header)</div>

    3. <div id="main">

    4. <div class="cat">商品分类(cat)</div>

    5. <div class="content">内容(content)</div>

    6. <div class="sidebar">右侧(sidebar)</div>

    7. </div>

    8. <div id="footer">底部(footer)</div>

    9. </div>

        
       CSS样式代码(在第13节CSS代码基础上加入):

        .cat, .sidebar {
            float:left;
            width:20%;
            height:100%;
        }
        .content {
            float:left;
            width:60%;
            height:100%;
        }

    17、clear清除

        clear只对块级元素有效,表示如果前一个元素存在左浮动或右浮动,则换行
        clear属性的取值:rigth、left、both、none

    18、总结

    • 盒子模型有哪些属性?各属性又分别包含哪些属性?
    • float属性的应用场合?有哪些取值?   
    • clear属性的应用场合?有哪些取值?

    html中的布局非常重要,下面我来简单介绍一下。

    工具/原料

    • 电脑

    • inbuilder

    方法/步骤

    1. 观察图片构成。总共十一个板块。首先要有一个大的div包含所有,背景色等。

      html 中div布局的简单使用

    2. .background{

      background-color: #008000;

      height: 800px;

      width: 420px;

      margin: 0 auto;

      }

      html 中div布局的简单使用

    3. .a1{

      height: 80px;

      width: 200px;

      background: #fff;

      margin-left: 50px;

      margin-top: 10px;

      margin-right: 10px;

      float: left;

      html 中div布局的简单使用

    4. .a2{height: 80px;

        width: 100px;

        background-color: #fff;

        margin-top: 10px;

        float: left;

        }

       

      .a3{

      height: 80px;

      width: 310px;

      background-color: #FFFFFF;

      margin-left: 50px;

      margin-top: 10px;

       

      float: left;

      }

      .a4{

      height: 80px;

      width: 310px;

      background-color: #FFFFFF;

      margin-left: 50px;

      float: left;

      margin-top: 10px;

      html 中div布局的简单使用

    5. .a5{

      height: 80px;

      width: 150px;

      background: #fff;

      margin-left: 50px;

      margin-top: 10px;

      margin-right: 10px;

      float: left;

      }

      .a6{height: 80px;

        width: 150px;

        background-color: #fff;

        margin-top: 10px;

        float: left;

        }

      .a7{height: 50px;

        width: 310px;

        background-color: #fff;

        margin-top: 10px;

        margin-left: 50px;

        float: left;

        } 

      .a8{

      height: 80px;

      width: 150px;

      background: #fff;

      margin-left: 50px;

      margin-top: 10px;

      margin-right: 10px;

      float: left;

      }

      html 中div布局的简单使用

    6. .a9{height: 80px;

        width: 150px;

        background-color: #fff;

        margin-top: 10px;

        float: left;

        }

      .a10{height: 80px;

        width: 310px;

        background-color: #fff;

        margin-top: 10px;

        float: left;

        margin-left: 50px;

        } 

      .a11{height: 80px;

        width: 310px;

        background-color: #fff;

        margin-top: 10px;

        float: left;

        margin-left: 50px;

        margin-bottom: 10px;

        } 

      </style>

      html 中div布局的简单使用

    7. </head>

      <body>

      <div >

      <div class="background">

        <div class="a1">1</div>

        <div class="a2">2</div>

        <div class="a3">3</div>

        <div class="a4">4</div>

        <div class="a5">5</div>

        <div class="a6"> 6</div>

        <div class="a7">7</div>

        <div class="a8">8</div>

        <div class="a9">9</div>

        <div class="a10">10</div>

        <div class="a11">11</div>

         </div>

      </div>

      </body>

      </html>

      END

    注意事项

    • 不使用中文命名

    • float:left 浮动

    展开全文
  • div详解

    2019-06-23 22:57:04
    链接: http://www.mingrisoft.com/book/1115242010301101112.html 转载于:https://www.cnblogs.com/Pjwork/p/9165294.html

    链接:

    http://www.mingrisoft.com/book/1115242010301101112.html

     

    转载于:https://www.cnblogs.com/Pjwork/p/9165294.html

    展开全文
  • HTML DIV布局实例

    千次阅读 2019-05-05 20:18:36
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...Div首页布局</title> <style type="text/css"> *{ margin: 0; padding: 0;...

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Div首页布局</title>
      <!--  <link rel="stylesheet" href="div_index.css">-->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background-color: rgba(202,202,202,0.35);
            }
            .header{
                width: 100%;
                height:30px;
                background-color: rgba(0,0,0,0.5);
            }
            .nav{
                width: 1000px;
                height: 70px;
                background-color: white;
                margin: 0 auto;
            }
            .focus{
                width:100%;
                height: 300px;
                background-color: #999999;
                margin: 0 auto;
    
            }
            .content{
                width: 1000px;
                height: 1300px;
                background-color: #EEEEEE;
                margin: 0 auto;
            }
            .footer{
                margin: 0 auto;
                width: 1000px;
                height: 30px;
                background-color:rgba(0,0,0,0.5) ;
    
            }
            .logo{
                float: left;
                width: 300px;
                height: 70px;
                background-color: rgba(138,138,138,0.5) ;
            }
            .nav1{
                float: left;
                width: 100px;
                height: 70px;
                background-color: rgba(110, 110, 110, 0.5);
            }
            .nav2 {
                float: left;
                width: 100px;
                height: 70px;
                background-color: rgba(111,111,111,0.5);
            }
            .nav3 {
                float: left;
                width: 100px;
                height: 70px;
                background-color: rgba(109,109,109,0.5);
            }
            .nav4 {
                float: left;
                width: 100px;
                height: 70px;
                background-color: rgba(101,101,101,0.5);
            }
            .nav5 {
                float: left;
                width: 100px;
                height: 70px;
                background-color: rgba(93,93,93,0.5);
            }
            .nav6 {
                float: left;
                width: 100px;
                height: 70px;
                background-color: rgba(85,85,85,0.5);
            }
            .nav7 {
                float: left;
                width: 100px;
                height: 70px;
                background-color: rgba(75,75,75,0.5);
            }
            .lanmu_1{
                width:1000px;
                height: 100px;
            }
            .lanmu_1_1 {
                float: left;
                width: 330px;
                height: 100px;
                background-color: #aaaaaa;
            }
            .lanmu_1_2{
                float: left;
                width: 340px;
                height: 100px;
                background-color: #BBBBBB;
            }
            .lanmu_1_3{
                float: left;
                width: 330px;
                height: 100px;
                background-color: #cccccc;
            }
            .ad_1{
                width: 1000px;
                height: 150px;
                background-color: #E0E0E0;
            }
            .box{
                margin-top: 100px;
                margin-left: 100px;
                width: 800px;
                height: 600px;
    
            }
            .box_1{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #FFFFFF;
            }
            .box_2{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #EEEEEE;
            }.box_3{
                 float: left;
                 width: 200px;
                 height: 200px;
                 background-color: #DDDDDD;
             }.box_4{
                  float: left;
                  width: 200px;
                  height: 200px;
                  background-color: #CCCCCC;
              }.box_5{
                   float: left;
                   width: 200px;
                   height: 200px;
                   background-color: #BBBBBB;
               }
            .box_6{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #AAAAAA;
            }
            .box_7{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #999999;
            }
            .box_8{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #888888;
            }
            .box_9{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #777777;
            }
            .box_10{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #666666;
            }
            .box_11{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #555555;
            }
            .box_12{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #444444;
            }
            .box_13{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #333333;
            }
            .box_14{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #222222;
            }
            .box_15{
                float: left;
                width: 200px;
                height: 200px;
                background-color: #111111;
            }.box_16{
                 float: left;
                 width: 200px;
                 height: 200px;
                 background-color: #000000;
             }
    
    
        </style>
    </head>
    <body>
        <div class="header">
    
        </div>
        <div class="nav">
            <div class="logo"></div>
            <div class="nav1"></div>
            <div class="nav2"></div>
            <div class="nav3"></div>
            <div class="nav4"></div>
            <div class="nav5"></div>
            <div class="nav6"></div>
            <div class="nav7"></div>
        </div>
        <div class="focus">
    
        </div>
        <div class="content">
            <div class="lanmu_1">
                <div class="lanmu_1_1"></div>
                <div class="lanmu_1_2"></div>
                <div class="lanmu_1_3"></div>
            </div>
            <div class="ad_1"></div>
            <div class="box">
                <div class="box_1"></div>
                <div class="box_2"></div>
                <div class="box_3"></div>
                <div class="box_4"></div>
                <div class="box_5"></div>
                <div class="box_6"></div>
                <div class="box_7"></div>
                <div class="box_8"></div>
                <div class="box_9"></div>
                <div class="box_10"></div>
                <div class="box_11"></div>
                <div class="box_12"></div>
                <div class="box_13"></div>
                <div class="box_14"></div>
                <div class="box_15"></div>
                <div class="box_16"></div>
            </div>
        </div>
        <div class="footer">
    
        </div>
    
    </body>
    </html>
    
    展开全文
  • 三个DIV并排放置

    千次阅读 2015-12-03 17:08:14
    无标题文档 .left{ float: left; width: 100px; background-color: #FF0000; height: 50px; margin-top: 100px; } .center{ margin-left: auto; margin-right: auto;... background-color: #
  • DIV+CSS搭建(淘宝首页)布局图

    万次阅读 2019-03-19 16:27:17
    下面的代码只有DIV+CSS的网页结构布局。没有将最终的淘宝静态页面的代码放上去,只有布局图和最终页面的比较图。 搭建的布局图与最终效果的一个比较: <!DOCTYPE html> <html lang="en"> <head&...
  • mysql中的/、div的区别

    千次阅读 2018-12-12 14:51:41
    div为整除,该运算符只取商的整数部分,而不会四舍五入,网上说要求除数和被除数均为整形,经我测试,网上的说法有误。 mysql&gt; select 100.22 div 2.1; +----------------+ | 100.22 div 2.1 | +------------...
  • 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:...
  • div 中id和class使用讲解

    万次阅读 2017-06-13 17:03:49
    div 标签中,我们比较常见的属性是id 和class,那么这两个属性有什么区别吗?今天就来看看这两者的区别。其实id 和class是大部分标签都有的属性。其作用是让CSS或者JavaScript找到DOM元素并操作。  首先看看这两个...
  • 烟花爆炸特效

    万次阅读 2020-07-20 14:02:01
    div class="camera -x"> <div class="camera -y"> <div class="camera -z"> <div class="fireworks"> <div class="line"> <div class="spark"> <div class="fire"&g.
  • (精华)2020年7月17日 vue 实现回到顶部

    万次阅读 2020-07-17 14:32:25
    div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop"> <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class=
  • 多个div在一个div中一行水平显示(float ) html代码: left right bottom 用户display做法是对将要显示在一行的元素应用display:inline-block;既具有block的性质又具有in-line的性质 css ...
  • javascript怎么清空一个div里面的内容

    万次阅读 2014-05-17 11:07:18
    document.getElementById('BIGDraw').innerHTML = ""; 清空div内容
  • html5:div 横向排列的方法。

    万次阅读 多人点赞 2019-03-19 11:14:50
    div 横向排列的方法。 以下面这组 div 为例,wrap 的高度由内容撑开 <div id="wrap"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</...
  • div :style="{height:height+'px',zIndex:zIndex}"> <div :class="className" :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}" > ...
  • 怎么让DIV在另一个DIV里靠底部显示

    万次阅读 2018-03-22 10:09:31
    #CSS.1 {position:relative;}.2 {position:absolute;left;0;bottom:0;...lt;div class="1"&...div class=".../div&...如果 DIV1 里 只有 DIV2 的话在DIV2 CSS样式里 加一个 margin...
  • js获取div内容

    万次阅读 2019-03-07 10:21:14
    假设你的html中有以下的div ...如果是要获取id是id1的div的数据,获取div里面的内容有两种方式 1,纯js获取数据 var a=document.getElementById("id1").innerText; 2,jqeury获取数据 v
  • JS动态获取div的宽度、高度

    万次阅读 2018-01-10 10:41:15
    JS动态获取div的宽度var o = document.getElementById("div1");var w = o.clientWidth||o.offsetWidth;alert("Div1" width is "+w);JS动态获取div的高度同理:var o = document.getElementById("div1");var h = o....
  • JS动态添加div,然后在div中添加元素

    万次阅读 热门讨论 2016-04-15 08:22:19
    需求:  组织部中有个这样的需求,根据年份动态... 先是放一个空的div,让后根据指标的数据,动态的往div中添加元素。 代码:  空的div,存放定性指标 动态往div中添加元素: for (var n = 0; n ; n++) {
1 2 3 4 5 ... 20