كتلة ديف هي واحدة من عناصر هتمل الأكثر تنوعا التي تستخدم على نطاق واسع لإنشاء مجموعة متنوعة من مكونات صفحة الويب. ومع ذلك ، في بعض الأحيان قد يكون محتوى الحظر كبيرا جدا بحيث لا يمكن عرضه على صفحة واحدة ، وقد تحتاج إلى إضافة تمرير رأسي لراحة المستخدم.
إضافة التمرير إلى كتلة ديف يمكن تنفيذها باستخدام خصائص كس. الخطوة الأولى هي تعيين ارتفاع ثابت لكتلة ديف. على سبيل المثال ، يمكنك استخدام خاصية الارتفاع وتعيين قيمة محددة ، على سبيل المثال ، 400 بكسل. سيحدد هذا ارتفاع الكتلة ، وإذا كان المحتوى أكبر من هذا الارتفاع ، فسيظهر شريط تمرير عمودي.
الآن ، لتمكين التمرير ، تحتاج إلى استخدام خاصية تجاوز السعة وتعيين القيمة التلقائية. سيسمح هذا لشريط التمرير بالظهور فقط إذا تجاوز محتوى الكتلة ارتفاعه. إذا كنت لا تريد عرض شريط التمرير تلقائيا ، حتى إذا تجاوز المحتوى ارتفاع الكتلة ، فيمكنك استخدام قيمة التمرير.
- وهكذا ، إضافة التمرير إلى كتلة ديف بسيط جدا باستخدام ارتفاع خصائص كس وتجاوز. هذا يجعل من السهل التحكم في عرض محتوى الكتلة ويحسن تجربة المستخدم.
- لماذا قد تحتاج إلى التمرير إلى كتلة شعبة?
- الخطوة 1: إنشاء حاوية شعبة
- كيفية إنشاء كتلة ديف مع المعلمات اللازمة
- الخطوة 2: تعيين خصائص الفائض والارتفاع
- كيفية استخدام خصائص الفائض والارتفاع لإضافة التمرير
الخطوة 3: إضافة محتوى إلى كتلة ديف
كيفية إضافة محتوى إلى كتلة ديف والتحقق من النتيجة
- سؤال وجواب
- هل من الممكن تخصيص مظهر شريط التمرير?
- التمرير في كتلة ديف هو أداة مفيدة للسيطرة على عرض المحتوى داخل منطقة محدودة على صفحة ويب. وفيما يلي بعض الأسباب التي قد تحتاج إلى تطبيق التمرير في كتلة ديف:
- عندما كنت تتعامل مع الكثير من المحتوى الذي لا يصلح على الشاشة ، والتمرير في كتلة شعبة يسمح للمستخدمين لعرض كل المحتوى باستخدام التمرير الرأسي أو الأفقي.
- التمرير في كتلة ديف كما يسمح لك لتقسيم المحتوى إلى أقسام مختلفة ، والتي يمكن أن تكون مفيدة إذا كان لديك الكثير من المعلومات التي تحتاج إلى تقديمها على مراحل أو حسب الفئة.
كيف يمكنني إضافة التمرير إلى كتلة شعبة?
لماذا قد تحتاج إلى التمرير إلى كتلة شعبة?
المحتوى لا يصلح على الشاشة
مشاركة المحتوى
إنشاء منطقة ثابتة
التمرير في كتلة شعبة يمكن استخدامها لإنشاء منطقة ثابتة على الصفحة حيث يبقى المحتوى في مكان وفقط كتلة نفسها مخطوطات. يمكن أن يكون هذا مفيدا عندما تحتاج إلى التقاط بعض المعلومات ، مثل رأس الجدول أو التنقل الجانبي ، لراحة المستخدم.
هيكلة القائمة
التمرير في كتلة ديف يمكن استخدامها لهيكلة القائمة ، وخصوصا عندما يكون لديه العديد من العناصر أو يتطلب مساحة إضافية على الصفحة. التمرير يسمح لك لإخفاء عناصر القائمة التي لا تناسب على الشاشة ، ويجعلها أكثر إحكاما.
- إنشاء الحاجيات المخصصة
- التمرير في كتلة ديف هي واحدة من الأدوات الرئيسية لخلق الحاجيات المخصصة مثل المتزلجون ، الأكورديون ومعارض الصور. يسمح لك بعرض جزء صغير فقط من المحتوى في الكتلة ، وإخفاء الباقي ، ويسمح للمستخدمين بالتمرير عبر المحتوى وفقا لتقديرهم.
- بشكل عام ، التمرير في كتلة ديف هو أداة قوية للسيطرة على عرض المحتوى على صفحة ويب. إنه يحسن تجربة المستخدم ، ويجعل الصفحات أكثر وظيفية وقابلة للمشاهدة ، ويوفر تنقلا أكثر مرونة وملاءمة للمعلومات.
- الخطوة 1: إنشاء حاوية شعبة
الخطوة الأولى هي إنشاء حاوية ديف ، والتي سوف تحتوي على المحتوى الذي يتطلب التمرير. يمكن القيام بذلك على النحو التالي:
افتح العلامة
.
قم بتعيين السمات إذا لزم الأمر. على سبيل المثال ، يمكنك إضافة فئة أو معرف إلى نمط أو تحديد حاوية.
أدخل المحتوى الذي يتطلب التمرير. يمكن أن يكون نصا أو صورا أو جداول أو عناصر أخرى لصفحة الويب.
أغلق العلامة
كيفية إنشاء كتلة ديف مع المعلمات اللازمة
- ، أضف العلامة
إذا كنت بحاجة إلى معلمات معينة:
معرف: معرف فريد لكتلة ديف. إضافة
سمة المعرف
وتعيين قيمة فريدة ، على سبيل المثال:
فئة: فئة لكتلة شعبة. إضافة سمة
فئة
وتعيين اسم الفئة ، على سبيل المثال:
نمط: التصميم من كتلة ديف. إضافة
سمة النمط
وتحديد خصائص النمط باستخدام كس ، على سبيل المثال:
الخطوة 4: إضافة المحتوى داخل كتلة شعبة. يمكنك استخدام أي علامات هتمل أخرى ، نص أو صور ، على سبيل المثال:
هذا هو كتلة شعبة مع المحتوى.
في هذا المثال, ال .سيكون للكتلة القابلة للتمرير ارتفاع 200 بكسل ، وإذا لزم الأمر ، ستعرض التمرير الرأسي إذا تجاوزت محتوياتها هذا الارتفاع.
كيفية استخدام خصائص الفائض والارتفاع لإضافة التمرير
خصائص تجاوز والارتفاع يمكن استخدامها معا لإضافة التمرير إلى كتلة شعبة. تتيح لك خاصية تجاوز السعة تحديد كيفية تعامل المتصفح مع المحتوى الذي يتجاوز المساحة المتاحة داخل الكتلة ، بينما تحدد خاصية الارتفاع ارتفاع الكتلة.
إضافة الأنماط التالية إلى رمز كس الخاص بك:
/ * ضبط ارتفاع الكتلة وهوامشها الخارجية */
- # للتمرير-المحتوى {
تجاوز: تلقائي;
كتلة شعبة التمرير ، وسوف نقوم بإضافة محتوى إليها. سوف تحتاج إلى استخدام علامات هتمل لترتيب المحتوى داخل الكتلة.
فيما يلي مثال على المحتوى الذي يمكن إضافته إلى
ديف بلوك
:
قائمة التسوق:
التفاح
الحليب
ديف بلوك
، تأكد من أن المحتوى يناسب تماما داخل كتلة التمرير ، وإلا فإنه سيتجاوزه.
كيفية إضافة محتوى إلى كتلة ديف والتحقق من النتيجة
ف
يمكنك إضافة أي قدر من النص إلى هذه الكتلة.
للتحقق من النتيجة ، احفظ الملف وافتحه في متصفح الويب.
يمكنك أيضا استخدام عناصر هتمل الأخرى ، مثل
كما رأ