صفحه بندی با استفاده از عناصر <div>

عنصر <div> یک عنصر block می باشد که برای گروه بندی عناصر HTML استفاده می شود.

توجه:  CSS برای چیدمان عناصر یا ایجاد پس زمینه یا نمای رنگی برای صفحات استفاده می شود.

در مثال زیر، از پنج عنصر div برای صفحه بندی استفاده شده است. همچنین از CSS برای تعیین مکان عناصر، ایجاد پس زمینه رنگی و مشخص کردن عرض و ارتفاع عناصر استفاده شده است:

مثال (صفحه بندی با استفاده از عنصر div)

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © beyamooz.com</div>

</div>

</body>
</html>
خودتان امتحان کنید »

کد HTML بالا نتیجه زیر را ایجاد خواهد کرد:

Main Title of Web Page

Menu
HTML
CSS
JavaScript
Content goes here
Copyright © beyamooz.com

مثال - خودتان امتحان کنید

Web page layout using <div> elements with 3 columns
در این مثال، نحوه صفحه بندی سه ستونه نشان داده شده است.

آموزش های مرتبط

HTML Layout