العلامات والسمات للتذييل في HTML. كيفية الضغط بشكل صحيح على التذييل العائم في أسفل الصفحة. عربة عائمة - زيادة توافر وظائف البيع

إذا كانت الأحذية هي المكون النهائي لأي ملابس، فإن تذييل موقع التجارة الإلكترونية هو العنصر الأخير في تصميم البيع الخاص به. من خلال التركيز على العنصر السفلي، أي التذييل، تصبح مواقع الويب الحديثة جاهزة لعرض شخصيتها بكل طريقة ممكنة. في بيئة التجارة الإلكترونية التنافسية، هناك ما يكفي من الأفكار الأصلية والإبداع واتجاهات التصميم. قبل تنويع تذييل موقع التجارة الإلكترونية، يجدر النظر في نقاط مهمة. ما الذي يجب وضعه أولاً وما هي أفضل طريقة للقيام بذلك؟ تتضمن مجموعتنا من تصميمات التذييل الملهمة بعض الخيارات المثيرة للاهتمام.

إقرأ أيضاً: 13 اتجاهات تسويق التجارة الإلكترونية لعام 2019

إحصائيات مثيرة للاهتمام من Chartbeat. أظهرت دراسة لسلوك 25 مليون مستخدم مدى عمق تصفحهم للصفحات. اتضح أن انتباه المستخدم ينجذب إلى المساحة الموجودة أسفل خط الطي. الحصول على المزيد من الناحية العملية معلومات مفيدة، حيث يظل الزائرون لفترة أطول في المنطقة التي تبعد 1200 بكسل من أعلى الصفحة (بمتوسط ​​شاشة رأسية تبلغ 700 بكسل في المتصفح)، أو خلف الشاشة الثانية.

وقت العرض (بالثانية) / المسافة من أعلى الصفحة (بالبكسل)

هناك فجوة كبيرة في مدة مشاهدة الشاشتين الأولى والثانية. تبلغ مدة TOP 4 ثوانٍ، وتصل المدة إلى الحد الأقصى (16 ثانية) عند 1200 بكسل من الأعلى، ومع مزيد من التمرير، تتناقص ببطء.

نسبة الزوار (%) / المسافة من أعلى الصفحة (بالبكسل)

جزء كبير من الزوار (أكثر من 25٪) لا ينتظرون حتى تحميل المحتوى ويبدأون في تمرير الصفحة. وهذا يعني أن 75% فقط سيرون القمة أولاً. المنطقة الأكثر مشاهدة في الصفحة هي 550 بكسل (أعلى خط الطي مباشرةً).

تبدد الدراسة الأسطورة القائلة بأن المستخدمين لا ينتقلون إلى أسفل الصفحة ويشاهدون كل المحتوى. يعتبر التذييل أيضًا مهمًا لموقع التجارة الإلكترونية الحديث، كما أن له مزاياه الخاصة.

أفكار حول كيفية تصميم "السرداب" (التذييل)، أمثلة على تصميمات البيع

ستخبرك هذه النصائح العشر بكيفية تصميم تذييل موقع الويب بشكل جميل - وفقًا لقواعد التكوين في تصميم الويب وحل المهام ذات الأولوية. قم بتطبيق الأساليب الأكثر ملاءمة لتحسين سهولة الاستخدام وتجربة المستخدم وحتى زيادة المبيعات.

1. المعلومات المطلوبة

تقليديا، يتم تغطية المسائل التنظيمية والقانونية المطلوبة في تذييل الموقع. تم تصميم الإشعارات بنص أقل وضوحًا، مما يحرر مناطق أخرى من الصفحات لعناصر ذات معنى أكبر. وفيما يلي قائمة عينة للنظر فيها:

• إشعارات حقوق الطبع والنشر
• إخلاء المسؤولية القانونية
• معلومات الفواتير
• إشعار ملفات تعريف الارتباط

