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

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

لكن أولاً أود أن أتوجه بالشكر الجزيل إلى http://www.webdesignerdepot.com والآن فلنبدأ.

كود HTML بسيط للغاية، نحتاج فقط إلى تعيين العلامات لـ ثم كتابة محتوى الموقع بينهما:

رأس الموقع المرفق

نظرًا لأن هذا هو أبسط مثال، فقد أضفنا هنا نصًا بين علامات h1، ولكن يمكنك أيضًا استخدام الصور، أو على سبيل المثال، التنقل في الموقع.

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

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

وهنا الكود نفسه:

$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("لزج")؛

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

سيتكون كود CSS من جزأين. سيكون الرمز الأول مسؤولاً عن رأس الموقع القياسي، الموجود في الموضع الافتراضي. سيكون الرمز الثاني مسؤولاً عن عرض الرأس عندما يقوم المستخدم بتمرير الصفحة. دعونا نرى كيف يبدو الرمز الافتراضي:

الرأس (الموضع: ثابت؛ العرض: 100%؛ محاذاة النص: المركز؛ حجم الخط: 72 بكسل؛ ارتفاع الخط: 108 بكسل؛ الارتفاع: 108 بكسل؛ الخلفية: #335C7D؛ اللون: #fff؛ عائلة الخط: "PT Sans" "، بلا الرقيق؛ )

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

باستخدام قواعد CSS أدناه، نريد تقليل مساحة الرأس نفسه عند التمرير وتغيير اللون وبالطبع تصغير الخط. هنا هو الرمز نفسه.

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

أرز. 6.3. عرض الغطاء

تتم الإضافة الفعلية للصورة في الرأس من خلال صورة الخلفية، والتي يجب أن تكون محاذية لمركز العنصر.

الرأس ( العرض: كتلة؛ /* للمتصفحات الأقدم */ الارتفاع: 405 بكسل؛ /* ارتفاع الرأس */ الخلفية: url(images/header-bg.png) أسفل المركز بدون تكرار؛ )

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

أرز. 6.4. محاذاة الصورة أفقيا

في هذا الشكل، يتم الإشارة إلى موقع المفصل بواسطة سهم ومسافة حتى يمكن رؤية المفصل. إذا قمت بتحرير الأجزاء اليمنى واليسرى من صورة الخلفية بشكل صحيح، فسيتم تكرارها أفقيًا دون مفاصل مرئية، مثل نمط واحد مستمر. كل ما تبقى هو تصحيح النمط قليلاً عن طريق استبدال القيمة no-repeat (بدون تكرار) بـ Repeat-x (تكرار أفقيًا).

الرأس (العرض: كتلة؛ الارتفاع: 405 بكسل؛ الخلفية: url(images/header-bg.png) تكرار-x في المنتصف السفلي؛)

أرز. 6.5. صورة خلفية للرأس

في تنسيق PNG-24، يستغرق الملف بحجم خلفية 1325 × 405 بكسل حوالي 32 كيلو بايت، وفي PNG-8 مع لوحة ذات 256 لونًا، حيث تكون جودة التدرج أسوأ قليلاً - حوالي 15 كيلو بايت. يمكنك تقسيم الخلفية إلى مكونين - تدرج وصورة وحفظ كل صورة بتنسيقها الخاص، مما يؤدي إلى زيادة جودة عرض التدرج. ومع ذلك، فإن 32 كيلو بايت لمثل هذه الصورة الكبيرة ليس كثيرًا وسيفكر البعض في تحسين إضافي "للتوفير في المطابقات". ومع ذلك، قد يجد بعض الأشخاص هذا الأسلوب البديل لإنشاء رأس موقع ويب مفيدًا، ويمكنك تخطيه إذا كنت ترغب في ذلك.

نظرًا لأن التدرج في الرأس يتكرر أفقيًا، فيمكن قصه من التخطيط وتعيينه كصورة خلفية. في التين. يوضح الشكل 6.6 تدرجًا عاليًا يبلغ 405 بكسل تم إعداده لهذا الغرض. لا يؤدي تنسيق PNG-24 إلى تشويه الصورة، كما أنه يضغط التدرجات جيدًا (الحجم النهائي هو 402 بايت)، لذلك في هذه الحالة يجب عليك بالتأكيد استخدامه. تمت إضافة إطار حول الصورة من أجل الوضوح.

أرز. 6.6. رسم التدرج (header-gradient.png)

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

أرز. 6.7. صورة الخلفية ذات الشفافية (header-animal.png)

نظرًا لأنه تم حفظ هذه الصورة بتنسيق PNG-8، الذي يحتوي على مستوى واحد فقط من الشفافية، على عكس المستويات الـ 256 لتنسيق PNG-24، فمن المهم التأكد من التراكب الصحيح على الخلفية المتدرجة. للقيام بذلك، عند الحفظ في Photoshop، تحتاج إلى تحديد لون الحواف (غير اللامع) بالقرب من الجزء الأوسط من التدرج، حيث يتم تراكب الصورة الظلية. هذا هو اللون #9de1f0 تقريبًا. في هذه الحالة، لن يكون هناك مخططات قذرة حول الأشجار والحيوانات، وسيتم النظر إلى الصورة عند فرضها على التدرج ككل واحد.

تم تجهيز صورتين لخلفية الترويسة، ونكتب كود HTML.

ونمط عنصر وطبقة header-bg.

الرأس ( الخلفية: #00b0d8 url(images/header-gradient.png) تكرار-x; ) .header-bg ( الخلفية: url(images/header-animal.png) تكرار-x في المنتصف السفلي; الارتفاع: 405 بكسل; )

ونتيجة لذلك، أصبح حجم الملف 12.5 كيلو بايت، وهو أقل من المتوقع.

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

من الواضح أن الطريقة الثانية لها عدد من العيوب - لا يمكن نقل الصورة حتى بمقدار بضع بكسلات، فهي مرتبطة بالتدرج، وإذا تم تغيير تدرجها، فسيتعين تغيير الصورة. لذلك نقوم بحفظ الرأس بتنسيق PNG-24. ستظل تعليمات HTML البرمجية كما هي، ولكن سيتم توسيع الأنماط.

الرأس ( الخلفية: #00b0d8 url(images/header-gradient.png) تكرار-x; ) .header-bg ( الخلفية: url(images/header-animal.png) تكرار-x في المنتصف السفلي؛ الارتفاع: 405 بكسل; /* ارتفاع الرأس */ محاذاة النص: المركز؛ /* محاذاة المركز */ ) .header-bg img ( الموضع: نسبي؛ /* الموضع النسبي */ الأعلى: 40 بكسل؛ /* حرك الصورة لأسفل */ )

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

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

تشير قيمة /y للسمة href إلى الصفحة الرئيسية وتعمل فقط على خادم الويب، وليس محليًا.

يظهر الكود النهائي للرأس في المثال 6.14.

مثال 6.14. رأس الموقع

HTML5 CSS 2.1 IE Cr Op Sa Fx

كيف تصطاد أسدًا في الصحراء؟ الجسم ( الهامش: 0; ) الرأس ( العرض: كتلة; الخلفية: #00b0d8 url(images/header-gradient.png) Repeat-x; /* Gradient */ ) .header-bg ( الخلفية: url(images/header- Animal.png) كرر-x أسفل المركز؛ /* الحيوانات */ الارتفاع: 405 بكسل؛ /* ارتفاع الرأس */ محاذاة النص: المركز /* محاذاة المركز */ ) .header-bg img ( الموضع: نسبي؛ / * تحديد المواقع النسبي */ أعلى: 40 بكسل /* حرك الصورة لأسفل */ )

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

فيما يلي طريقة موجزة لحل هذه المشكلة.

يعد ترميز HTML بسيطًا قدر الإمكان:

سئ جدا الرابط الأولالرابط الثانيالرابط الثالث

ارتفاع الرأس ثابت، أضف محاذاة النص: تبرير، للعناصر الفرعية:

الرأس (محاذاة النص: ضبط؛ تباعد الحروف: 1 بكسل؛ الارتفاع: 8em؛ الحشو: 2em 10%؛ الخلفية: #2c3e50؛ اللون: #fff;)

يضيف العرض: كتلة مضمنةلجميع عناصر التنقل بحيث يمكن وضعها بجانب بعضها البعض:

الرأس h1، التنقل في الرأس (العرض: كتلة مضمنة؛)

أن ينسب محاذاة النص: تبريرإذا عملنا بالطريقة التي نريدها، نحتاج إلى استخدام خدعة صغيرة مع العناصر الزائفة، والتي تم العثور عليها في المقالة تقنية شبكة CSS المبررة تمامًا باستخدام inline-block ، بقلم Jelmer de Maat:

الرأس::بعد (المحتوى: ""؛ العرض: كتلة مضمنة؛ العرض: 100%؛)

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

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

الرأس h1 (الارتفاع: 100%؛) الرأس h1::قبل (المحتوى: ""؛ العرض: كتلة مضمنة؛ محاذاة رأسية: وسط؛ الارتفاع: 100%؛)
والنتيجة هي ما تحتاجه:

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

دعونا نستخدم خدعة العنصر الزائف في الرأس:

كود CSS

رأس (محاذاة النص: ضبط؛ الارتفاع: 15em؛ الحشو: 2em 5%؛ الخلفية: #2c3e50؛ اللون: #fff؛) header::after ( content: ""؛ العرض: inline-block؛ width: 100%؛ ) الرأس > div، التنقل في الرأس، div h1 (العرض: كتلة مضمنة؛ محاذاة رأسية: الوسط؛ ) الرأس > div (العرض: 50%؛ الارتفاع: 100%؛ محاذاة النص: اليسار؛ ) الرأس > div: :قبل (المحتوى: ""؛ العرض: كتلة مضمنة؛ محاذاة رأسية: وسط؛ الارتفاع: 100%؛)

تبدو أفضل بكثير:

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

كود CSS

الرأس (محاذاة النص: ضبط؛ الحشو: 2em 5%؛ الخلفية: #2c3e50؛ اللون: #fff؛) الرأس::بعد (المحتوى: ""؛ العرض: كتلة مضمنة؛ العرض: 100%؛ ) الرأس h1، التنقل في الرأس (العرض: كتلة مضمنة؛ محاذاة رأسية: الوسط؛) الرأس h1 (العرض: 50%؛ محاذاة النص: اليسار؛ الحشو العلوي: 0.5em؛) التنقل في الرأس (التنقل العلوي: 1em؛)

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

شاشة الوسائط و(الحد الأقصى للعرض: 820 بكسل) (الرأس (الارتفاع: تلقائي؛) الرأس> div، الرأس>

والنتيجة قابلة للتكيف وتبدو كما يلي على الأجهزة المحمولة:

في المثال، تم استخدام 820 بكسل للوضوح في موقع مباشر، بالطبع، يجب أن تكون القيمة مختلفة، وفقًا للمتطلبات. لدعم Internet Explorer 8، يجب عليك استخدام ":" بدلاً من "::" للعناصر الزائفة.

كود CSS النهائي

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * (الحشوة: 0؛ الهامش: 0؛) الجسم (الخلفية: #1abc9c؛ عائلة الخط: "Lato"، sans-serif؛ تحويل النص: أحرف كبيرة؛ تباعد الأحرف: 1 بكسل؛) الرأس (محاذاة النص: ضبط الارتفاع: 8em؛ الحشو: 2em 5%؛ اللون: #fff ) header::after ( content: ""; width: 100%; ) header > div, header > div::before, header nav, header > div; h1 ( العرض: كتلة مضمنة؛ محاذاة رأسية: وسط؛ محاذاة النص: يسار؛ ) رأس > div ( ارتفاع: 100%; ) رأس > div::قبل ( محتوى : ""; ارتفاع: 100%; ) رأس > div h1 (حجم الخط: 3em؛ نمط الخط: مائل؛) التنقل في الرأس a (الحشوة: 0 0.6em؛ المسافة البيضاء: nowrap;) التنقل في الرأس a:الطفل الأخير (الحشوة على اليمين: 0;) @ شاشة الوسائط و(الحد الأقصى للعرض: 720 بكسل) (الرأس (الارتفاع: تلقائي؛) الرأس> div، الرأس> div h1، التنقل في الرأس (الارتفاع: تلقائي؛ العرض: تلقائي؛ العرض: كتلة؛ محاذاة النص: المركز؛

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

ماذا لدينا الان؟ الآن لدينا هذه الأنماط:

HTML، الجسم ( الارتفاع: 100%؛ اللون: #000؛ الخلفية: #FFFFFF؛ التفاف الكلمات: كلمة متقطعة؛ حجم الخط: 12 بكسل؛ عائلة الخط: Verdana، Arial، Sans-Serif؛) #wrapper ( الارتفاع :تلقائي! مهم؛ الارتفاع: 100%؛ الحد الأدنى للارتفاع: 100%؛) #header (الارتفاع: 100 بكسل;) #container (العرض الأدنى: 800 بكسل;) #center (الهامش:0px 200px 0px 200px;) float:left width:200px;) #right (float:right; width:200px;) #footer (الارتفاع:100px; الهامش العلوي:-100px;) .clear (واضح:كلاهما;) #space (الارتفاع:100px ;)

وهذا هو الكود الخاص بالقالب نفسه:

اسم الموقع

أولاً، دعونا نجري بعض التغييرات على نمط الكتلة المجمعة:

#wrapper ( الارتفاع: تلقائي! مهم؛ الارتفاع: 100%؛ الحد الأدنى للارتفاع: 100%؛ العرض: 1024 بكسل؛ الهامش: 0 تلقائي؛ محاذاة النص: يسار؛ )

قمت بتعيين عرض ثابت - عرض الكتلة، بحجم 1024 بكسل، ومحاذاة الكتلة نفسها إلى المركز، والنص الموجود فيها إلى اليسار باستخدام محاذاة النص: يسار. يمكننا محاذاة الكتلة إلى المركز باستخدام نمط الهامش، وضبط الهوامش العلوية والسفلية على 0، والعرض على تلقائي. لسوء الحظ، لا يعمل هذا دائمًا في Internet Explorer 6، لذلك قمت بإضافة text-align: center; ولهذا السبب اضطررت إلى محاذاة النص الموجود في كتلة الالتفاف والتذييل إلى اليسار. قمت أيضًا بتحديد الهامش:0 في النص، وبالتالي ضبط الهوامش من الحواف على 0 بكسل. ونتيجة لذلك، انتهى الجسم بالأنماط التالية:

HTML، الجسم ( الارتفاع: 100%؛ اللون: #000؛ الخلفية: #FFFFFF؛ التفاف الكلمات: كلمة فاصلة؛ حجم الخط: 12 بكسل؛ عائلة الخط: Verdana، Arial، Sans-Serif؛ الهامش: 0؛ نص -محاذاة: مركز)

لقد قمت أيضًا بإجراء تغييرات على الطابق السفلي:

#تذييل ( العرض: 1024 بكسل; الهامش: 0 تلقائي; محاذاة النص: اليسار; الارتفاع: 100 بكسل; الهامش العلوي:-100 بكسل; الخلفية: #4a90d9; )

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

حسنًا، لقد قمنا بإعداد القالب، وحان الوقت للانتقال إلى رأس الموقع. الأنماط ستكون هكذا:

#header (الارتفاع: 140 بكسل؛ الخلفية: #fff؛ الحشو العلوي: 40 بكسل؛)

يبلغ ارتفاع الكتلة 140 بكسل، والخلفية بيضاء، والهامش من الحافة العلوية 40 بكسل. هذه هي كل التغييرات التي طرأت على أنماط الرأس.
ماذا؟ هذا كل شيء؟ وهناك مقالة كاملة تحمل هذا الاسم؟
بالطبع لا. سيتكون رأس الموقع من عناصر أخرى: شعار وقائمة سيتم تصميمهما بشكل منفصل.

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

الشعار ( العرض: كتلة؛ الارتفاع: 104 بكسل؛ العرض: 390 بكسل؛ الخلفية: url("image/logo.svg?1") بدون تكرار؛)

لقد صنعت كتلة العناصر، وأعطتها العرض والارتفاع، وقمت أيضًا بإنشاء صورة شعار كخلفية، ووضعتها في دليل الصور. سيتم وضع جميع صور القالب في هذا الدليل. حجم الصورة هو 388*100 بكسل، فلماذا يختلف حجم الكتلة قليلاً؟ لقد جعلت الارتفاع 104 بكسل بحيث يكون هناك مسافة من صورة الشعار في الأسفل بين القائمة المستقبلية والشعار، وأخذت العرض بمقدار 2 بكسل فقط في حالة حدوث ذلك، حيث واجهت عدة مرات أن موزيلا حددت بشكل غير صحيح حجم الصورة واقتصاصها قليلاً. هذا كل شيء، لقد انتهينا من الشعار. القائمة في

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

فيما يلي طريقة موجزة لحل هذه المشكلة.

يعد ترميز HTML بسيطًا قدر الإمكان:

سئ جدا الرابط الأولالرابط الثانيالرابط الثالث

ارتفاع الرأس ثابت، أضف محاذاة النص: تبرير، للعناصر الفرعية:

الرأس (محاذاة النص: ضبط؛ تباعد الحروف: 1 بكسل؛ الارتفاع: 8em؛ الحشو: 2em 10%؛ الخلفية: #2c3e50؛ اللون: #fff;)

يضيف العرض: كتلة مضمنةلجميع عناصر التنقل بحيث يمكن وضعها بجانب بعضها البعض:

الرأس h1، التنقل في الرأس (العرض: كتلة مضمنة؛)

أن ينسب محاذاة النص: تبريرإذا عملنا بالطريقة التي نريدها، نحتاج إلى استخدام خدعة صغيرة مع العناصر الزائفة، والتي تم العثور عليها في المقالة تقنية شبكة CSS المبررة تمامًا باستخدام inline-block ، بقلم Jelmer de Maat:

الرأس::بعد (المحتوى: ""؛ العرض: كتلة مضمنة؛ العرض: 100%؛)

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

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

الرأس h1 (الارتفاع: 100%؛) الرأس h1::قبل (المحتوى: ""؛ العرض: كتلة مضمنة؛ محاذاة رأسية: وسط؛ الارتفاع: 100%؛)
والنتيجة هي ما تحتاجه:

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

دعونا نستخدم خدعة العنصر الزائف في الرأس:

كود CSS

رأس (محاذاة النص: ضبط؛ الارتفاع: 15em؛ الحشو: 2em 5%؛ الخلفية: #2c3e50؛ اللون: #fff؛) header::after ( content: ""؛ العرض: inline-block؛ width: 100%؛ ) الرأس > div، التنقل في الرأس، div h1 (العرض: كتلة مضمنة؛ محاذاة رأسية: الوسط؛ ) الرأس > div (العرض: 50%؛ الارتفاع: 100%؛ محاذاة النص: اليسار؛ ) الرأس > div: :قبل (المحتوى: ""؛ العرض: كتلة مضمنة؛ محاذاة رأسية: وسط؛ الارتفاع: 100%؛)

تبدو أفضل بكثير:

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

كود CSS

الرأس (محاذاة النص: ضبط؛ الحشو: 2em 5%؛ الخلفية: #2c3e50؛ اللون: #fff؛) الرأس::بعد (المحتوى: ""؛ العرض: كتلة مضمنة؛ العرض: 100%؛ ) الرأس h1، التنقل في الرأس (العرض: كتلة مضمنة؛ محاذاة رأسية: الوسط؛) الرأس h1 (العرض: 50%؛ محاذاة النص: اليسار؛ الحشو العلوي: 0.5em؛) التنقل في الرأس (التنقل العلوي: 1em؛)

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

شاشة الوسائط و(الحد الأقصى للعرض: 820 بكسل) (الرأس (الارتفاع: تلقائي؛) الرأس> div، الرأس>

والنتيجة قابلة للتكيف وتبدو كما يلي على الأجهزة المحمولة:

في المثال، تم استخدام 820 بكسل للوضوح في موقع مباشر، بالطبع، يجب أن تكون القيمة مختلفة، وفقًا للمتطلبات. لدعم Internet Explorer 8، يجب عليك استخدام ":" بدلاً من "::" للعناصر الزائفة.

كود CSS النهائي

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * (الحشوة: 0؛ الهامش: 0؛) الجسم (الخلفية: #1abc9c؛ عائلة الخط: "Lato"، sans-serif؛ تحويل النص: أحرف كبيرة؛ تباعد الأحرف: 1 بكسل؛) الرأس (محاذاة النص: ضبط الارتفاع: 8em؛ الحشو: 2em 5%؛ اللون: #fff ) header::after ( content: ""; width: 100%; ) header > div, header > div::before, header nav, header > div; h1 ( العرض: كتلة مضمنة؛ محاذاة رأسية: وسط؛ محاذاة النص: يسار؛ ) رأس > div ( ارتفاع: 100%; ) رأس > div::قبل ( محتوى : ""; ارتفاع: 100%; ) رأس > div h1 (حجم الخط: 3em؛ نمط الخط: مائل؛) التنقل في الرأس a (الحشوة: 0 0.6em؛ المسافة البيضاء: nowrap;) التنقل في الرأس a:الطفل الأخير (الحشوة على اليمين: 0;) @ شاشة الوسائط و(الحد الأقصى للعرض: 720 بكسل) (الرأس (الارتفاع: تلقائي؛) الرأس> div، الرأس> div h1، التنقل في الرأس (الارتفاع: تلقائي؛ العرض: تلقائي؛ العرض: كتلة؛ محاذاة النص: المركز؛