位于上海,服务全国!

位于上海,服务全国!

HTML - div元素

作者:admin 分类: 时间:2014-07-04 00:00:00 点击量:1600

 HTML - div元素

 <div>可以看作是封装了其他网页元素的容器和把HTML文件分割为多个单元的标签。 Web开发人员使用<div>元素对HTML元素进行组合和一次性应用CSS样式于许多元素。 举例来说,通过包装一组融入<div>元素的段落元素,开发人员可以利用CSS样式优势,并且开发人员可应用<div>标记所有段落的字体样式,而不必为每个段落进行相同元素的编码。

<div>标签内聚集文本元素以切割HTML文档。

HTML - div元素编码:

<div id="myDiv" name="myDiv" title="Example Div Element">

  <h5>字幕</h5>

  <p>这一段将是您的内容段落...</p>

  <p>在此有另一个内容的文章。</p>

</div>

现在把这些文本元素通过<div>标签组合在一起就可以应用样式的相关属性至<div>标记以变化每个基本元素的外观。

 

 

HTML - div元素编码:

<div id="myDiv" name="myDiv" title="Example Div Element" style="color: #0900C4; font: Helvetica 12pt;border: 1px solid black;">

  <h5>字幕</h5>

  <p>这一段将是您的内容段落...</p>

  <p>在此有另一个内容的文章。</p>

</div>

HTML Div Element in Action:

字幕

这一段将是您的内容段落...

在此有另一个内容的文章.

把元素放置在<div>标记内获取任何样式或属性以应用到主div元素上。 因此,段落和标题元素现在应该以蓝色的Helvetica字体来呈现。 此外,我们已经应用了边框<div>元素以帮助可视化聚集在一起的元素。

HTML - div中的div

 

 

放置<div>元素至<div>元素内以便把这些元素进一步划分。

HTML Div 次分区

<div id="myDiv" name="myDiv" title="Example Div Element" style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;">

  <div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: #FF0000; border: 1px dotted black;">

    <h5>1</h5>

    <p>这一段将是您的内容段落...</p>

    <p>在此有另一个内容的文章。</p>

  </div>

  <br />

  <div id="subDiv2" name="subDiv2" title="Subdivision Div Element" style="color: #FF00FF;border: 1px dashed black;">

     <h5>2</h5>

    <p>这一段将是您的内容段落...</p>

    <p>在此有另一个内容的文章。</p>

  </div>

</div>

div内部的div

1

这一段将是您的内容段落...

在此有另一个内容的文章。

2

这一段将是您的内容段落...

在此有另一个内容的文章。

这个概念是目前大多数网页建立的基础。 被正确划分和细分的HTML文档易于维护和修改。