يجب أن يستوفي موقع الويب الذي يبيع المنتج المتطلبات القانونية ويقدم معلومات حول الإجراء وفترات الإرجاع. موقعه في التذييل مناسب لكل من مورد البيع والزوار.

مثال على التذييل: إيف روشيه

متجر على الانترنت علامة تجاريةإيف روشيه: تذييل بملء الشاشة مع تصميم جميل للطبقات المتناوبة. يبلغ عن الشركة والبنية التحتية لموقع البيع - بدءًا من تتبع الطلب وحتى سياسة البيانات الشخصية. هناك أيضًا نصائح حول استخدام المنتج والمكافآت والعروض الترويجية

مثال على التذييل: Lumity

يخضع تجار المكملات الغذائية لمتطلبات قانونية متزايدة. مسؤولية. هناك عدد لا بأس به من الأشياء التي ينبغي عليهم/لا ينبغي عليهم ذكرها على موقع المبيعات الخاص بهم. يتم تمييز الروابط إلى المعلومات القانونية بالخط العريض لتحسين الرؤية.

يتناسب التذييل الذي يحتوي على صورة خلفية جميلة بشكل عضوي مع التصميم العام للموقع. ليس هناك حدود واضحة، بل المحتوى نفسه بمثابة فاصل

مثال على التذييل: شركة Saddleback Leather Co

موقع بيع بتصميم قديم جميل للرأس والتذييل. ضمان 100 عام ضد عيوب المواد والتشطيب. شروط الإرجاع مصحوبة بقصص مثيرة للاهتمام... اتضح أنه ليس كل شيء محزنًا للغاية مع معلومات التجارة الإلكترونية الضرورية

2. المساحة السلبية – مسافة بصرية كافية

عند تحديد عدد روابط التذييل، لا تبخل بالمساحة السلبية - سيكون لذلك تأثير مذهل على الإدراك البصري وتحسين إمكانية القراءة. قاعدة عامة: من خلال الحفاظ على التسلسل الهرمي البصري، تتم ملاحظة العناصر المركزية بشكل أسرع (يمكن استخدامها لصالحك!).

مثال على التذييل: QUAY AUSTRALIA

بفضل النمط البسيط والقائمة المنسدلة الثابتة، يمكن للمتجر عبر الإنترنت توفير مساحة واسعة

مثال على التذييل: Incase

حول كمية كبيرة من المساحة السلبية الدقيقة (بين العناصر الصغيرة) يمكننا أن نقول هذا: طالما أن جميع المعلومات الضرورية موجودة، فهي مقروءة ويمكن إدراكها بسرعة - كل شيء على ما يرام

مثال على التذييل: Stumptown Coffee Roasters

يعد التذييل الواسع لموقع القهوة استكمالًا ممتازًا لتكوين تصميم نظيف، حيث يوجد الكثير من المساحة السلبية الكلية ("الهواء" بين الأقسام / الأقسام)

3. الدعوة النهائية للعمل

إقرأ أيضاً: أكثر من 30 مثالًا وفكرة لتصميم أزرار الإجراءات المستهدفة

يتحدث التصميم الأنيق للتذييل عن الكثير عن المورد نفسه. من المهم ملاحظة: يبقى المشتري هنا لفترة أطول قليلاً من الأجزاء الأخرى من الصفحة. فرصة مناسبة لدعوة أخيرة أخرى تحث المستخدم على اتخاذ إجراء. غالبًا ما يكون هذا اشتراكًا/رسالة إخبارية، ولكن يمكنك أيضًا ربط مكالمة CTA بتسجيل الحساب.

مثال على التذييل: Greetabl

لدى Greetabl الجزء السفلي المصمم بشكل متواضع من صفحاته والذي يتضمن دعوة للاشتراك. مع الحد الأدنى من العناصر، يصبح النداء ملحوظا، ويتناغم مع الخلفية الفيروزية ويتحول إلى زخرفة للموقع

مثال التذييل: Ecwid

