يفتح عنوان هذه المقالة مناقشة حول كيفية إنشاء نص في أسفل الصفحة باستخدام هتمل. يبحث مطورو الويب باستمرار عن طرق لتحسين العرض المرئي لمواقعهم ، وإحدى الطرق لجعل الصفحة أكثر فاعلية وجاذبية من الناحية الجمالية هي وضع بعض النصوص التي ستظهر في أسفل الصفحة.
في هذه المقالة ، سننظر في الطرق الرئيسية لتحقيق الهدف: باستخدام خصائص كس" الموقف: ثابت "و" أسفل: 0 " ، وذلك باستخدام علامة ، فضلا عن القدرة على استخدام جافا سكريبت لوضع النص بشكل حيوي في أسفل الصفحة.
سننظر في كل طريقة من هذه الطرق بمزيد من التفصيل في الأقسام التالية. بالطبع ، يمكن لكل مطور اختيار الطريقة الأنسب وفقا لخصائص مشروعه. وسوف نقدم أيضا تعليمات وأمثلة التعليمات البرمجية التي من شأنها أن تساعدك بسهولة تضمين النص في أسفل الصفحة على موقع الويب الخاص بك.
- كيفية وضع النص في أسفل صفحة هتمل: الطرق والتعليمات الأساسية
- باستخدام موقف الملكية المغلق
- باستخدام أسفل الخاصية المغلق
- باستخدام خصائص كس من فليكسبوكس
- باستخدام خصائص كس من الشبكة
- باستخدام خاصية تعويم كس
- استخدام جافا سكريبت لوضع النص في الأسفل
- ضع النص في أسفل الصفحة باستخدام علامات هتمل
- سؤال وجواب
كيفية وضع النص في أسفل صفحة هتمل: الطرق والتعليمات الأساسية
يمكن أن يكون وضع النص في أسفل صفحة هتمل مفيدا لأغراض مختلفة ، على سبيل المثال ، لوضع قبو أو معلومات إضافية. في هذا القسم ، سننظر في الطرق والتعليمات الرئيسية لوضع النص في أسفل صفحة هتمل.
هذه هي الكتلة السفلية للنص.
- استخدام الموضع المطلق: هناك طريقة أخرى لوضع النص في أسفل الصفحة وهي استخدام الموضع المطلق. على سبيل المثال ، يمكنك إنشاء كتلة مع النص وتطبيق كس التالية:
| هذه هي الكتلة السفلية للنص. | |
| النص في أسفل الصفحة |
.تذييل {
موقف: ثابت;
أسفل: 0;
العرض: 100%;
لون الخلفية: # اف 9 اف 9 اف 9;
الحشو: 10 بكسل;
}
.النص {
محاذاة النص: المركز;
}
- يمكن تغيير أسلوب النص في أسفل الصفحة وفقا لتصميم موقعك.
- الخاصية السفلية كس هي واحدة من الطرق لوضع النص في أسفل الصفحة في هتمل. يحدد الإزاحة من الحافة السفلية للعنصر إلى الحافة السفلية للحاوية الخاصة به.
- .محدد {
- أسفل: 0;
}
- إذا كنت بحاجة إلى وضع النص في أسفل الصفحة بأكملها ، يمكنك استخدام رمز كس التالي:
- الارتفاع: 100%;
- الحشو: 0;
- .حاوية {
- موضع: نسبي;
}
.تذييل {
موضع: مطلق;
أسفل: 0;
العرض: 100%;
}
في هذا المثال ، يتم إنشاء حاوية مع فئة "الحاوية" ، والتي تحتل الحد الأدنى لارتفاع الشاشة بأكملها. ثم يتم إنشاء كتلة مع فئة "تذييل الصفحة" ، والتي يتم وضعها تماما في أسفل الحاوية باستخدام خاصية القاع: 0.
وبالتالي ، سيتم دائما عرض النص الموجود في الكتلة مع فئة "التذييل" في أسفل الصفحة.
باستخدام أسفل الخاصية كس هو وسيلة بسيطة وفعالة لوضع النص في أسفل الصفحة في هتمل.
باستخدام خصائص كس من فليكسبوكس
فليكسبوكس هو مجموعة من خصائص كس مصممة لإنشاء تخطيط صفحة ويب مرنة. يسمح لك بالتحكم في موقع العناصر في الحاوية وتخصيص مساحة إضافية لها أو تضييقها حسب احتياجات التصميم.
والميزة الرئيسية ل فليكسبوكس هو أنه يجعل من السهل لخلق تخطيطات التكيف التي تتغير تلقائيا اعتمادا على حجم شاشة المستخدم أو الجهاز.
لاستخدام فليكس بوكس ، تحتاج إلى تطبيق بعض الخصائص الأساسية للحاوية الأم (حاوية فليكس) والعناصر الفرعية (عناصر فليكس).
الخصائص الرئيسية للحاوية المرنة:
عرض: فليكس;
- يضبط وضع الدرج المرن للحاوية.
فليكس الاتجاه: صف / صف-عكس / عمود / عمود-عكس;
- يحدد اتجاه وضع العناصر داخل الحاوية (أفقيا أو رأسيا).
تبرير المحتوى: فليكس بداية / فليكس نهاية / مركز / الفضاء بين / الفضاء حول;
- يحدد موقع العناصر على طول المحور الرئيسي.
- محاذاة العناصر: فليكس بداية / فليكس نهاية / مركز / خط الأساس / تمتد;
- - يحدد محاذاة العناصر على طول المحور العرضي.
- الخصائص الأساسية للعناصر المرنة:
فليكس-تنمو: المعنى;
- يحدد قدرة العنصر على زيادة عرض المساحة الحرة المتبقية. فليكس يتقلص: القيمة; | |
- يحدد قدرة العنصر على الانكماش في العرض ، إذا لزم الأمر. أساس فليكس: القيمة; - يحدد العرض الأولي للعنصر. |
فليكس: القيمة1 القيمة2 القيمة3;
-خاصية مختصرة تجمع بين النمو المرن والانكماش المرن والأساس المرن في واحد.
محاذاة النفس: السيارات / فليكس بداية / فليكس نهاية / مركز / خط الأساس / تمتد;
- يحدد محاذاة عنصر على طول المحور المستعرض ، متجاوزا خاصية محاذاة العناصر لهذا العنصر.
فليكسبوكس هو أداة قوية لخلق استجابة ومرنة تخطيطات صفحة ويب. نظرا لسهولة الاستخدام ومجموعة واسعة من الميزات ، فهي واحدة من أكثر طرق التخطيط شيوعا.
باستخدام خصائص كس من الشبكة
- 2
3
4
- في هذا المثال ، يتم تقسيم عناصر الحاوية إلى عمودين وأربعة صفوف. يستخدم كل عنصر خصائص عمود الشبكة والصف الشبكي لاحتلال المواضع المطلوبة في الشبكة.
- كما يوفر الشبكة القدرة على التحكم في وضع وترتيب العناصر باستخدام خصائص الشبكة الفجوة ، الشبكة لصناعة السيارات في الأعمدة ، الشبكة لصناعة السيارات في الصفوف ، وتبرير العناصر ، محاذاة العناصر وغيرها.
- تتيح لك خاصية تعويم كس التفاف النص حول العناصر.
تطبيق خاصية كس تعويم: اليسار ؛ إلى العمود الأول. سيؤدي ذلك إلى محاذاته إلى اليسار وجعل العمود الثاني (وجميع العناصر اللاحقة) نصا متدفقا.