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+CSS布局页面——1

    万次阅读 2018-07-01 23:38:37
    1.什么是div div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上时个容器,例如使用&lt;p&gt;段落的标签。&lt;p&gt;段落&lt;/p&gt; &lt;p&gt;标签作为一个容器,其中放...
  • div+css布局总结

    2018-04-06 20:04:28
    我们div和css布局是静态布局。 在静态布局下,用百分号和像素设置div等区块的width和heigth属性效果是不一样的。 百分号 1 当你用百分号设置各个div(区块)的时候,是相对父元素的,当父元素相对父元素,父元素...
  • DIV+CSS有哪些经典布局

    千次阅读 2019-06-10 19:39:46
    DIV+CSS经典布局总结: 1 圣杯布局 定义:圣杯布局就是常见的三栏式布局——两边等宽,中间⾃适应的三栏布局。 实现方式: 设置三栏子元素浮动同向(如 float: left; ); 父元素设置左右栏宽度的padding(如 ...
  • DIV+CSS搭建(淘宝首页)布局图

    万次阅读 多人点赞 2019-03-19 16:27:17
    下面的代码只有DIV+CSS的网页结构布局。没有将最终的淘宝静态页面的代码放上去,只有布局图和最终页面的比较图。 搭建的布局图与最终效果的一个比较: <!DOCTYPE html> <html lang="en"> <head&...
  • 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是什么意思

    千次阅读 2015-05-14 17:51:40
    当你把文字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一段在 ...
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上&amp;lt;center&amp;gt;标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...
  • 实现div里的img图片水平垂直居中

    万次阅读 多人点赞 2020-01-16 10:40:37
    div> <img src="1.jpg" alt="haha"> </div> </body>方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。...
  • 文本文字在DIV中垂直水平居中显示

    万次阅读 2020-06-08 09:40:38
    文字居中 垂直居中(vertical-align) 我们都知道有这么一个属性可以让图片,文本等在元素中垂直居中 vertical-align:middle;...vertical-align值有很多,常用的就是middle,bottom,text-bottom等,我们先说...
  • html 中div垂直居中的三种方式

    万次阅读 2019-10-02 21:44:20
    1、第一种: <styletype="text/css"> <....con_div{ width:400px; height:300px; border:1pxsolid#777; text-align:center; display:table-cell; vertical-align:middle; back...
  • HTML(css+div)登录界面

    万次阅读 多人点赞 2020-05-08 19:38:56
    HTML(css+div)登录界面
  • vue 自定义select下拉框样式(div模拟)

    万次阅读 2020-05-13 19:43:00
    div class="divInput"> <div class="input" @click="openValue"> <input v-model="value" type="text" placeholder="筛选实验类型"> <img src="../assets/arrow.png" alt=""> </div>...
  • HTML如何让IMG自动适应DIV容器大小

    万次阅读 多人点赞 2019-04-23 17:45:49
    HTML如何让IMG自动适应DIV容器...DIV样式(元素居中显示) IMG样式(横向拉伸,纵向自动匹配大小) width:100%; height:auto; DIV样式(元素居中显示) display:flex; align-i...
  • 如何让你的html button本身居中呢?两种方法搞定。
  • CSS实现div居中方法

    万次阅读 2018-12-29 11:19:00
    请举出CSS实现div居中效果的方式? 解:居中分为水平居中,垂直居中,水平-垂直居中三中情况   水平居中 本节内容参考:https://www.w3cplus.com/css/elements-horizontally-center-with-css.html 实现1:外边...
1 2 3 4 5 ... 20