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

استخدام أعمدة متعددة

لإنشاء أعمدة متعددة يمكنك استخدام الخصائص:

• عدد الأعمدة
• عرض العمود

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

نستخدم ترميز HTML:

رمز CSS سيكون هكذا:

Div (عدد الأعمدة: 3)

او مثل هذا:

Div (عرض العمود: 15em) /* يمكنك أيضًا استخدام px */

يتوفر أيضًا تسجيل قصير:

القسم (الأعمدة: 3 20م)

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

يعد تحديد الأعمدة باستخدام خاصية عدد الأعمدة أكثر ملاءمة للقوالب المرنة، نظرًا لأن عرض الأعمدة سوف يتكيف مع تغير عرض شاشة المتصفح.

حاويات العمود

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

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

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

التباعد وفواصل الأعمدة

هناك القليل من السيطرة على مكبرات الصوت. يمكننا ضبط المسافة بين الأعمدة باستخدام خاصية column-gap. بشكل افتراضي، يتم تعيين خاصية column-gap على 1em.

Div (فجوة العمود: 2em)

يمكنك أيضًا تعيين الفاصل الرأسي باستخدام خاصية قاعدة العمود:

Div (قاعدة العمود: رقيقة صلبة #ccc)

يمكن تمثيل السجل القصير بثلاث خصائص تعمل بنفس الطريقة التي تعمل بها عند تحديد إطارات العناصر:

• عرض قاعدة العمود
• نمط قاعدة العمود
• لون قاعدة العمود

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

حشوة العمود وامتداده

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

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

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

H2 (امتداد العمود: الكل)

لا يوجد سوى قيمتين محتملتين - الكل (الكل) أو لا شيء (لا شيء). لن تتمكن من استخدام عمودين من الأعمدة الثلاثة.

انقطاع المتكلم

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

• قبل العنصر - استراحة قبل:
• في العنصر - الاختراق: تلقائي | دائما | تجنب | اليسار | حق | صفحة | العمود | تجنب الصفحة | تجنب العمود
• بعد العنصر - فاصل: تلقائي | تجنب | تجنب الصفحة | تجنب العمود

تعريفات القيم المستخدمة :

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

الهدف من كل هذه الخصائص والقيم هو التأكد من أن محتوى معين يبدأ في عمود جديد.

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

من الممكن تحديد الأعمدة بحيث يحتوي العنصر على أعمدة أكثر من المساحة المخصصة للإخراج:

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

خاتمة

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

بمساعدتهم، يمكنك تغيير مظهر المشروع الحالي دون تغييرات كبيرة في الهيكل.

دعنا نتخطى الجزء الذي أقول فيه أن اسمي رمال وأنني شغوف بتصميم مواقع الويب، وبالتحديد HTML وCSS.

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

على الإنترنت، لم أجد تفسيرًا عاديًا لإنشاء كتل مواقع الويب ذات العمود N؛ كان هناك دائمًا كود ملتوي وقبيح في كل مكان.

هدفنا هو إنشاء موقع ويب مكون من ثلاثة أعمدة، وستكون كتلته كما يلي:

يتقلص حسب حجم الشاشة (أي لن ينخفض)؛

يمتد عبر عرض الشاشة بالكامل (عادةً ما يكون موقعًا مكونًا من عمودين)؛

التكيف عند تقليل أبعاد معينة.

اذا هيا بنا نبدأ. من أجل إنشاء 3 أعمدة أفقية، سوف نستخدم خاصية العرض: inline-block. نعم، نعم، الخاصية العائمة لم تعد ذات صلة، لكننا ما زلنا بحاجة إليها.

قبل تعيين خصائصها، دعونا ننشئ ثلاث كتل، ونضعها في الفئات الرئيسية والمضمّنة:

المحتوى الأيسر صحيح

html, body (margin:0;padding:0;).main ( Margin:0 auto; /* توسيط الكتل */ width:100%; /* اضبط العرض على 100% لجعله مطاطيًا */ max-width :700px ; /* ضبط الحد الأقصى للعرض */ ) .inline div (display:inline-block; /* إنشاء الكتل أفقيًا */display: -moz-inline-stack; /* بالنسبة إلى FireFox 2، نفس الكتلة المضمّنة */ Vertical-align:top /* محاذاة في الأعلى */ Font-size:16px; /* اضبط حجم الخط للأطفال، وإلا فسيأخذ قيمة الأصل */ /* بالنسبة إلى IE 6 وIE 7، بحيث تكون الكتل أفقية: 1؛ *display: inline */ ) div.inline (font-size:0;) /* اضبط الأصل على 0 لإزالة الحشو من الكتل */ .left-block ( الخلفية: أحمر؛ العرض: 20%؛ / * اضبط العرض كنسبة مئوية لجعله مطاطيًا * / الارتفاع: 300 بكسل؛ / * ارتفاع الكتلة * / .content ( الخلفية: أخضر؛ العرض: 60%؛ الارتفاع: 300 بكسل؛ ) .الكتلة اليمنى ( الخلفية: أزرق؛ العرض: 20%؛ الارتفاع: 300 بكسل؛

نتيجة:

حجم النافذة أكبر من 900 بكسل

حجم النافذة أقل من 900 بكسل

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

من أجل توسيع التصميم إلى العرض الكامل للشاشة، ما عليك سوى إزالة خاصية max-width:700px في الفئة الرئيسية.

للتأكد من أن التصميم لا يتقلص تمامًا عندما يكون حجم النافذة صغيرًا، بل يتكيف، نضيف الطلب التالي إلى أنماط @media:

/* مثال بسيط لاستعلام @media */ @media (max-width:600px) ( .inline div (display:block; /* جعل الكتل "محظورة"، أي واحدة أسفل الأخرى */ width:100% ; / * اضبط على عرض الشاشة بالكامل */ height:100px;

يمكنك إلقاء نظرة على JS Fiddle بمزيد من التفاصيل - أي تغيير في الكود نحو الأفضل مرحب به.

نود أن نشكر مشتركنا على هذه المادة،

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

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

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

مثال 1. الأعمدة في الكود

العمود الأيسر العمود الأيمن العمود الأوسط

يتم تشكيل موضع الطبقات من خلال الأنماط: بالنسبة للعمود الأيسر، قم بتعيين العرض (العرض) والتدفق على طول الحافة اليسرى (تعويم: يسار)، للعمود الأيمن - العرض والتدفق على طول الحافة اليمنى (تعويم: يمين)، بالنسبة للمسافة المركزية - المسافة البادئة اليسرى واليمنى بعرض الأعمدة اليسرى واليمنى (مثال 2).

مثال 2: نمط إنشاء الأعمدة

#container ( العرض: 900 بكسل؛ /* عرض التخطيط */ الهامش: 0 تلقائي؛ /* محاذاة المركز */ ) #nav ( العرض: 200 بكسل؛ /* عرض العمود الأيسر */ float: يسار؛ ) #aside ( العرض: 300 بكسل /* عرض العمود الأيمن */ float: right ) #content ( هامش: 0 300px 0 200px; /* مسافة بادئة بعرض العمودين الأيمن والأيسر */ )

يتم عرض رمز الصفحة الكامل مع مراعاة هذا النمط في المثال 3.

المثال 3: تخطيط ثلاثة أعمدة

نص تخطيط ثلاثي الأعمدة (الخط: 0.8em Arial، Helvetica، sans-serif؛ /* خط صفحة الويب */ الخلفية: #D7E1F2؛ /* لون الخلفية */ اللون: #ffe؛ /* لون النص */ ) a ( اللون: #008BCE؛ /* لون الرابط */ ) #container (العرض: 500 بكسل؛ /* عرض التخطيط */ الهامش: 0 تلقائي؛ /* محاذاة المركز */ الخلفية: #FCE600؛ /* لون العمود */ ) # رأس (حجم الخط: 2.2em; /* حجم النص */ محاذاة النص: المركز; /* محاذاة المركز */ الحشو: 5px; /* الحشو حول النص */ الخلفية: #D71920; /* لون خلفية الرأس * / ) #nav، #aside ( float: left; width: 110px; الحشو: 5px; ) #content ( الخلفية: #54B948; الهامش: 0 120px; /* عرض العمود */ الحشو: 10px; ) #aside ( float: right; اللون: #000; ) h2 ( الهامش: 0 0 1em; ) #التذييل ( واضح: كلاهما؛ /* إلغاء الإجراء العائم */ الحشو: 5 بكسل; /* الحشو حول النص */ الخلفية: #D71920; /* اللون خلفية السرداب */ ) بطولة تاريخية

إحصائيات البطولة

مقابلة مع رئيس المحكمة

أسئلة المنافسة

إحصائيات

وصل أحد عشر شخصًا إلى النهائي.

أشار شخص واحد بشكل صحيح إلى الأسلوب الذي كتبه دييغو فيلاسكيز؛

شخص واحد فقط يعرف من اخترع القارب البخاري؛

أظهر استطلاع للرأي العام

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

أمبير؛ أمبير؛ أمبير؛ أمبير؛ أمبير؛ أمبير؛ نسخ؛ فلاد ميرزيفيتش

يحتوي هذا التنفيذ على العديد من الميزات:

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

أرز. 2. العمود الأيمن أعلى من الباقي

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

في Blogger، أضف تعليمات برمجية إلى أداة HTML/Javascript في علامة التبويب "تصميم". إذا كنت تستخدم أحد أحدث السمات في مدونتك (Emporio، وContempo، وSoho، وNotable)، فلا تنس تنشيط رؤية الأداة (مربع الاختيار الموجود بجوار "مرئي للجميع"، و"إظهار الأداة " HTML/ جافا سكريبت "").
في Wordpress، أضف الكود إلى أداة "النص".

المؤلف: إيفانوفا ناتاليا 2019-03-03

تقترب العطلة - يوم المرأة العالمي. دعونا نستعد لذلك مقدما. يمكنك تهنئة الفتيات والنساء بطريقة أصلية باستخدام خدمات البطاقات البريدية الموضحة أدناه.

يمكنك استخدام نفس الخدمات التي استخدمناها. خدمات البطاقات البريدية الجاهزة أنشئ بطاقة بريدية بتاريخ 8 مارس عبر الإنترنت

استخدم الخدمات التالية لإنشاء بطاقة بريدية عمليًا من البداية.

Canva هو محرر صور وظيفي معروف. ستجد هنا العديد من القوالب. التسجيل مطلوب.

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

Crello هو محرر يتطلب التسجيل. لا تخف من اللغة الإنجليزية، يمكنك التبديل إلى اللغة الروسية في الإعدادات.

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

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

آمل أنه باستخدام أحد هذه المولدات، ستتمكن من تهنئة سيداتك بشكل مناسب في الثامن من مارس!

المؤلف: إيفانوفا ناتاليا 2019-02-17

محتوى المقال:

يتم إغلاق Google Plus لم ترق منصة Google Plus إلى مستوى آمال المطورين وسيتم إزالتها بالكامل في 2 أبريل 2019. ومعه، ستختفي الألبومات المرتبطة به في صور Google، ولن يكون التفويض على المواقع التي تحتوي على حساب Google Plus متاحًا. اعتبارًا من 4 فبراير، أصبحت وظيفة إنشاء الملفات الشخصية والقنوات والصفحات في Google Plus غير متاحة. إذا تم تخزين محتوى قيم على حسابك، فيمكنك تنزيل نسخة احتياطية.
ستؤثر التغييرات بشكل كبير على المدونين الذين يديرون مدوناتهم على Blogspot. لن تكون بعض أدوات G+ وتعليقات G+ وملفك الشخصي في Google+ متاحة بعد الآن. تم ذكر ذلك في الإشعار الموجود في منطقة إدارة Blogger:
بعد الإعلان عن إيقاف تشغيل واجهة برمجة تطبيقات +Google في مارس 2019، سيتم إجراء عدد من التغييرات على تكامل Blogger مع +Google في 4 فبراير.
جوجل+ الحاجيات. لن تدعم تصميمات المدونات زر 1+ ومتابعي +Google وعناصر واجهة المستخدم لشارة +Google بعد الآن. ستتم إزالة كافة مثيلات هذه الأدوات من مدونتك.
أزرار +1. ستتم إزالة الزرين 1+ وG+، وكذلك روابط "النشر على Google+" ضمن مشاركات المدونة وفي شريط التنقل.
يرجى ملاحظة أنه إذا كنت تستخدم نموذجًا مخصصًا يحتوي على ميزات +Google، فقد يلزم تعديله. يرجى الاتصال بالشخص الذي قدم لك هذا النموذج للحصول على توصيات.
تعليقات جوجل+. سيتم إيقاف دعم التعليقات باستخدام +Google، وستعود جميع المدونات التي تستخدم هذه الميزة إلى تعليقات Blogger القياسية. لسوء الحظ، لا يمكن نقل التعليقات المنشورة عبر +Google إلى Blogger، لذا لن تظهر مرة أخرى في مدونتك. حذف تعليقات جوجل بلس للأسف سيتم حذف التعليقات التي تم نشرها في النظام نهائياً. يمكنك فقط استخدام نفس الأداة https://takeout.google.comلقول التعليقات الاحتياطية من Google+ إلى جهاز الكمبيوتر الخاص بك. فقط لا يوجد أداة تحميل تشغيل خاصة به ويمكنك فقط استعادة التعليقات يدويًا بطريقة ملتوية إلى حد ما. من الجيد أنني كنت في الوقت المحدد في الوقت المناسب كيفية استبدال ملف تعريف Google Plus بملف تعريف Blogger إذا كنت تقوم بالتدوين على Blogspot، فمن المستحسن الآن العودة من ملف تعريف Google Plus إلى ملف تعريف Blogger (لأولئك الذين قاموا بالتبديل). إلى Google Plus في وقت واحد). أوصي بالقيام بذلك الآن لتجنب المواقف غير المتوقعة التي قد تحدث عند حذف حسابات Google Plus. كيفية استعادة ملفك الشخصي في Blogger من السهل القيام بذلك في إعدادات مسؤول Blogger:
الإعدادات -> إعدادات المستخدم -> ملف تعريف المستخدم - هنا حدد Blogger

احفظ تغييراتك.

أكد الانتقال إلى وأدخل اسمك أو لقبك.

لا تنس تحميل الصورة الرمزية على ملفك الشخصي في Blogger.

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

المؤلف: إيفانوفا ناتاليا

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

أين تبحث عنهم؟ يتم تعيين المسار إلى الملف في القالب بين