如何使用 <div>--HTML 内容分区元素

HTML 内容划分元素(<div>)作为一个容器来构建一个网页成单独的组件,用于个性化设计,本教程将教你如何在网页上创建和设计

`容器。

单独的div元素对页面布局的影响很小,通常会给出attributes(LINK0)来调整其大小、颜色、位置或其他特征。

「

」元素用HTML的「風格」屬性為風格,正如下面的例子所示,一個「

」元素可以包含多個風格屬性:

1<div style=”property: value; property: value;”></div>

请注意,div>元素具有打开和关闭标签,但不需要任何内容。为了了解div>元素在实践中是如何工作的,请清除你的index.html文件并粘贴下面的代码。

1<div style="width:300px;height:200px; background-color:red;">
2</div>

保存文件并在浏览器中重新加载它(有关在浏览器中加载文件的说明,请参阅我们的教程)(https://andsky.com/tech/tutorials/html-elements#loading-an-html-file-in-your-browser)。

Red div

您也可以通过在打开和关闭<div>标签之间添加内容来添加<div>元素的内容。

1<div style="width:300px;height:300px; background-color:red;">
2  This is text inside a div. 
3</div>

保存文件并在浏览器中重新加载它. 您应该收到这样的东西:

Div with text

您也可以将<div>容器放在<div>容器内部,尝试将黄色<div>容器添加到红色<div>容器中,如下所示:

1<div style="width:300px;height:300px; background-color:red;">
2  <div style="width:100px;height:100px; background-color:yellow;">
3  </div>  
4</div>

保存文件并在浏览器中重新加载它. 您应该收到这样的东西:

Div inside div

请注意,‘

’元素是区块级元素,将从自己的行开始,并将后续元素推到下一行。

1<div style="width:300px;height:300px;background-color:red;">
2  <div style="width:100px;height:100px; background-color:yellow;">
3  </div>
4</div>
5<div style="width:100px;height:100px; background-color:blue;">
6</div>

保存文件并在浏览器中重新加载它. 您应该收到这样的东西:

Three divs

您现在应该对<div>元素的基本理解,我们将在本教程系列的第三部分开始构建我们的网站时返回<div>元素。