حشوة العمود والنطاق. قم بإزالة الروابط الخارجية من قالب Blogger القياسي الجديد
اليوم سنلقي نظرة على عنصر تخطيط سريع الاستجابة وبسيط للغاية، مثل النص المكون من عمودين. بعد أن فهمت المعنى، يمكنك إنشاء ثلاثة وأربعة أعمدة، والتي عند الوصول إلى الحد الأدنى المحدد للعرض، تنخفض. وبطبيعة الحال، يمكنك إضافة صور إلى النص، وأي عناصر تصميم على الإطلاق.
وبطبيعة الحال، لا يمكنك إضافة نص فحسب، بل يمكنك أيضًا إضافة أي محتوى آخر إلى الأعمدة أو الأعمدة. يُطلق على هذا التخطيط التكيفي للكتل أيضًا اسم "العائم". لأن الذي؟ واصل القراءة وسوف تفهم كل شيء.
تمتد الأمثلة النصية التالية المكونة من عمودين عبر العرض الكامل للحاوية. في حالتي، هذه منطقة محتوى نموذجية في مدونات WordPress.
لقد أخذت المقتطف من المثال وقمت ببساطة بنسخه ولصقه من خلال محرر WordPress المدمج في المنشور، وكل شيء سار على ما يرام. يحتاج المحرر فقط إلى التبديل إلى وضع HTML
تخطيط التكيف. النص في عمودين بدون صور يمكنك إضافة زر إلى المحررلكي لا يتم إدخال رمز النص في عمودين يدويًا في كل مرة، يمكنك القيام بذلك مرة واحدة، دون استخدام مكون إضافي. أنها مريحة للغاية.
حسنًا، دعونا نلقي نظرة على كود بسيط جدًا للتخطيط التكيفي لعمودين.
إليك نص HTML المصدر في عمودين:
نص، نص، نص،
نص، نص، نص،
div class = "left-col" - العمود الأيسر مع class.left-col
div class = "right-col" - العمود الأيمن مع class.right-col
div class = "clearfix" عبارة عن كتلة خاصة لإلغاء التعويم. انظر أدناه.
كود CSS لتخطيط النص التكيفي في عمودين:
عمود يسار، /* العمود الأيسر */ .right-col/* العمود الأيمن */ ( width: 50%; /* width */ min-width: 180px; /* الحد الأدنى للعرض التضييقي */ height: auto; /* الارتفاع */ حجم الصندوق: مربع الحدود؛ تعويم: يسار؛ /* المسافة البادئة اليسرى */ )
/*أنماط للشاشات الصغيرة*/ @media (max-width: 479px)( .left-col, /* left column */ .right-col/* right column */ ( width: 100%; /* width */ ) .right-col( padding-left: 0px; /* الحشو الأيسر */ ) ) /* Clearfix يعيد تعيين float*/ .clearfix:after ( content: " "؛ العرض: block؛ واضح: كلاهما؛ الرؤية: مخفي؛ السطر -الارتفاع: 0;
العمود الأيسر و العمود الأيمن العرض غير ثابت، ولكن كنسبة مئوية - العرض: 50%؛ نسبي بحيث يتم تمديد الأعمدة بالنسبة لعرض الحاوية.
ولكن عند الوصول إلى 180 بكسل، لم يعد يتم تصغير كل عمود.
الحد الأدنى للعرض: 180 بكسل؛ - تم تحديد الحد الأدنى لحجم العمود.
وبطبيعة الحال، يمكن تغيير هذه الأحجام حسب تقديرك. ثلاثة أعمدة، لذلك قم بتعيين العرض: 33.3333%؛ .
الارتفاع: تلقائي؛ - ارتفاع الأعمدة التكيفية، يتغير تلقائيًا حسب حجم المحتوى في الأعمدة.
تحجيم الصندوق: صندوق الحدود؛ - يُنصح بتسجيله للتخطيط التكيفي. خاصية تتناسب فيها جميع الحشوات والحدود وما إلى ذلك مع حجم الحاوية المحدد. في حالتنا، .left-col و .right-col .
تعويم: اليسار؛ - خاصية يتم فيها ترتيب الأعمدة التي تحتوي على نص أفقيًا بالتناوب. يعتمد عدد الأعمدة على الأحجام النسبية المحددة مسبقًا. لدينا العرض: 50%؛ - عمودين.
@media (أقصى عرض: 479 بكسل) - ما يسمى بنقطة التوقف. وهذا يعني أنه على الشاشات الأصغر من 479 بكسل، سيمتد كل عمود عبر عرض الشاشة بالكامل. ينص الكود على:
العمود الأيسر والعمود الأيمن (العرض: 100%؛)
نقاط التوقفباستخدام نقاط التوقف، يمكنك التحكم بسهولة في حجم العناصر لشاشات مختلفة.
@media(الحد الأقصى للعرض: 479px)() @media(الحد الأقصى للعرض: 767px)() @media(الحد الأقصى للعرض: 991px)() @media(الحد الأقصى للعرض: 1199px)() @media(min-width : 480 بكسل) ( ) @media (العرض الأدنى: 768 بكسل) ( ) @media (العرض الأدنى: 992 بكسل) ( ) @media (العرض الأدنى: 1200 بكسل) ( )
صعب؟ فقط للوهلة الأولى. قم بتنزيل المصدر وقم بتغيير المعلمات، وانظر إلى المنطق. أو قم فقط بنسخ الكود المصدري واستبدال النص بالكود الخاص بك.
تخطيط التكيف. نص من عمودين مع الصوروبطبيعة الحال، يمكنك إضافة أي عناصر إلى الأعمدة التكيفية. دعونا نلقي نظرة على مثال لإضافة الصور إلى الأعمدة التكيفية مع النص.
أولاً، دعونا نجعل الصور نفسها قابلة للتكيف. للقيام بذلك، قم بتعيين فئة لهم وضبط العرض على 100%.
أنماط CSS للصور سريعة الاستجابة
/*أنماط الصور سريعة الاستجابة*/ .img-response(display: block; max-width: 100%; /* العرض، الأبعاد بالنسب المئوية*/ height: auto; Margin: 20px 0px; /* الحشو العلوي والسفلي */ الخلفية: #fff; /* للجمال، وملء اللون */ الحشو: 4 بكسل /* للجمال، والحشو الداخلي */ الحدود: 1 بكسل صلب #ddd /* للجمال، والحدود الرمادية */ )
يُنصح باختيار صور بعرض 500 بكسل، بحيث تمتد على كامل عرض الشاشة على الشاشات الصغيرة وتبدو جميلة.
ترميز HTML لأعمدة الصور المستجيبة:
.............
...........
فلاد ميرزيفيتش
غالبًا ما يتم استخدام الشبكة المعيارية المكونة من عمودين على مواقع الويب، وكقاعدة عامة، يحتوي عمود واحد على المادة الرئيسية (نص مقال، على سبيل المثال)، ويحتوي الثاني على روابط لأقسام الموقع ومعلومات أخرى. لإنشاء مثل هذا التخطيط، تكون الجداول مريحة للغاية - تعمل كل خلية كعمود منفصل، مما يجعل من السهل ضبط معلمات عرض المستندات المختلفة.
عرض العمودأولاً، دعونا نفكر في الخيار الأبسط، عندما يكون عرض العمود الأيسر مرمزًا بالبكسل، ويختلف عرض العمود الأيمن وفقًا لحجم نافذة المتصفح. للقيام بذلك، تحتاج إلى تعيين العرض الإجمالي للجدول بأكمله كنسبة مئوية من خلال سمة العرض للعلامة
| (مثال 1).
مثال 1: عرض العمود بالبكسل عمودين
في هذا المثال، لا يتم عرض حدود الجدول، ويتم تحديد المحاذاة الرأسية لمحتويات الخلية على طول الحافة العلوية بواسطة السمة valign ذات القيمة top . وهذا مطلوب بحيث عندما تختلف محتويات الخلايا في الحجم، فإنها لا تتحرك بالنسبة لبعضها البعض، ولكنها تبدأ بنفس الطريقة من الحافة العلوية. يمكن استبدال سمات العرض والمحاذاة بخصائص نمط العرض والمحاذاة الرأسية بنفس القيم. ثم سيبدو هذا الرمز بهذا الشكل (المثال 2). مثال 2: استخدام الأنماط عمودين #maket ( العرض: 100%; /* عرض الجدول بأكمله بالنسبة المئوية */ ) #maket TD ( محاذاة رأسية: أعلى; /* محاذاة رأسية في الخلايا */ ) TD#leftcol ( width: 200px; / * عرض العمود الأيسر بالبكسل */ )
يتم التحكم في المسافة بين الأعمدة بواسطة سمة cellpadding الخاصة بالعلامة
في هذا المثال، تكون قيم سمات cellpacing وcellpadding صفرًا، ويتم تحديد التباعد بين محتويات الأعمدة بواسطة خاصية padding-right، والتي تتم إضافتها إلى الخلية اليسرى من خلال معرف يسمى leftcol . وبالمثل، يمكن تعديل المسافات البادئة ليس فقط على الجانب الأيمن، ولكن أيضًا على الجوانب الأخرى من كل خلية. يوضح المثال 4 كيفية تعيين الهوامش لجميع الخلايا باستخدام الأنماط. مثال 4. الهوامش في الخلايا عمودين #maket TD ( الحشو: 5 بكسل؛ /* الهوامش حول محتويات الخلية */ محاذاة رأسية: أعلى؛ /* محاذاة إلى أعلى الخلايا */ العرض: 200 بكسل؛ /* عرض العمود */ )
لفصل عمود عن الآخر بشكل مرئي، يتم استخدام تقنيات مختلفة، ربما يكون أكثرها شيوعًا هو استخدام لون الخلفية. من الأفضل تحديد اللون من خلال الأنماط، وهذا يسمح لك بوضع تصميم الصفحة في ملف منفصل. للقيام بذلك، قم بإنشاء فئة نمط جديدة، وقم بتعيين خاصية الخلفية لها وتطبيقها على الخلية المطلوبة (المثال 5). مثال 5: لون الخلفية عمودين #maket ( العرض: 100%; /* عرض الجدول بأكمله */ ) TD ( محاذاة رأسية: أعلى; /* محاذاة رأسية في الخلايا */ الحشو: 5px; /* الهوامش حول الخلايا */ ) TD# leftcol ( العرض: 200 بكسل; /* عرض العمود الأيسر */ الخلفية: #ccc; /* لون خلفية العمود الأيسر */ ) TD#rightcol ( الخلفية: #fc3; /* لون خلفية العمود الأيمن */ )
في هذا المثال، تمت إضافة ألوان خلفية مختلفة للأعمدة اليمنى واليسرى (الشكل 1). أرز. 1. أعمدة بألوان مختلفة فاصل العمودإن استخدام الهوامش ليس مناسبًا دائمًا لتعيين المسافة المطلوبة بين الأعمدة. على سبيل المثال، في حالة عدم إمكانية تضمين الحقول المحيطة بالنص لأسباب مختلفة. ومن ثم فإن إضافة خلية أخرى سيساعد، والتي تعمل كفاصل بين الأعمدة (المثال 6). مثال 6: استخدام ثلاث خلايا عمودين #maket ( العرض: 100%; /* عرض الجدول بأكمله */ ) TD ( محاذاة رأسية: أعلى; /* محاذاة رأسية في الخلايا */ الحشو: 5px; /* الهوامش حول الخلايا */ ) TD# leftcol ( العرض: 200 بكسل; /* عرض العمود الأيسر */ الخلفية: #ccc; /* لون خلفية العمود الأيسر */ الحدود: 1 بكسل صلب #000; /* خيارات الحدود */ ) TD#rightcol ( الخلفية: #fc3; / * لون الخلفية للعمود الأيمن */ border: 1px Solid #000 /* معلمات الحدود */ ) #spacer ( width: 10px; /* المسافة بين الأعمدة */ )
يقدم هذا المثال عمودًا آخر به فاصل معرف النمط، مما يجعل من السهل تغيير العرض بين الأعمدة. ليس عليك وضع أي شيء داخل هذه الخلية؛ فالمتصفحات تعمل بشكل صحيح تمامًا مع هذه الخلايا. في التين. ويبين الشكل 2 نتيجة المثال. وللوضوح والجمال، تم إضافة حدود حول الأعمدة. الخط بين الأعمدةيمكنك فصل الأعمدة ليس فقط باستخدام لون الخلفية والمسافة البيضاء، ولكن أيضًا عن طريق إضافة خط بين الأعمدة. مرة أخرى، الأنماط مفيدة هنا لأنها تجعل إنشاء الخطوط أسهل بكثير. تحتاج فقط إلى تعيين خاصية border-left للعمود الأيمن أو خاصية border-right للعمود الأيسر (المثال 7). مثال 7: إضافة سطر عمودين #maket ( العرض: 100%; /* عرض الجدول بأكمله */ ) TD ( محاذاة رأسية: أعلى; /* محاذاة رأسية في الخلايا */ الحشو: 5px; /* الهوامش حول الخلايا */ ) TD# leftcol ( العرض: 100 بكسل; /* عرض العمود الأيسر */ الخلفية: #ccc; /* لون خلفية العمود الأيسر */ الحدود اليمنى: 1 بكسل متقطع #000; /* معلمات الخط */ ) TD#rightcol ( الخلفية: #fc3 / * لون خلفية العمود الأيمن */ ) ;
وتظهر نتيجة هذا المثال أدناه. ملخصيعد إنشاء الأعمدة باستخدام الجداول عملية بسيطة وسريعة إلى حد ما؛ كل ما عليك فعله هو إضافة جدول يحتوي على خليتين وتحديد سماته المرئية. بالإضافة إلى ذلك، يمكن وضع معظم المعلمات التي تحدد نوع الجدول في الأنماط وبالتالي تسريع عملية إضافة الجداول من نفس النوع والمستندات بناءً عليها. مع التخطيط المكون من عمودين، يتم استخدام وسائل مختلفة لتصميم الأعمدة. على سبيل المثال، يمكنك استخدام تعبئة الخلفية، أو إضافة حد حول الأعمدة، أو تغيير المسافة بينها، أو تعيين خط فاصل رأسي. يتم التحكم في كل هذه الأمور باستخدام الأنماط، مما يؤدي إلى تقليل الكود وتوسيع خيارات تعديل الجدول وسهولة تطوير الموقع. من المؤكد أنك رأيت في بعض المواقع حظرًا على استخدام زر الفأرة الأيمن. تحارب هذه الميزة في المقام الأول أولئك الذين يريدون سرقة المحتوى الخاص بك. هذا الإجراء لن يحميك بشكل كامل من السرقة، لكنه سيحميك بشكل كامل من النسخ اليدوي. خيارات أخرى . في Blogger، أضف تعليمات برمجية إلى أداة HTML/Javascript في علامة التبويب "تصميم". إذا كنت تستخدم أحد أحدث السمات في مدونتك (Emporio، وContempo، وSoho، وNotable)، فلا تنس تنشيط رؤية الأداة (مربع الاختيار الموجود بجوار "مرئي للجميع"، و"إظهار الأداة " HTML/ جافا سكريبت ""). في Wordpress، أضف الكود إلى أداة "النص".
العطلة تقترب - يوم المرأة العالمي. دعونا نستعد لذلك مقدما. يمكنك تهنئة الفتيات والنساء بطريقة أصلية باستخدام خدمات البطاقات البريدية الموضحة أدناه.  أنشئ بطاقة بريدية بتاريخ 8 مارس عبر الإنترنت استخدم الخدمات التالية لإنشاء بطاقة بريدية عمليًا من البداية. آمل أنه باستخدام أحد هذه المولدات، ستتمكن من تهنئة سيداتك بشكل مناسب في الثامن من مارس!
محتوى المقال: يتم إغلاق 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، وفيم يستخدم، وأين تبحث عنه، وكيفية كتابته بشكل صحيح. وأحذركم سأقول من نفسي بشكل مبسط لعامة الناس كما أراها +أمثلة. لذلك، دعونا نبدأ من بعيد. مقالات مماثلة
المواد شعبية
|
