يحلل مثال هذه المقالة تخطيط HTML5 DIV وتخطيط الجدول للرجوع إليه.
DIV Layout: HTML+CSS يحقق تصميمًا بسيطًا.#لا يمكن كتابة ارتفاع ارتفاع كنسبة مئوية ، ويجب أن يكون ارتفاعًا محددًا.
<! #container {عرض 100 ٪ ؛ ؛ لون الخلفية: Darkgrey ؛ /div> <div id = content-body> موضوع المحتوى </div> <div id = footer> أسفل </div> </body> </html>خريطة التأثير:
تصميم الجدول:<! الارتفاع = 650px نمط = خلفية اللون: Aqua> <tr> <td colspan = 3 عرض = 100 ٪ ارتفاع = 10 ٪ نمط = خلفية اللون: chartreuse> "<td width = 20 ٪ height = 80 ٪ style = background- اللون: antiquewhite> القائمة اليسرى </td> <td width = 60 ٪ الارتفاع = 80 ٪ نمط = خلفية- coror> </td> td width = 20 ٪ ارتفاع = 80 ٪ نمط = خلفية اللون: cornflowerblue> القائمة اليمنى < /td> </tr> <td colspan = 3 ارتفاع = 100 ٪ من الخلفية = cror: cr.
خريطة التأثير:
ما سبق هو كل محتويات هذا المقال.