طرح بندی دو ستونی با استفاده از HTML5 و CSS

ابتدا صفحه HTML را باز کرده و به کد نگاهی بیندازید. صفحه layout_two_col.html نام دارد و کد به صورت زیر است:

HTML5 code for a two column layout

کد یکسان با طرح یک ستون است! (خوب ، برای مقاله دوم اضافه شده قبول کنید.)

وقتی این صفحه در یک مرورگر مشاهده می شود ، به این شکل است:

The two column layout in a browser

ستون اول نوار پیمایش را نگه می دارد. اما لازم نیست هنوز می توانید یک نوار پیمایش در بالا داشته باشید. سپس ستون اول می تواند هر آنچه را دوست دارید در خود جای دهد: پیشنهادات ویژه ، اخبار ، مطالب قبلی وبلاگ و غیره
ستون دوم مربوط به مطالب اصلی صفحه است. در اینجا ، ما دو مقاله داریم. باز هم ، رنگ پس زمینه فقط به این ترتیب است که شما می توانید هر بخش را ببینید.
فایل CSS two_col_style را باز کرده و به کد نگاهی بیندازید. آن را با طرح یک ستون مقایسه کنید. باز هم ، تفاوت چندانی وجود ندارد.

بخشی که نوار پیمایش را به ستون اول منتقل می کند float است: در کلاس NAV باقی مانده است و صفحه نمایش: بلوک در کلاس لیست NAV است. سپس می توانید با عرض و ارتفاع بازی کنید تا به شکل دلخواه خود برسید.

تمرین
با مقادیر مختلف CSS بازی کنید و ببینید که هنگام بارگیری مجدد صفحه چه اتفاقی می افتد. برای این تمرین ، بهتر است فایل ما را در پوشه های HTML خود کپی کنید ، به این ترتیب نسخه اصلی را دست نخورده باقی می گذارید.

اکنون کمی قدیمی است ، اما با این وجود ایده خوبی درباره چیدمان CSS می دهد.

در بخش بعدی ، نحوه ایجاد جدول با استفاده از HTML و CSS را یاد خواهید گرفت.