إذا كنت تستخدم طريقة تصميم الجدول، فعادةً ما يكون تخطيطًا من ثلاثة صفوف مع الصفوف العلوية والمتوسطة والسفلية. 
. إذا كنت تستخدم DIV، فأنا أفكر في استخدام ثلاثة أعمدة للتخطيط، مثل هذا 
.
2. تحديد نمط الجسم
قم أولاً بتعريف نمط النص للصفحة بأكملها، ويكون الكود كما يلي:
الجسم { الهامش: 0 بكسل؛
الحشو: 0 بكسل؛
الخلفية: url(../images/bg_logo.gif) #FEFEFE عدم تكرار الجزء السفلي الأيمن؛
عائلة الخط: 'Lucida Grande'،'Lucida Sans Unicode'،'宋体'،'新宋体'،arial،verdana،sans-serif؛
اللون: #666؛
حجم الخط: 12 بكسل؛
ارتفاع الخط: 150% }
تم شرح وظيفة الكود أعلاه بالتفصيل في البرنامج التعليمي لليوم السابق، ويجب على الجميع فهمه في لمحة واحدة. يتم تعريف هامش الحدود على أنه 0؛ ولون الخلفية هو #FEFEFE، وصورة الخلفية هي bg_logo.gif، وتقع الصورة في الركن الأيمن السفلي من الصفحة، ويتم تعريف حجم الخط على أنه 12 بكسل؛ اللون #666؛ ارتفاع الخط 150%.
3. تحديد القسم الرئيسي
في المرة الأولى التي استخدمت فيها تخطيط CSS، قررت استخدام تخطيط ثلاثي الأعمدة ذو عرض ثابت (وهو أبسط من تصميم الدقة التكيفية، حسنًا، لا تقل أنني كسول، قم بتنفيذ تخطيط بسيط أولاً لاكتساب بعض الثقة !). حدد عرض اليسار والوسط واليمين ليكون 200:300:280 على التوالي، كما هو محدد على النحو التالي في CSS:
/*تحديد نمط العمود الأيسر للصفحة*/
#يسار{ العرض: 200 بكسل؛
الهامش: 0 بكسل؛
الحشو: 0 بكسل؛
الخلفية: #CDCDCD؛
}
/*تحديد أنماط الأعمدة في الصفحة*/
#middle{ الموقف: مطلق؛
اليسار: 200 بكسل؛
أعلى: 0 بكسل؛
العرض: 300 بكسل؛
الهامش: 0 بكسل؛
الحشو: 0 بكسل؛
الخلفية: #دادادا؛
}
/*تحديد نمط العمود الأيمن للصفحة*/
#right{ الموقف: مطلق؛
اليسار: 500 بكسل؛
أعلى: 0 بكسل؛
العرض: 280 بكسل؛
الهامش: 0 بكسل؛
الحشو: 0 بكسل؛
الخلفية: #FFF }
ملاحظة: لقد استخدمت POSITION:Absolute; عند تحديد أقسام العمود الأوسط والعمود الأيمن، ثم قمت بتحديد LEFT:200px;TOP:0px; وLEFT:500px;TOP:0px; طبقة تحديد المواقع المطلقة. حدد العمود الأوسط ليكون على بعد 200 بكسل من الحد الأيسر للصفحة و0 بكسل من الأعلى؛ حدد العمود الأيمن ليكون على بعد 500 بكسل من الحد الأيسر للصفحة و0 بكسل من الأعلى؛.
في هذا الوقت، رمز الصفحة بأكملها هو:
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
<الرأس>
<title>مرحبًا بك في "مصمم الويب" الجديد: البرامج التعليمية والترويجية القياسية للويب</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<محتوى التعريف = "جميع" الاسم = "الروبوتات" />
<meta name="author" content="ajie(at)netease.com,阿杰" />
<meta name="حقوق الطبع والنشر" content=" www.w3cn.org ، حقوق الطبع والنشر المجانية، أي نسخ" />
<meta name="description" content="مصمم ويب جديد، موقع تعليمي لمعايير الويب، يروج لتطبيق معايير الويب في الصين />."
<meta content="معايير الويب، البرامج التعليمية، الويب، المعايير، xhtml، css، سهولة الاستخدام، إمكانية الوصول" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href=" http://www.w3cn.org/favicon.ico " type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</الرأس>
<الجسم>
<div id="left">العمود الأيسر من الصفحة</div>
<div id="middle">العمود الأوسط للصفحة</div>
<div id="right">العمود الأيمن من الصفحة</div>
</الجسم>
</html>
في هذا الوقت، يمكن لتأثير الصفحة رؤية ثلاثة مستطيلات رمادية متجاورة وصورة خلفية فقط. ولكن أريد أن يكون الارتفاع ملء الشاشة، ماذا أفعل؟
4.100% ارتفاع متكيف؟
من أجل الحفاظ على الأعمدة الثلاثة على نفس الارتفاع، حاولت تعيين "height:100%;" في #left و#middle و#right، ولكن وجدت أنه لم يكن هناك تأثير ارتفاع تكيفي متوقع على الإطلاق. بعد بعض المحاولات، اضطررت إلى إعطاء كل div ارتفاعًا مطلقًا: "height:1000px;"، ومع زيادة المحتوى، كنت بحاجة إلى تصحيح هذه القيمة باستمرار. ألا توجد طريقة لضبط الارتفاع؟ مع تعمق دراسة Ajie، اكتشف حلاً مرنًا، في الواقع، ليست هناك حاجة إلى تعيين 100٪ على الإطلاق، لقد كنا مسجونين للغاية في التفكير الجدولي، وسيتم تقديم هذه الطريقة بالتفصيل في القسم التالي من الدراسة.