HTML中div解释基本用途

  • 原创
  • |
  • 浏览:7109
  • |
  • 更新:
  • |
  • 标签:HTML 软件 

div是html中css样式重要组成部分,一般简单的讲就是把它看成一个盒子,这个盒子可以设置宽、高、颜色,在盒子里面可以添加内容,里面可以是图形或者文字都可以被添加进这个div盒子里面,如果有多个盒子就可以对他们进行排版,上下左右。

工具/原料

  • HTML

方法/步骤

  1. 1

    如图,div内容区都是要写在html中的body中,就如图在body里面建立一个div标签,div标签是双标签,有一个起始标签还需要一个结尾的标签,结尾的标签需要用/表示,如图所示;然后想要对这个div添加修饰,就需要在上面head头部部分添加style样式,在这里添加各种对div的修饰

    HTML中div解释基本用途
  2. 2

    如图,在style中添加修饰,先写上对谁修饰div,然后后面的{}中填写的是具体的属性设置

    HTML中div解释基本用途
  3. 3

    如图,div的属性有宽高,都需要使用英文写,width宽度,然后后面是数值

    HTML中div解释基本用途
  4. 4

    只是设置了宽高,但是是透明的,我们需要让我们肉眼可见状态,所以就有了背景颜色或者添加个有颜色的边框设置

    HTML中div解释基本用途
  5. 5

    这样我们就能在浏览器中看到真实的背景图像了,如图

    HTML中div解释基本用途
  6. 6

    这是一个盒子,如果建立了多个盒子,多个盒子连在一起而且是同样的颜色就不好区分了,所以可以将盒子之间的间距拉开点,就出现了margin这个外边距,设置个数值

    HTML中div解释基本用途
  7. 7

    这样就有了多个图形不相连的状态,如图所示

    HTML中div解释基本用途
  8. 8

    这个时候,如果想要将竖排的多个图形变成横排的,就需要借助float浮动效果了,把他们浮动

    HTML中div解释基本用途
  9. 9

    这样就将图形编程横排排列了,如图所示。

    HTML中div解释基本用途
  10. 10

    既然作为盒子,那么盒子里面就可以装东西了,比如我们装文字信息,就直接在div后面输入文字内容

    HTML中div解释基本用途
  11. 11

    这样就可以看到,将文字添加进了框内。

    HTML中div解释基本用途
    END
  12. 11
    该信息未经许可获取自百度经验

注意事项

  • 如果此经验对您有帮助,请左侧投票/关注,谢谢大家的支持^_^
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部
相关标签HTML软件