تصميم جميل مع عبارات تحث المستخدم على اتخاذ إجراء في أسفل الصفحات. هيكل منشئ موقع البيع عالمي. وقد تمت ترجمته إلى 35 لغة لعملائه المليون.

4. العربة العائمة – زيادة توافر وظائف البيع

يعد الوصول إلى عربة التسوق من أسفل الموقع طريقة رائعة لتحسين سهولة الاستخدام وخصائص البيع للموقع.

مثال على التذييل: ليموناديلا

من الممتع النظر إلى موقع البيع الخاص بشركة تقديم الطعام وهو مناسب للمشتري

5. التنقل في التذييل

يعد الجزء السفلي من الموقع مثاليًا للمعلومات التي لا يتم عرضها كثيرًا: حول الشركة وشروط الخدمة وسياسة الخصوصية. في هذه الحالة، وظيفة التذييل هي إنقاذ الجميع. عندما يشعر شخص ما بالضياع في بيئة التجارة الإلكترونية، يصبح مهتمًا بالبنية التحتية للتجارة الإلكترونية، وينتقل بشكل غريزي إلى أبعد من ذلك...

المساحة السلبية ضرورية لسهولة قراءة المحتوى. بشكل عام، "التذييل" ليس لأغراض التنقل، على عكس القائمة أو خريطة الموقع. في حالات نادرة فقط، تضع مواقع التجارة الإلكترونية فئات منتجات فردية في التذييل (

مرحبا عزيزي القراء لموقع بلوق. نواصل موضوع تخطيط الكتلة الذي بدأه واستمر في المقالات الثلاثة السابقة. من حيث المبدأ، تمكنا بالفعل من إنشاء تخطيط موقع مكون من عمودين وثلاثة أعمدة، وتمكنا حتى من مراعاة الفروق الدقيقة في إنشاء تخطيط مرن.

بالإضافة إلى ذلك، في المقالات الأولى حول تخطيط موقع الويب () تمت مناقشة بعض المفاهيم الأساسية لإدارة المواقع، دون فهم أنه سيكون من الصعب جدًا فهم الفروق الدقيقة.

ما هي المشاكل التي واجهناها في تصميم موقعنا؟

سنحاول اليوم حل مشكلة صغيرة واحدة قد تنشأ مع التصميم الذي أنشأناه سابقًا. يحدث هذا الموقف غالبًا عند عرضه على شاشات كبيرة (بدقة عالية) وعند عرض صفحة تحتوي على كمية صغيرة من المعلومات.

في هذه الحالة، قد يتبين أنه لن يتم الضغط على التذييل إلى أسفل الشاشة، ولكنه سيكون موجودًا تقريبًا في ارتفاعه المتوسط، والذي سيبدو في معظم الحالات قبيحًا وغير جميل من الناحية الجمالية.

ومع ذلك، في رأيي، من الضروري الضغط على التذييل إلى أسفل تخطيط الموقع، وسيكون هذا صحيحًا بشكل خاص في الحالة عندما يكون ارتفاع الصفحة أقل من ارتفاع شاشة المستخدم. يمكن تمثيل ذلك بشكل تخطيطي مثل هذا:

أولئك. سيكون سلوك التذييل الصحيح في حالة وجود كمية صغيرة من المعلومات على الصفحة وشاشة مستخدم كبيرة كما يلي:

لتنفيذ ذلك، نحتاج إلى إجراء عدد من المعالجات باستخدام كود تخطيطنا. علاوة على ذلك، سنقوم بإجراء تغييرات ليس فقط على ملف النمط تصميم CSS Style.css، ولكن أيضًا في ملف Index.html الذي يحتوي عليه كود HTMLوتشكيل كتل Div. ولكن أول الأشياء أولا.

على سبيل المثال، سوف نستخدم تخطيط الموقع المكون من ثلاثة أعمدة الذي أنشأناه سابقًا. في هذه الحالة، سيبدو Index.html كما يلي:

وتمت كتابة خصائص CSS التالية في ملف Style.css:

النص، html ( هامش: 0 بكسل؛ الحشو: 0 بكسل؛ ) #maket ( العرض: 800 بكسل؛ الهامش: 0 تلقائي؛ ) #header (لون الخلفية: #C0C000؛) #left (لون الخلفية: #00C0C0؛ العرض: 200 بكسل ; (لون الخلفية: #FFC0FF؛ واضح: كلاهما؛)

حسنًا، يبدو التصميم نفسه كما يلي:

كما ترون، لا يتم الضغط على التذييل إلى الأسفل، وبالتالي، لا يلبي متطلباتنا (يوجد دائمًا أسفل العمود السفلي)، لذلك سيتعين علينا إجراء تعديلات على الكود. يمكن فعل الشيء نفسه بالنسبة للتخطيط ذي العمودين، وللتخطيط المطاطي أيضًا. الطريقة عالمية.

كيفية دفع التذييل إلى أسفل تخطيط موقع الويب

لذلك، نحتاج إلى نقل حاوية Div مع التذييل إلى أسفل الشاشة. للقيام بذلك، ستحتاج أولاً إلى ضبط ارتفاع الصفحة بأكملها على مائة بالمائة (سوف تشغل الشاشة بأكملها). سيكون ذلك ضروريًا لتغيير حجم الكتلة الرئيسية بالتخطيط إلى 100%.

يتم وضع محتوى صفحة الموقع بالكامل في علامتي الفتح والإغلاق Body، ولذلك نحتاج إلى إضافة خاصية CSS أخرى لعلامة Body في Style.css، مع ضبط الارتفاع على 100%:

النص الأساسي، HTML ( الهامش: 0 بكسل؛ الحشو: 0 بكسل؛ الارتفاع: 100%؛ )

على مظهرلن يكون لهذا أي تأثير بعد، ولكن الآن يمكن تمديد المدونة الرئيسية إلى كامل ارتفاع الشاشة. أولئك. لقد كانت نوعًا من المرحلة التحضيرية.

خصائص CSS الأساسية، إذا رغبت في ذلك، يمكنك إلقاء نظرة عليها. لنقم الآن بتعيين حاوية Div التي تحتوي على تخطيطنا بالكامل على ارتفاع لا يقل عن 100%:

أريد أيضًا تسليط الضوء عليه (div بمعرف = "maket"). للقيام بذلك، سأعطيه إطارًا باستخدام خاصية Border() المقابلة:

تتيح لك الخاصية السوداء Border: Solid 3px تعيين حدود صلبة (صلبة) بسمك 3 بكسل باللون الأسود لهذه الحاوية. سيتيح لك ذلك أن ترى بوضوح أن الحاوية ذات التخطيط قد امتدت إلى ارتفاع الشاشة بالكامل، حتى مع وجود كمية صغيرة من المعلومات على الصفحة:

سنحتاج الآن إلى إزالة كتلة التذييل من الحاوية العامة ووضعها أدناه مباشرة بعد الحاوية العامة. ماذا سيعطي؟ وحقيقة أن التذييل في التخطيط أخيرًا سوف يميل إلى النزول ولن يتم الضغط عليه كما كان من قبل على العمود الأطول. في هذه الحالة، سيبدو Index.html كما يلي:

يرجى ملاحظة أن الكتلة ذات التذييل لم تعد موجودة داخل الحاوية العامة (maket)، وبالتالي لم يعد يتم تنظيم عرضها بواسطة خصائص CSS المحددة لـ maket في ملف Style.css. سيمتد عرض التذييل عبر الشاشة بأكملها، لكنه سيظل موجودًا في الجزء السفلي من الشاشة، أسفل الكتلة الرئيسية مباشرة:

ولكن تظهر مشكلة مرة أخرى، لأنه لكي تتمكن من رؤية التذييل، عليك الآن تمرير الشاشة في المتصفح (انظر شريط التمرير في الصورة أعلاه).

يحدث هذا لأن الحاوية الرئيسية (maket) تشغل ارتفاع الشاشة بالكامل (يتم تحديد ذلك بواسطة خاصية min-height: 100%)، ويقع التذييل خلفها مباشرة ولمشاهدتها سيتعين عليك التمرير، وهو ما ليست مريحة للغاية وعملية .

يمكنك حل هذه المشكلة عن طريق تعيين حشوة سلبية لحاوية Div مع التذييل بحيث تتحرك لأعلى بمسافة تساوي ارتفاعها. في هذه الحالة، ستتداخل حاوية التذييل مع الحاوية الرئيسية وتتناسب مع ارتفاع شاشة المتصفح (أي لن تحتاج إلى التمرير لمشاهدتها).

ولكن لتعيين إزاحة سلبية من الأعلى، تحتاج إلى معرفة ارتفاع التذييل هذا، لكننا لا نعرفه بعد.

لذلك، سنقوم أولاً بتعيين ارتفاع الحاوية التي تحتوي على التذييل عن طريق تعيين الخاصية المقابلة في Style.css:

#footer (لون الخلفية: #FFC0FF؛ واضح: كلاهما؛ الارتفاع: 50 بكسل؛)

ومن ثم وضعنا لها هامشاً سالباً في الأعلى إلى ارتفاع يساوي ارتفاعها:

سيسمح هذا للتذييل بالارتفاع إلى ارتفاعه تمامًا وبالتالي يتناسب مع شاشة المتصفح (يمكنك الآن إزالة ملف CSS ممتلكات الحدود: 3px صلبة باللون الأسود من قاعدة maket، بحيث لا يمنع سمك الإطار تخطيطنا بالكامل، بما في ذلك التذييل، من الملاءمة في ارتفاع الشاشة):

كما ترون، لا يظهر شريط التمرير الآن في المتصفح ويتم وضع تخطيط الموقع القائم على الكتلة المكون من ثلاثة أعمدة بالكامل على شاشة واحدة (في حالة وجود معلومات قليلة على الصفحة) ويحتوي على تذييل في الأسفل . وهذا هو بالضبط ما يتعين علينا القيام به.

نقوم بإدخال الفاصل ونحارب Internet Explorer

لكن تنشأ مشكلة، والذي لن يظهر إلا عندما يكون هناك مزيد من المعلومات على صفحة التخطيط وقد ينشأ الموقف التالي:

اتضح أنه قد ينشأ موقف عندما تتداخل المعلومات الموجودة في أحد أعمدة التخطيط مع التذييل، وهو ما لن يبدو جميلًا. يحدث هذا بسبب الحشو السلبي سيئ السمعة الذي وضعناه له والذي ساعد في رفع الطابق السفلي لدينا مقابل حاوية التخطيط الرئيسية.

أولئك. اتضح أنه يوجد في الجزء السفلي من الشاشة كتلتان متداخلتان في منطقة الطابق السفلي.

الحل لهذه المشكلة هو إضافة حاوية Div فارغة جديدة (ما يسمى الفواصل) في الحاوية الرئيسية للتخطيط الخاص بنا (maket)، في المكان الذي كانت توجد فيه الكتلة ذات التذييل مسبقًا.

من خلال ضبط هذه الحاوية الجديدة على ارتفاع يساوي ارتفاع التذييل، يمكننا تجنب تصادم المعلومات من الحاوية الرئيسية مع الكتلة مع التذييل. لنقم بتعيين معرف () لهذه الحاوية التي تسمى Rasporka ونتيجة لذلك سيبدو Index.html الخاص بالتخطيط المكون من ثلاثة أعمدة كما يلي:

وسنكتب في Style.css هذا (، والذي يحدد ارتفاع حاوية المباعد هذه بما يساوي ارتفاع الطابق السفلي:

#rasporka ( الارتفاع: 50 بكسل؛ )

ونتيجة لذلك، سيتم الضغط على التذييل من الأسفل ليس إلى المعلومات الموجودة في الحاوية الرئيسية (على سبيل المثال، النص الموجود في العمود الأعلى)، ولكن إلى مساحة تساوي ارتفاع التذييل مع حاوية فاصل لا تحتوي على معلومات .

بهذه الطريقة نتجنب الاصطدامات والتشوهات في تخطيطنا المكون من ثلاثة أعمدة. كل شيء سيكون واضحًا وجميلًا (حساسًا ونبيلًا):

كما ذكرت أعلاه، يجب الآن تعيين عرض التذييل بشكل منفصل، لأن ... لم تعد هذه الحاوية جزءًا من الحاوية الرئيسية. للقيام بذلك، تحتاج إلى إضافة خصائص إضافية للتذييل إلى ملف CSS، مما يسمح لك بتعيين عرضه ومحاذاته أفقيًا في منتصف الشاشة.

من المنطقي تعيين العرض مساويًا لعرض التخطيط بأكمله باستخدام خاصية العرض، ويمكن إجراء المحاذاة الأفقية بنفس الطريقة التي فعلناها للتخطيط بأكمله على تخطيط الكتلة.

وبالتالي، سنحتاج إلى إضافة خصائص إضافية لتذييل المعرف:

#footer (لون الخلفية: #FFC0FF؛ واضح: كلاهما؛ الارتفاع: 20 بكسل؛ الهامش العلوي: -20 بكسل؛ العرض: 800 بكسل؛ الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي؛)

باستخدام خاصية width:800px، يتم ضبط العرض على 800 بكسل، وباستخدام خاصيتين Margin-left: auto وmargin-right: auto، يتم ضبط إعداد المسافة البادئة على يسار ويمين التذييل تلقائيًا، نتيجة لـ حيث ستكون هذه المسافات البادئة متساوية وسيتم محاذاة بطلنا إلى المنتصف:

حسنًا، يبدو أنه لم يعد هناك شيء يمكن تحسينه، لكن الأمر لم يكن كذلك. كما هو الحال دائما متصفحنا المفضل متصفح الانترنت 6 لا يفهم شيئًا من خصائص CSS التي نستخدمها. في هذا المتصفح (وربما في بعض المتصفحات القديمة أيضًا)، على الرغم من كل الجهود التي بذلناها، لن يتم الضغط على التذييل إلى الأسفل، ولكنه سيظل ملتصقًا بالعمود العلوي من تخطيط الموقع.

كل هذا يحدث لأنه (لا يفهم خاصية min-height: 100% التي استخدمناها لتعيين الحد الأدنى لارتفاع الكتلة الرئيسية. ارتفاع متساويشاشة.

لذلك، لحل هذه المشكلة، سيتعين علينا استخدام ما يسمى بالاختراق الذي يسمح لنا بشرح (على أصابعنا) للمتصفحات القديمة ما يجب القيام به. قبل قائمة CSSخصائص maket سوف تحتاج إلى إدراج المجموعة التالية:

* HTML #maket ( الارتفاع: 100%; )

تنطبق هذه القاعدة فقط على متصفح الانترنت Explorer 6، والباقي لن يأخذه في الاعتبار وينفذه.

لذلك، سيكون المظهر النهائي لـ Style.css مع الضغط على التذييل في أسفل الشاشة كما يلي:

الجسم، html ( الهامش: 0 بكسل؛ الحشو: 0 بكسل؛ الارتفاع: 100%؛ ) * html #maket ( الارتفاع: 100%؛ ) #maket ( العرض: 800 بكسل؛ الهامش: 0 تلقائي؛ الحد الأدنى للارتفاع: 100%؛ ) # رأس (لون الخلفية:#C0C000;) #left(لون الخلفية:#00C0C0; العرض:200px; float:left;) #right( width:200px; لون الخلفية:#FFFF00; float:right; ) #content (لون الخلفية: #8080FF؛ الهامش الأيسر: 202 بكسل؛ الهامش الأيمن: 202 بكسل؛) #footer( لون الخلفية: #FFC0FF؛ واضح: كلاهما؛ الارتفاع: 50 بكسل؛ الهامش العلوي: -50 بكسل؛ العرض: 800 بكسل؛ الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي) #rasporka (الارتفاع: 50 بكسل؛)

حسنًا، تم تقديم الشكل النهائي لـ Index.html أعلاه مباشرةً. هذا كل شيء، هذه السلسلة من المقالات المخصصة لتخطيط الكتل المكونة من 2 و 3 أعمدة وتخطيطات مواقع الويب الثابتة والمرنة يمكن اعتبارها كاملة.

يمكنك أيضًا مشاهدة الفيديو "العمل باستخدام علامة div لـ Html":

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

أنت قد تكون مهتم

تخطيط الكتلة - نقوم بإنشاء تخطيطات مكونة من عمودين وثلاثة أعمدة وتخطيطات مرنة للموقع
تخطيط DiV - إنشاء كتل لتخطيط مكون من عمودين في HTML، وتحديد أحجامها وتعيين موضعها في CSS

هذا نوع من الكابوس! لماذا "يظهر" تذييل موقعك مرة أخرى ويغير التصميم؟ هل من المستحيل حقًا الضغط على التذييل بشكل صحيح في أسفل الصفحة بشيء ما؟ المحتوى أو الطوب على الأقل! الطوب لا يتناسب مع الشاشة؟

أرى، ثم اجلس ولا تفعل شيئًا حتى تقرأ مقالتنا حتى النهاية.

صنع التذييل المناسب لموقعك على الويب

يواجه العديد من مالكي مواقع الويب هذه المشكلة عندما يتحرك تذييل الصفحة إلى الأعلى. ومن ثم ليس من الواضح ما يجب القيام به. في أغلب الأحيان، تعاني تصميمات مواقع الويب التي تم تجميعها بمفردك على عجل من هذا العيب ( دائرة "الأيدي المجنونة") أو مشرفي المواقع المبتدئين.

وفي الوقت نفسه، لا يحدث أي شيء فظيع في المراحل الأولى من حياة الموقع. ويستمر هذا الشاعر الغنائي طالما أن المحتوى يضع "ثقله" على الطابق السفلي، ويمنعه من الارتفاع. لكن الأمر يستحق وضع كميات أصغر من المواد على الصفحة، وسيرتفع التذييل "الهادئ" مؤخرًا إلى الأعلى على الفور، مما يجعل تصميم الموقع بأكمله يبدو غير مناسب.

للقضاء على هذا "العيب" في القالب المصمم، ليس من الضروري إنفاق الأموال على خدمات مشرف الموقع. في أغلب الأحيان، يمكن وضع تذييل الموقع بنفسك. دعونا نفكر في كل شيء الخيارات الممكنةلحل هذه المشكلة:

الطريقة الأولى

الطريقة الأولى "لربط" التذييل "بأسفل" الصفحة تعتمد على CSS. أولاً، دعونا نعطي مثالاً للكود، ثم نلقي نظرة فاحصة على تنفيذه:

html ( الارتفاع: 100%؛ ) الرأس، التنقل، القسم، المقالة، الجانب، التذييل ( العرض: كتلة؛ ) الجسم ( الارتفاع: 100%؛ ) #wrapper ( العرض: 1000 بكسل؛ الهامش: 0 تلقائي؛ الحد الأدنى للارتفاع: 100 %؛ الارتفاع: تلقائي! ارتفاع مهم: 100%) #header (الارتفاع: 150 بكسل؛ لون الخلفية: rgb(0,255,255);) #content (الحشوة: 100 بكسل; الارتفاع: 400 بكسل; لون الخلفية: rgb(51,255,102) ) #التذييل (العرض: 1000 بكسل؛ الهامش: -100 بكسل تلقائي 0؛ الارتفاع: 100 بكسل؛ الموضع: نسبي؛ لون الخلفية: rgb(51,51,204);)

لإرفاق علامة تذييل في أسفل الصفحة