DIV + CSS رمز تخطيط صفحة الويب Html الشائع الاستخدام

فيما يلي جزء من الاقتباس في صف وعمود واحد:
الجسم { الهامش: 0 بكسل؛ الحشو: 0 بكسل؛
#content { الهامش الأيسر: تلقائي؛ الهامش الأيمن: العرض التلقائي: 400 بكسل؛

يوجد صفين وعمود واحد أدناه عبارة عن أجزاء اقتباس:
الجسم { الهامش: 0 بكسل الحشو: 0 بكسل؛
#content-top { Margin-left:auto;
#content-end {margin-left:auto;

ثلاثة صفوف وعمود واحد أدناه عبارة عن أجزاء اقتباس:
الجسم { الهامش: 0 بكسل؛ الحشو: 0 بكسل؛
#content-top { Margin-left:auto;

#content-mid { Margin-left:auto;
#content-end { Margin-left:auto;

فيما يلي جزء من الاقتباس على سطر واحد وعمودين:
#bodycenter { العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛ الهامش الأيسر: تلقائي؛ الفائض: تلقائي }
#bodycenter #dv1 {طفو: يسار؛ عرض: 280 بكسل؛}
#bodycenter #dv2 {float: right;width: 410px;}

يوجد صفين وعمودين أدناه جزء من الاقتباس:
#header{ العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛ الهامش الأيسر: تلقائي؛}
#bodycenter { العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛

#bodycenter #dv1 { تعويم: العرض الأيسر: 280 بكسل؛}
#bodycenter #dv2 { تعويم: يمين؛ العرض: 410 بكسل؛}

ثلاثة صفوف وعمودين أدناه عبارة عن أجزاء اقتباس:
#header{ العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛
#bodycenter {العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛
#bodycenter #dv1 { تعويم: يسار؛ العرض: 280 بكسل؛}
#bodycenter #dv2 { تعويم: العرض الصحيح: 410 بكسل؛}
#تذييل{ العرض: 700 بكسل؛ الهامش الأيمن: تلقائي؛

صف واحد وثلاثة أعمدة ذات موضع مطلق. وفيما يلي جزء من الاقتباس:
#left { الموضع: مطلق؛ الأعلى: 0 بكسل؛
# الأوسط {الهامش: 20px 190px 20px 190px }
#يمين {الموضع: مطلق؛ الأعلى: 0 بكسل؛ اليمين: 0 بكسل العرض: 120 بكسل؛}

تعويم تحديد المواقع واحد
أتش تي أم أل:
هنا اقتباس:
<div id="warp"> <div id="column"> <div id="column1">هذا هو العمود الأول</div> <div id="column2">هذا هو العمود الثاني</div> <div class="clear"></div> </div> <div id="column3">هذا هو العمود الثالث</div> <div class="clear"></div> </div>

CSS:
هنا اقتباس:
#التفاف{ العرض: 100% الارتفاع: تلقائي؛}
#column{ تعويم: يسار العرض: 60٪؛}
#column1{ تعويم: يسار العرض: 30٪؛}
#column2{ تعويم: يمين العرض: 30%؛}
#column3{ تعويم: العرض: 40٪؛}
.واضح{ واضح:كلاهما؛}

تعويم تحديد المواقع اثنين
أتش تي أم أل:
فيما يلي جزء مقتبس: <div id="center" class="column"> <h1>هذا هو المحتوى الرئيسي.</h1> </div> <div id="left" class="column"> <h2 >هذا هو الشريط الجانبي الأيسر.</h2> </div> <div id="right" class="column"> <h2>هذا هو الشريط الجانبي الأيمن.</h2> </div>

CSS:
هنا اقتباس:
الجسم {الهامش: 0؛ الحشو الأيسر: 200 بكسل؛ الحشو الأيمن: 190 بكسل؛ الحد الأدنى للعرض: 240 بكسل؛}
عمود {الموضع: نسبي؛ تعويم: يسار؛}
#المركز {العرض: 100%؛}
#يسار {العرض: 180 بكسل؛ اليمين: 240 بكسل؛
#يمين {العرض: 130 بكسل؛ الهامش الأيمن: -100%؛}

صفين وثلاثة أعمدة
xhtml: ما يلي هو جزء مقتبس: <div id="header">هذا هو الصف العلوي</div> <div id="warp"> <div id="column"> <div id="column1"> هنا هو الصف الأول عمود واحد</div> <div id="column2">هذا هو العمود الثاني</div> <div class="clear"></div> </P> <P></div > <div id= "column3">هذا هو العمود الثالث</div> <div class="clear"></div> </div>

CSS:
هنا اقتباس:
#header{width:100% height:auto;}
#التفاف{ العرض: 100% الارتفاع: تلقائي؛}
#column{ تعويم: يسار العرض: 60٪؛}
#column1{ تعويم: يسار العرض: 30٪؛}
#column2{ تعويم: يمين العرض: 30%؛}
#column3{ تعويم: العرض: 40٪؛}
.واضح{ واضح:كلاهما؛}

ثلاثة صفوف وثلاثة أعمدة
أتش تي أم أل:
فيما يلي مقتطف مقتبس: <div id="header">هذا هو الصف العلوي</div> <div id="warp"> <div id="column"> <div id="column1">هنا العمود الأول </div> <div id="column2">هذا هو العمود الثاني</div> <div class="clear"></div> </div> <div id="column3">هذا هو العمود الثالث </div> <div class="clear"></div> </div> <div id="footer">هذا هو الصف السفلي</div>

CSS:
هنا اقتباس:
#header{width:100% height:auto;}
#التفاف{ العرض: 100% الارتفاع: تلقائي؛}
#column{ تعويم: يسار العرض: 60٪؛}
#column1{ تعويم: يسار العرض: 30٪؛}
#column2{ تعويم: يمين العرض: 30%؛}
#column3{ تعويم: العرض: 40٪؛}
.واضح{ واضح:كلاهما؛}
#تذييل{العرض:100% الارتفاع:تلقائي؛}