. إنه مشابه للطوب عند بناء المبنى. على الرغم من أنها تشكل أساس الموقع وتصميمه، إلا أنها ليست الوحيدة. مثل الأبواب والنوافذ والتهوية والشرفات وما شابه ذلك، يتم استخدام عناصر HTML أخرى للتخطيط. هذه هي الروابط والنماذج والصور والقوائم والجداول.
سمح لنا بجعل الكود أكثر إحكاما ووضوحا. جعل الانتقال إلى تخطيط الكتلة من الممكن تخليص HTML من الأشياء غير الضرورية، وهي الأنماط. جعل من الممكن إزالة تخطيط الجدول المثقل بالكامل والذي يصعب التنقل فيه.
يستخدم بنشاط تخطيط كتلة CSS. باستخدام الأدوات المتاحة، يمكنك إنشاء أي تخطيط للصفحة بدقة البكسل. يُسمى هذا التخطيط بالبكسل المثالي. إنه يعني وجود تطابق تام بين الموقع والتخطيط. توضح الصورة أعلاه أنه ليس كل شيء بهذه البساطة مع تخطيط الكتلة. في البداية كان من المستحيل الاستغناء عن الطاولات. تم استخدامها لإنشاء التخطيط الرئيسي للصفحات، وتم استخدام الكتل للعناصر الفردية. كان هذا هو الحال حتى تعلموا كيفية ضبط ارتفاع الكتل.
مزايا
يتمتع تخطيط موقع الويب المحظور بالمزايا التالية:
مزيد من التطوير
حاليًا، تم إهمال تخطيط block div وله استخدام محدود فقط، فقط كحالة خاصة لمواقف معينة. تم استبداله بتحديد المواقع والتدفق في التخطيط. كان لديهم الكثير من أوجه القصور، ولكن على العموم سمحوا بأكثر من تخطيط الكتلة.
بعد ذلك جاء البناء باستخدام عناصر الكتلة المضمنة. هذا سهل إلى حد كبير عمل المبرمجين. تستفيد هذه الطريقة من كلا النوعين من الكتل وتسمح لك بإنشاء تصميم أكثر استجابة وتكيفًا. ومن الجدير بالذكر أن كل هذه الأساليب بطريقة أو بأخرى تتكون من عنصر div، وهو ما أطلق عليه اسم "التخطيط الرائع".
حاليًا، يتم استخدام Flex-box وbootstrap لإنشاء الصفحة. إنها تقلل الكود بشكل كبير وتجعل إنشاء تصميم سريع الاستجابة عالي الجودة أسرع وأسهل. إنها تسمح لك بتحريك الكتل دون كسر الصفحة بأكملها.
في طليعة التقدم هناك تكنولوجيا جديدة - الشبكات. يسمح لك بإنشاء تصميم بأي تعقيد بسرعة وسهولة. والكتل، والتدفق، وتحديد المواقع، كما حدث مع الجداول في وقت واحد، تستخدم فقط للغرض المقصود منها.
يعد تخطيط Div نموذجًا حاليًا لإنشاء موقع الويب.
تظهر مواقع جديدة باستمرار على الإنترنت - بوابات الأخبار والمدونات والصفحات الشخصية. يتم إنشاء كل واحد منهم تقريبًا على أساس نموذج الكتلة، والذي يعتمد على كتل DIV. اليوم سوف نفهم هذه التكنولوجيا، والنظر في الفروق الدقيقة في تخطيط div.
تدفق مستند HTML
إذا تذكرنا أن لغة HTML تسمح لك ببناء معلومات النص التشعبي، يصبح من الواضح أن أي موقع، في جوهره، عبارة عن مجموعة من الكتل: الصور والنصوص والروابط وما إلى ذلك. نحن لا نتحدث على وجه التحديد عن DIVs في الوقت الحالي، ولكنها موضوعات وثيقة الصلة.
لذلك، لدينا دفق معين من البيانات التي يتم تجميع صفحة HTML منها. يوجد حاليًا نوعان من العناصر الهيكلية: الكتلة والمضمنة. يتم وضع كتل الكتل، في تدفق HTML العادي، واحدة تلو الأخرى بترتيب رأسي. في الوقت نفسه، افتراضيًا، يشغل عرض الكتلة كل المساحة المتوفرة المتعلقة بالصفحة أو العنصر الأصلي. وفي المقابل، يتم ترتيب العناصر المضمنة واحدًا تلو الآخر بترتيب أفقي.
الممثلون الرئيسيون لهاتين الفئتين هم علامات div وspan.
وفقا لذلك، إذا كنا نتحدث عن تدفق HTML عادي، فسيتم وضع جميع كتل div تحت بعضها البعض، وسيكون الامتداد في سطر.
كما تعلم، لن تتمكن من إنشاء ترميز عادي لموقع ويب باستخدام العناصر المضمنة. لذلك، منذ عدة سنوات، لاستبدال تخطيط الجدول، قرروا استخدام تخطيط يعتمد على كتل DIV.
تخطيط موقع DIV
لذلك، بدأ استخدام كتل DIV لترميز الموقع. باستخدامها، كان من الممكن رسم التصميم الرئيسي وإنشاء كتل إضافية لجميع أنواع المحتوى الضرورية.
دعونا نلقي نظرة على هذه العملية باستخدام مثال الصفحة القياسية، والتي تتضمن رأسًا وكتلة محتوى وشريطًا جانبيًا وتذييلًا.
هذا هو الخيار الكلاسيكي. غالبًا ما يوجد الشعار في رأس الموقع، وروابط التنقل في الجزء الجانبي. يتم استخدام الكتلة الرئيسية لعرض المعلومات - المقالات وأوصاف الشركة وأرشيفات الصور وما إلى ذلك. في الجزء السفلي، يمكنك إدراج العنوان وجهات الاتصال ومعلومات الخدمة الأخرى.
كما ترون في الصورة، نستخدم الكتل الرئيسية التالية لتخطيط التخطيط:
يتم استخدام الكتلة الرئيسية كحاوية لجميع المحتويات. رأس - رأس الموقع. التنقل - كتلة التنقل. المحتوى - المعلومات الأساسية والمحتوى. تذييل - تذييل الموقع.
كل من هذه الكتل عبارة عن حاوية DIV. ولكن بناءً على النظرية، يجب أن تتبع الكتل بعضها البعض. نحتاج إلى الحصول على التخطيط الذي تمت مناقشته أعلاه بحيث يكون للكتل البنية التالية:
بالإضافة إلى أنها ستكون موجودة على الصفحة بنفس الطريقة التي نراها في القالب. كيف نستطيع إنجاز هذا؟ لهذا الغرض، سوف نستخدم خصائص كتل DIV، والتي ستسمح لنا بوضعها بالطريقة المرغوبة، بالنسبة لبعضها البعض، وللصفحة ككل.
لكن أولاً، دعونا ننشئ أساس HTML للتخطيط الخاص بنا، ونعطي أسماء الكتل حتى نتمكن من العمل مع أوراق الأنماط.
إطار HTML
إذا تخطينا جميع علامات الخدمة، فسيبدو الهيكل العظمي لموقعنا بهذا الشكل.
لكل كتلة لدينا فئة مخصصة. بمساعدتها، سنقوم بتعيين أنماط للكتلة - سيساعدنا ذلك في تحقيق الموقع المطلوب على الصفحة.
حان الوقت للتعرف على الأنماط والخصائص المستخدمة لتخطيط div للموقع.
أنماط CSS
إذا كان أي شخص لا يعرف بالفعل، فقد تم استخدام أوراق أنماط CSS في تطوير مواقع الويب لفترة طويلة. بمساعدتهم، يمكنك تغيير أي عنصر على الصفحة. ينطبق هذا على التصميم المرئي للكتلة وموقعها وحجمها.
يطفو
أولاً، دعونا نلقي نظرة على الخاصية التي تسمح لك بوضع DIV على يمين الصفحة أو يسارها أو نسبة إلى الحاوية الأصلية الخاصة بها.
تراجع صغير. عندما نقوم بتعيين نمط إلى كتلة، فإنه سيغير خصائصه (الحجم والموقع) بالنسبة للحاوية الأصلية.
الخاصية float لها أربع قيم: لا شيء، يمين، يسار، وراثة.
نحن مهتمون بمعنى "اليسار" و"اليمين".
تشير القيمة العائمة إلى الجانب الذي سيتم عرض الكتلة عليه. جميع الكتل الأخرى سوف تتدفق حوله من الجانب الآخر.
في حالتنا، بالنسبة لكتلة التنقل، يجب علينا تحديد القيمة left، وبالنسبة للمحتوى الرئيسي القيمة right . وهذا ما سيبدو عليه في ملف النمط:
التنقل ( تعويم: يسار؛ ) .المحتوى ( تعويم: يمين؛ )
بالمناسبة، يمكنك تعيين الخاصية فقط لكتلة التنقل. سيتم وضع كتلة المحتوى تلقائيًا على يمين التنقل. سيتم تحقيق ذلك بفضل الطفو الذي يتم الحصول عليه عن طريق ضبط خاصية الطفو.
الهوامش في CSS: الهامش والحشو
الآن دعونا نفهم خاصيتين مهمتين مستخدمتين في التخطيط المستند إلى div. إنهم مسؤولون عن المسافة البادئة. أسهل طريقة لفهم جوهر عملهم هي باستخدام مثال.
دعونا نتخيل ما يتعين علينا القيام به حتى يكون للكتلة الرئيسية MAIN مسافة بادئة طفيفة من رأس الموقع. يمكن تحقيق ذلك عن طريق تعيين خاصية هامش إلى div مع الفئة الرئيسية. وهي المسؤولة عن الحشو الخارجي للكتلة.
تحتوي خاصية الهامش على القيم التالية: [value | الفائدة | تلقائي] (1،4) | يرث.
وبالتالي، يمكنك تحديد الإزاحة بالبكسل، بالنسبة المئوية، لكل جانب على حدة.
من الممكن تعيين مسافة بادئة معينة فقط، على سبيل المثال على الجانب العلوي. هذه هي حالتنا بالضبط. وإليك كيفية تنفيذه:
الرئيسي ( الهامش العلوي: 10 بكسل؛ )
الآن ستحتوي الكتلة الرئيسية لدينا على حشوة علوية تبلغ 10 بكسل.
الآن دعونا نصمم كتلة تحتوي على التنقل والمحتوى. تخيل أن لدينا بالفعل موقعًا جاهزًا. توجد جميع الروابط الموجودة في التنقل بالقرب من الحافة اليسرى للصفحة. والنص الموجود في كتلة المحتوى، على العكس من ذلك، مجاور بشكل وثيق للجانب الأيمن. تصميم غير سارة تماما. نحن بحاجة لجعل الحشو الداخلي.
خاصية الحشو هي المسؤولة عن ذلك، ولها القيم التالية: [value | بالمائة] (1، 4) | يرث
المبدأ هنا هو نفسه كما هو الحال مع خاصية الهامش - يمكنك ضبط المسافة البادئة لكل جانب على حدة.
التنقل ( تعويم: يسار؛ الحشو يسار: 15 بكسل؛ ) .content ( تعويم: يمين؛ الحشو يمين: 20 بكسل؛ )
باستخدام هذه الخصائص الأساسية، يمكنك تحقيق التخطيط المطلوب لكتل DIV. ونتيجة لذلك، سوف تتلقى تخطيط موقع جاهز، وكل ما تبقى هو ملء المعلومات اللازمة.
فيديو للمقالة:
خاتمة
لقد نظرنا فقط في الخصائص الأساسية. في الواقع هناك الكثير منهم. ولكن على أية حال، سيتم دائمًا استخدام المعلومات المقدمة في تخطيط div.
لماذا تبحث عن معلومات على مواقع أخرى إذا تم جمع كل شيء هنا؟
سلسلة مقالات المؤلف مخصصة ل أساسيات تخطيط موقع الكتلة. هذا هو المكان الأول لبدء دراسة الموضوع. إنشاء الموقع. ستكون الدروس مفيدة لأولئك الذين يرغبون في تعلم الأساسيات HTML وCSSليس فقط من الناحية النظرية، ولكن في الممارسة العملية.
أثناء دراستنا للموضوع، سنقوم بإنشاء موقع ويب، موقع ويب عادي، بدون أي أجراس وصفارات خاصة، ولكنه جميل جدًا.
في الدروس، أتحدث ببساطة ووضوح عن تخطيط موقع الويب القائم على الكتلة والمزيد. إذا كنت تريد أن تفهم الأساسيات بسرعة تخطيطات الموقع، فإن هذه السلسلة من المقالات ستكون بالضبط ما تحتاجه.
ما هو تخطيط الكتلة؟
ماذا حدث حظر تخطيط موقع الويبوماذا تأكله؟
في السابق، تم تصميم مواقع الويب باستخدام الجداول. كان كل عنصر من عناصر الصفحة، سواء كان عنوانًا أو نصًا أو صورة، موجودًا في خليته الخاصة. وتجمعت هذه الخلايا في خلايا أخرى أكبر حجمًا، وكانت تلك بدورها موجودة في الخلية الرئيسية، أي في صفحة الموقع نفسها.
أصبح التخطيط الجدولي قديمًا الآن، على الرغم من استمرار العديد من مشرفي المواقع في استخدامه. عيبه الكبير هو الكود الثقيل. بعد كل شيء، كل خلية صغيرة تحتاج إلى أن يتم تعيينها بعلامات معينة.
تخطيط الكتلة- أغنية مختلفة تماما. هنا، توجد كافة عناصر الصفحة في كتل خاصة تسمى divs. في جوهرها، فهي تشبه إلى حد ما نفس الجداول. الصندوق هو صندوق في أفريقيا أيضًا. لكن الكتل أكثر ملاءمة وأبسط وأكثر وظيفية.
حاجزفي تخطيط موقع الويب، هذه منطقة مستطيلة عادية تحتوي على عدد من الخصائص، مثل: الإطار والهوامش والمسافات البادئة. يمكن أن يكون محتوى الكتلة أي شيء - نص، صورة، قائمة، نموذج لملءه، قائمة التنقل، وما إلى ذلك.
إطار- هذا هو المخطط التفصيلي للكتلة التي يمكنك تعيين خصائصها مثل السُمك واللون والنوع (منقط، صلب، منقط).
الحقول (الحشوة)- فصل محتويات القالب عن إطاره بحيث لا يكون النص مثلاً "ملتصقاً" بجدران القالب.
هوامش- هذه هي المساحة الفارغة بين الكتل المختلفة، مما يسمح بوضع كتلتين بالنسبة لبعضهما البعض على مسافة معينة.
يتم دائمًا ترتيب الكتل، مثل الجداول، عموديًا على الصفحة. أي أنه إذا تمت كتابة كتلتين متتاليتين في رمز الصفحة، فسيتم عرضهما في المتصفح واحدة أسفل الأخرى. إذا أردنا ترتيب عدة كتل أفقيًا في سطر واحد، فإننا في خصائصها نقوم بتعيين معلمة مثل " تتدفق حولها"(يطفو). ولكن أكثر عن ذلك لاحقا.
تخطيط الكتلة للموقع. العلامات
بطاقة شعارهو بناء خاص للغة HTML. يميز افتتاحو إغلاقالعلامات. لا تخلط بينها وبين علامات التصنيف من الشبكات الاجتماعية، أو العلامات الموجودة على مواقع الويب، فهذه أشياء مختلفة!
في أبسط الحالات، تكون العلامة بمثابة جزء من مجموعة بناء للأطفال، والتي لها غرضها الصارم: الشريط يعني شريط، والعجلة تعني عجلة ولا شيء غير ذلك. على سبيل المثال، علامة الفقرة:
نص الفقرة.
يُشار إليه دائمًا بالحرف p ولا شيء غير ذلك. هذا هو اسمه.
يتم وضع العلامات دائمًا بين قوسين زاوية. كما ترون من المثال، هناك علامة فتح وإغلاق. تحتوي علامة الإغلاق على شرطة مائلة تمت إضافتها قبل الاسم - شرطة مائلة للأمام / .
لا تحتوي كل العلامات على زوج إغلاق. على سبيل المثال، علامة الصورة img لا تحتوي عليها على الإطلاق. ولكن من أجل الامتثال للمعايير الحديثة ومتطلبات مواصفات XHTML، ما زالوا يضيفون مسافة بشرطة مائلة قبل قوس زاوية الإغلاق. يبدو شيء من هذا القبيل:
علامة div
علامة div هي أساس تخطيط الكتلة. هذه هي المكعبات ذاتها التي تم بناء الموقع بأكمله منها. هذه العلامة محايدة. على عكس علامات HTML القياسية، والتي ترتبط بشكل صارم بمحتواها (p - للفقرات، a - للروابط، img - للصور)، يمكن أن تحتوي علامة div على أي شيء وبقدر ما تريد من هذه الأشياء. اعتبره بمثابة صندوق كبير يتم فيه التخلص من جميع الألعاب.
يتم استخدام علامة div للتعريف المجالات الوظيفية على الصفحة. على سبيل المثال، مثل: "الرأس" أو كتلة التنقل أو كتلة المحتوى الرئيسي أو "التذييل" أو التذييل في رأينا.
علامة div، مثل أي علامة أخرى، لها سماتها الخاصة.
يصف- الخصائص الوصفية للعلامة. أي ماذا يمكنه أن يفعل وكيف. على سبيل المثال، لنأخذ علامة الصورة:
في هذه الحالة، src، العرض، الارتفاع، alt هي سمات العلامة. يتم تقديم علامات الاقتباس (وهذا أيضًا مطلب إلزامي للمعايير الحديثة). قيمصفات.
ليس من الصعب فك مثل هذا التسجيل. تشير العلامة إلى أنه في هذا المكان من الصفحة تحتاج إلى إرفاق الصورة risunok.jpg من مجلد الصور. عرض الصورة 200 بكسل، وارتفاعها 50 بكسل. وإلى الكومة تم إضافة نص بديل يشرح ما يظهر في الصورة.
بالمناسبة، النص البديل ليس مجرد نزوة، ولكنه أيضًا مطلب ضروري. ليس كل مستخدمي الإنترنت يتمتعون ببصر جيد. يستخدم شخص ما برنامج التعرف على النص والقراءة. ويقوم بعض الأشخاص ببساطة بإيقاف عرض الصور في المتصفح. ولهذا السبب توجد تسميات توضيحية بديلة للرسومات.
إذا لم يكن هناك معنى لتوقيعها (على سبيل المثال، علامة قائمة أو نوع من الأسهم)، فسيتم ترك السمة البديلة بمسافة فارغة بين علامتي الاقتباس.
سمات علامة div
تحتوي علامة div على سمتين فقط:
المعرف - السمة التي تسمح لك بالتعيين فريدالقيمة، أي القيمة المستخدمة في الصفحة فقط مرة واحدة. على سبيل المثال، رأس أو تذييل الصفحة.
بهذه الطريقة، يمكننا أيضًا تعيين بعض الإعدادات في ورقة الأنماط لعلامة div مع سمة المعرف وقيمة الرأس، وإعدادات مختلفة تمامًا للتذييل. ويتعرف المتصفح بشكل صحيح على أن هذا الجزء من النص ينتمي إلى "الرأس" وسيتم كتابته، على سبيل المثال، بخط كبير وأحمر، ولكن هذا الجزء ينتمي إلى "التذييل" وسيتم كتابته بخط صغير ورمادي. ولا ارتباك!
الفئة هي سمة تسمح لك بتعيين نفس القيمة لعدة عناصر. على سبيل المثال، أضف إطارًا بنفس السُمك واللون إلى جميع الصور الموجودة على الصفحة. نظرًا لوجود العديد من الصور، لم يعد من الممكن استخدام سمة المعرف، لذلك نستخدم الفئة .
للمرة الأولى، أعتقد أن هذا يكفي. إذا كان هناك شيء غير واضح بشأن تخطيط كتلة مواقع الويب، فاسأل في التعليقات.
يتبع. ابق على تواصل!
لقد أصبح التخطيط باستخدام كتل div معيارًا منذ فترة طويلة ويتمتع بعدد من المزايا مقارنةً بالتخطيط الجدولي. ومع ذلك، في الواقع، يشعر المطورون المبتدئون بالارتباك بشأن سلوك هذه الكتل نفسها.
دعونا نلقي نظرة على النقاط الرئيسية لتخطيط الكتلة. الآن لن نأخذ في الاعتبار معيار html5، ولكننا سننظر ببساطة إلى أساسيات التخطيط باستخدام كتل div، والتي يتم استخدامها عند إنشاء تخطيط أو بعض مكونات الصفحة الفردية.
ما الذي يعتبر عنصر كتلة؟
يتم تمثيل مساحة هذا العنصر على الصفحة بمستطيل، ويشغل العرض الافتراضي بالكامل ويبدأ في سطر جديد.
العنصر الأكثر شيوعًا المستخدم في تخطيط الكتلة هو العنصر العالمي
.
لذلك، من البسيط إلى المعقد. دعونا نرى كيف تظهر div بشكل افتراضي دون أن تؤثر الأنماط على موضعها. من أجل الوضوح، سنضيف أنماطًا إلى العناصر المضمنة، من خلال سمة النمط.
كتلة 1
بلوك 2
بلوك 3
دعونا نضيف قيمة العرض لكل كتلة:
كتلة 1
بلوك 2
بلوك 3
ويمكن ملاحظة أن كل كتلة، حسب المواصفات، تقع على سطر جديد. وهذا هو سلوكهم الطبيعي.
الآن السؤال الذي يطرح نفسه هو كيفية الموقف كتل div على سطر واحد، واحد تلو الآخر؟
لهذا الغرض، هناك خاصية تحدد الجانب الذي سيتم إجبار الكتلة على محاذاته. وفي الوقت نفسه، من الحافة الأخرى، يمكن أن يتدفق حول العناصر الأخرى.
الخاصية float لها المعاني التالية:
- اليسار - تتم محاذاة الكتلة إلى الحافة اليسرى، وتتدفق إلى اليمين
- اليمين - تتم محاذاة الكتلة إلى الحافة اليمنى، وتتدفق إلى اليسار
- لا شيء - لم يتم تحديد أي غلاف، وتتصرف الكتلة بشكل افتراضي، كما في الأمثلة السابقة.
دعونا نضيف float:left إلى الكتل الخاصة بنا بحيث تتم محاذاة الكتل إلى اليسار:
كتلة 1
بلوك 2
بلوك 3
ونتيجة لذلك، تصطف الكتل على سطر واحد. حسنًا، لنفترض أننا أردنا إضافة div آخر في الأسفل، وسنفعل ذلك دون تحديد الخاصية float:
كتلة 1. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الكتلة 2. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
كتلة 3. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الوحدة 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
كتلة 1. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الكتلة 2. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
كتلة 3. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الوحدة 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
لماذا حدث هذا؟ باختصار، يحدث هذا بسبب سقوط العناصر العائمة خارج تدفق المستند. ومع ذلك، هذا موضوع لمقال منفصل. وسنتعرف هنا على الخاصية الجديدة التي تتحكم في سلوك العناصر العائمة:
- اليسار - تعطيل الالتفاف على الجانب الأيسر، وسيتم عرض جميع العناصر على سطر جديد (تحت العنصر)
- rigth - يمنع العنصر من الالتفاف على الجانب الأيمن
- كلاهما - يحظر التفاف عنصر على كلا الجانبين؛ يوصى باستخدامه عندما تحتاج بوضوح إلى إظهار العنصر في سطر جديد أو عندما يكون من غير المعروف الجانب الذي يمكن التفافه حول العناصر الأخرى
دعونا نضيف خاصية Clear:left إلى الكتلة 4، والتي ستمنع هذا العنصر من التدفق حول العناصر العائمة الأخرى على الجانب الأيسر.
كتلة 1. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الكتلة 2. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
كتلة 3. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الوحدة 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
كتلة 1. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الكتلة 2. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
كتلة 3. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الوحدة 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
يتم وضع القطعة 4 على سطر جديد، حسب حاجتنا.
في هذه الحالة، نحن نعرف كيفية تحديد موقع الكتل الأخرى، لذلك في المثال أشرنا على الفور إلى Clear:left. هناك مواقف لا نعرف فيها بالضبط الجانب الذي ستلتقي به الكتلة العائمة، لذلك في مثل هذه الحالات يكون من المفيد تحديد واضح:كلاهما، مما يلغي التدفق على كلا الجانبين. لقد اكتشفنا الآن كيفية وضع كتل div أفقيًا على سطر واحد.
ضع في اعتبارك أن الكتل العائمة يتم وضعها على نفس السطر إذا كان عرض العنصر الأصلي يسمح بذلك. إذا لم يتم احتواء عناصر الكتلة في صف واحد، فسيتم التفافها في سطر جديد. إذا كان هذا أمرًا بالغ الأهمية، على سبيل المثال، عند وضع التخطيطات، فأنت بحاجة إلى أخذ ذلك في الاعتبار وبالنسبة للكتل ذات التعويم، تأكد من ضبط العرض - ثابت (px) أو مطاطي (٪، rem، وما إلى ذلك). دعونا ننظر إلى مثل هذه المواقف بعد ذلك.
كيف نؤثر على الكتل إذا أردنا وضع هذه الكتل في المركز؟
سيكون الحل الكلاسيكي هو إضافة أصل إلى الكتل واستخدام الهامش: 0 auto; property.
لماذا أعطينا الوالد الفصل الدراسي؟ "المجمع" يعني "المجمع". إنها إحدى الممارسات المقبولة عمومًا، والتي تحدد اسم الفئة، حيث يقوم العنصر بتغليف الكتل الأخرى وبالتالي السماح بالتحكم فيها/التأثير عليها عن طريق تغيير الأصل نفسه.
لنأخذ الترميز من الأمثلة السابقة ونقوم بتحسينه.
كتلة 1. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الكتلة 2. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
كتلة 3. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الوحدة 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
كتلة 1. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الكتلة 2. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
كتلة 3. لوريم إيبسوم دولور سيت أميت، كونسيتور أديبيسينج إيليت
الوحدة 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
كل شيء يبدو بسيطا هنا.
وإذا كنا لا نحب أن يلتصق النص بشكل وثيق بحافة الكتلة الأصلية ونريد إضافة حقول دون إجراء تغييرات على العلامات، فقط باستخدام CSS. دعونا نضيف خاصية الحشو إلى العناصر:
الكتلة 1. لوريم
الكتلة 2. لوريم إيبسوم
كتلة 3. لوريم إيبسوم
الكتلة 4. لوريم
ونحن نرى أن تخطيطنا قد انهار! لقد ذهب بلوك 3 إلى مكان ما. لماذا حدث هذا؟ الجواب بسيط. ومن خلال إضافة الحقول إلى العناصر، قمنا بزيادة عرضها. الآن القيم هي:
الكتلة 1: 10 + 200 + 10 = 220 بكسل
الكتلة 2: 10 + 150 + 10 = 170 بكسل
الكتلة 3: 10 + 100 + 10 = 120 بكسل
الكتلة 4: 10 + 450 + 10 = 470 بكسل
220 + 170 + 120 = 510 بكسل
يبلغ العرض الإجمالي للكتل الثلاث 510، ولا تتناسب مع عرض الأصل (450) وبالتالي يتم نقلها إلى سطر جديد.
كيف تصلحها؟ يمكنك القيام بما يلي:
- إعادة ضبط قيم العرض لكل كتلة مع مراعاة الهوامش. عن طريق تقليل أحجام الكتلة. كل شيء سوف يتناسب بدقة مع سطر واحد مرة أخرى. هل توافق على أن هذا غير مريح؟ في كل مرة أدخل فيها إلى التخطيط وأقوم بتحرير شيء ما.
- استخدم خاصية تغيير حجم الصندوق: border-box. بحيث يتم أخذ الحساب من العرض الإجمالي للكتلة. أنصحك بمعرفة ما هو نموذج كتلة CSS.
وباستخدام الخيار الثاني يصبح الأمر كالتالي:
الكتلة 1. لوريم
الكتلة 2. لوريم إيبسوم
كتلة 3. لوريم إيبسوم
الكتلة 4. لوريم
الكتلة 1. لوريم
الكتلة 2. لوريم إيبسوم
كتلة 3. لوريم إيبسوم
الكتلة 4. لوريم
الآن دعونا نجمع كل المعلومات التي تلقيناها معًا ونحاول إنشاء تخطيط قياسي بسيط مكون من ثلاثة أعمدة مع تخطيط مرن، والذي سيمتد إلى حد أقصى يبلغ 900 بكسل، وبعد ذلك سيتم وضع التخطيط بأكمله في المنتصف.
إنشاء علامة التخطيط:
وثيقة
لوريم إيبسوم دولور سيت أميت، consectetur adipisicing elit. Odit rem fugit itaque, est aberiam autem repellat vitae porro ex expeditita, cuque nulla, velit. Soluta velit eos، quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis، adipisci يفترض الأذن!
نكتب الأنماط:
Body ( الحد الأقصى للعرض: 900 بكسل؛ /* تحديد الحد الأقصى للعرض */ الهامش: 0 تلقائي؛ ) /* لجميع الكتل الموجودة داخل النص، قم بتغيير خوارزمية حساب عرض الكتلة وإضافة هوامش 10 بكسل إلى جميع الكتل */ body div ( - تحجيم مربع webkit: مربع الحدود؛ -حجم صندوق moz: مربع الحدود؛ حجم الصندوق: مربع الحدود؛ الحشو: 10 بكسل؛ ) .header (الخلفية: #CCA69E؛ الحشو: 10 بكسل؛ ) .left- الشريط الجانبي ( العرض: 20%; الخلفية: #8ED9B6; تعويم: يسار; ) .المحتوى ( تعويم: يسار; العرض: 60%; ) .الشريط الجانبي الأيمن ( العرض: 20%; الخلفية: #FF9282; تعويم: يسار; ) .footer ( الخلفية: #000؛ واضح: كلاهما؛ /* تعطيل الالتفاف على كلا الجانبين، يتم عرض الكتلة على سطر جديد */ color: #ccc; )
إذا كان هناك شيء غير واضح، اسأل في التعليقات.
قد يكون من المفيد أن تقرأ: